two fixed width divs and one dynamic (NO content)

Question

I want 3 columns

here is the code I have

div id="boundaries">
<div id="fenceleft"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
<div id="fence"></div>
<div id="fenceright"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
</div>  

and the CSS

#boundaries {
overflow: hidden;
position:absolute;
top:240px;
display:block;
width:100%;
max-width: 1395px;
height:92px;
z-index: 15;
}

#fenceleft {
float:left;
display: block;
width:52px;
max-width: 52px;
height:92px;
}

#fenceleft IMG {
-moz-transform: scaleX(-1); /* For Mozilla Firefox */
-o-transform: scaleX(-1);   /* For Opera */
-webkit-transform: scaleX(-1); /* For Safari, Google chrome */

/* For IE */
filter: FlipH;
-ms-filter: "FlipH";
}

#fence {
float: left;
background: url(img/fence.png) repeat-x;
display: block;
height:82px;
}

#fenceright {
float:right;
display: block;
width:52px;
max-width: 52px;
height:92px;
}

Inside the boundaries div I want fence left and fence right to contain a fixed width image which they do. I want the #fence div to fill the remaining space between the two divs the right image needs to be fixed to the right hand side of the page and the left, the left hand side. the remainder I would like to have a div.

NOTE this question is common but my problem unique. the problem is that the middle or '#fence' div has no content and just a background image. with this selected code nothing displays because it has no content to fill the width.

to sum up i want [52px div fixed left] [remaining width div] [52px div fixed right]

Answer 1

As I understand you need something like this:

html:

<div class="leftFence"></div>
<div class="center"></div>
<div class="rightFence"></div>

css:

.leftFence,
.rightFence {
    position: fixed;
    height: 100%;
    width: 52px;
    background: red;
    top: 0;
}
.leftFence {
    left: 0;
}
.rightFence {
    right: 0;
}
.center {
    margin: 0 52px;
    height: 100px;
    background: gray;
}

Demo