Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- DIV - how to stretch to auto fill empty area?


Marshall - 1:13 am on Jan 28, 2012 (gmt 0)


I want those 1px wide grey deviders in the menu


Modify the CSS to add an thrid div

#Nav {
width: 100%
background-color: #000;
}
.NavLeft {
width: 150px; /*example purposes */
float: left;
}
.NavLeftMar {
width: 150px; /*example purposes */
float: left;
border-left: 1px;
border-style: solid; /*not really necessary*/
border-color: #CCC;
}
.NavRight {
width: 150px;
float: right;
}

<div id="Nav">
<div class="NavLeft">LINKS</div>
<div class="NavLeftMar">LINKS</div>
<div class="NavLeftMar">LINKS</div>
<div class="NavLeftMar">LINKS</div>
<div class="NavRight">LINKS</div>
</div>
<br style="clear: both;" />

If you don't want to do it that way, you could add the left border to all the NavLeft divisions then, on the first one add

<div id="Nav">
<div class="NavLeft" style="border: none;">LINKS</div>
<div class="NavLeft">LINKS</div>
<div class="NavLeft">LINKS</div>
<div class="NavLeft">LINKS</div>
<div class="NavRight">LINKS</div>
</div>
<br style="clear: both;" />

And remember, adding a 1px border to a side will make the element 1px wider than defined. I only mention it as there are times it is overlook, should it be crucial.

On a side note, styles within an element is being depreciated last I read.

Marshall


Thread source:: http://www.webmasterworld.com/css/4411613.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com