I am trying to make a layout with 3 columns across with the left and right column's width being set while the middle column's width adjusts according to the size of the screen. Does anyone know of a good way to do this? I have tried for example:
div.left { left: 0px; width: 200px }
div.middle { left: numpx; width: 50%; float: left }
div.right { left: numpx; width: 200px; float: left }
I am preaty confident this will look different on different size monitors plus I have a div.top { width 100% } that is londer than the above. I tried taking out the width but that just brought div.right over.Fix the width of the 2 outer ones, use % for the inner, and relative positioning.It all depends on the content of those divs
<!-- w --><a class="postlink" href="http://www.vladdy.net/demos/elementsizing.htmlTry">www.vladdy.net/demos/elementsizing.htmlTry</a><!-- w --> this:
div.left { left: 0px; width: 200px }
div.middle {display:absolute;margins: 200px auto; width: 100%;}
div.right {width: 200px; float: right}Or instead of absolute positioning, try using floats and negative margins (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->).The negative margin seems to almost work however it overlaps. I did something like this.
pos: absolute;
margin-left: -185px;
margin-right: -185px;
width: 100%;
float: left;
This was the middle one and it almost worked however it was all the way to the left overlapping the left div. The total length was = to the div above it that had 100% width. When I set the left margin to 0px the left div and middle div looked correct however it was then to long and the right div fell below a line. I tried everyone elses ideas and everytime it would put the left div on top the the middle div below and right below that.www.equipmentremarketing.com/test.htm
div.left
{
posistion: absolute;
width: 185px;
background-image: url('images/left_menu_back.gif');
float: left
}
div.middle
{
posistion: absolute;
width: 100%;
margin-right: -185px;
margin-left: -185px;
float: left
}
div.right
{
posistion: absolute;
width: 185px;
float: left
}I have it closer. The negative margin worked however it just let two elements overlap. The text in the middle element will overlap the right element. This is the code. Any ideas how to stop the text from overlapping?
div.middle
{
posistion: absolute;
width: 100%;
right: 185px;
margin-right: -370px;
margin-left: 0px;
float: left
}If you could just disregaurd all of the above and explain to me why when I try to use absolute positioning that it is not absolute. My div do not change as I change for example top, right, left or anything.You might find the following post an interesting read. It gives a quick description of CSS positioning: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=294184#post294184">http://www.webdeveloper.com/forum/showt ... post294184</a><!-- m -->
div.left { left: 0px; width: 200px }
div.middle { left: numpx; width: 50%; float: left }
div.right { left: numpx; width: 200px; float: left }
I am preaty confident this will look different on different size monitors plus I have a div.top { width 100% } that is londer than the above. I tried taking out the width but that just brought div.right over.Fix the width of the 2 outer ones, use % for the inner, and relative positioning.It all depends on the content of those divs
<!-- w --><a class="postlink" href="http://www.vladdy.net/demos/elementsizing.htmlTry">www.vladdy.net/demos/elementsizing.htmlTry</a><!-- w --> this:
div.left { left: 0px; width: 200px }
div.middle {display:absolute;margins: 200px auto; width: 100%;}
div.right {width: 200px; float: right}Or instead of absolute positioning, try using floats and negative margins (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->).The negative margin seems to almost work however it overlaps. I did something like this.
pos: absolute;
margin-left: -185px;
margin-right: -185px;
width: 100%;
float: left;
This was the middle one and it almost worked however it was all the way to the left overlapping the left div. The total length was = to the div above it that had 100% width. When I set the left margin to 0px the left div and middle div looked correct however it was then to long and the right div fell below a line. I tried everyone elses ideas and everytime it would put the left div on top the the middle div below and right below that.www.equipmentremarketing.com/test.htm
div.left
{
posistion: absolute;
width: 185px;
background-image: url('images/left_menu_back.gif');
float: left
}
div.middle
{
posistion: absolute;
width: 100%;
margin-right: -185px;
margin-left: -185px;
float: left
}
div.right
{
posistion: absolute;
width: 185px;
float: left
}I have it closer. The negative margin worked however it just let two elements overlap. The text in the middle element will overlap the right element. This is the code. Any ideas how to stop the text from overlapping?
div.middle
{
posistion: absolute;
width: 100%;
right: 185px;
margin-right: -370px;
margin-left: 0px;
float: left
}If you could just disregaurd all of the above and explain to me why when I try to use absolute positioning that it is not absolute. My div do not change as I change for example top, right, left or anything.You might find the following post an interesting read. It gives a quick description of CSS positioning: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=294184#post294184">http://www.webdeveloper.com/forum/showt ... post294184</a><!-- m -->