two fixed width divs and one dynamic (NO content) - css

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

Answer 2

#fixwidth1{
width:52px;
}
#fixwidth2{
width:52px;
}
#dynamicwidth{
width:calc(100%-104px); //i.e 100% width of browser - sum of two fixed width
background:#114455;
}

Answer 3

change css for boundaries div to this:
#boundaries {
overflow: hidden;
position:absolute;
top:240px;
display:block;
left:0;
right:0;
height:92px;
z-index: 15;
}
this will properly scale your entire content width to the screen resolution, nvr ever give width like width:1395px. since you made your boundaries container to be absolute, you can stretch it using its top,left,right bottom value (and also width and height);
now change your fenceleft css to this:
#fenceleft {
position: relative;
float:left;
left:0;
width:10%;
height:100%;
}
so now, for any resolution, your leftfence will always be at 0 left from the left border of its parent i.e. boundaries div. and give it a height in percentage, so that, whenever you need to adjust height, you just have to adjust the parents class, just one class.
change your fenceright css to this:
#fence {
position: relative;
height:100%;
width:80%;
float: left;
}
now notice: since you have placed float:left on the fenceleft div, fence will align next to itself i.e. 10% (width of fenceleft) away from the left border of boundaries(parent) div.
also, since it has been given a width of 80%, that means, 80%+10%(from left)=90% hence 100-90 = 10% i.e. 10% width is remaining to the right of fence div. in which you can place your fenceright
change your fenceright to this:
#fenceright {
position: relative;
left:90%;
width:10%;
height:100%;
border:Solid 1px #666666;
}
now all your divs are properly aligned, with no horizontal scroll, covering entire horizontal width of screen.
do not copy and paste these directly. organize your CSS accordingly, do the math. think about a range of resolutions and not just your screen.
read this. it shd help you out.

Answer 4

in the html the center div must be after the left and the right div.
<div id="boundaries">
<div id="fenceleft"><img src="" width="52" height="92" /></div>
<div id="fenceright"><img src="" width="52" height="92" /></div>
<div id="fence"></div>
</div>
in CSS margin: 0 auto let the center div fill the remainder， and width of the center div must be given.
#fence {
margin:0 auto;
background: url() repeat-x;
display: block;
height:92px;
width: 700px;
position:relative;
}
#fenceright {
position:relative;
float:right;
display: block;
width:52px;
max-width: 52px;
height:92px;
}
hi, one example, see here. i hope this can help you.