DIV - how to stretch to auto fill empty area?

[esso82]

Hi guys ... I need a small advice about div tag ... I used to format page layout using tables ...but I`ve decided to move with the age and start formating using divs.

So ... now I have small problem ... what I need to do is fill the gap between left and right div. Why do I need to do that? I need to create a menu ... where each individual link will be displayed one after one from left side with variable number of links depending on user privileges and then one menu link on right side which will allways be there. I have one div which is filled by grey bg color and I`putting menu links with black bg color from left side ... where starting from second link is 1px margin ... and that creates sort of grey devider ... and then after last menu link from left side I need to fill the gap to the right menu link ...

So basicaly ... I need something like this:

[div1 | div2 | div3 | div4 .........and I need to fill this gap until here ....... divx]

as I said there is allways unknown number of divs from left and one div from the right which have properties float:left resp. right and I need to fill the gap between them

can you help me please?

[penders]

Not everything needs to be a DIV. A list of links (ie. a menu) is often marked up as exactly that, an unordered list. And with HTML 5 you have the menu element (although not sure about browser support).

Assuming you are wanting your menu items evenly spaced... I'm still not sure whether this is possible to do in CSS alone that will work cross-browser?! In the latest browsers maybe, but IE7 and earlier I don't think so? (Please prove me wrong someone.) Either way, I think you need to look at the display:table, table-row and table-cell properties - to effectively display your elements like a table!?

Here's an old thread from 2005(!) that discusses something similar:
Fill width using css - Use CSS to fill 100% scalable page width [webmasterworld.com]

And a more recent one from the end of 2010 that still suggests that "...table properties which have even less support...":
getting horizontal list menu to expand/contract with browser width. [webmasterworld.com]

[Marshall]

esso82,

Are you talking about a slide-out menu or actual columns? A slide out menu would probably be a lot easier, IMHO.

penders,

There is a hack for IE6 for slide-out menus using CSS, but it will not html validate if that is a big concern.

Marshall

[esso82]

guys, thank you for replies, I'll show you what exactly I ment, but I presume I will need to reconsider using DIVs in such cases ... should I rather use table instead? ... I mean ... use the DIV to contain whole menu area and then use table or list on the left side and just another DIV inside on right side? ... but anyway .. not having my problem in mind .. is it possible to make a DIV which fills an area with unknown width between left floating and right floating DIV?

and here is my code and a pic to describe what I mean:

[img818.imageshack.us ]

source code from a .php file

echo "<div style='float:left; font-size:15px; line-height:30px; background-color:#000000'><a href='#' class='mm'><span style='margin-left:2px; margin-right:25px'>ROUTES</span></a></div>";
echo "<div class='mmleft'><a href='#' class='mm'><span class='mm'>ARCHIVE</span></a></div>";
echo "<div class='mmleft'><a href='#' class='mm'><span class='mm'>QA</span></a></div>";
echo "<div class='mmleft'><a href='#' class='mm'><span class='mm'>MAINTENANCE</span></a></div>";
echo "<div class='mmright'><a href='#' class='mm'><span class='mm'>STATISTICS</span></a></div>";
echo "<div class='mmright' style='height:30px'>I want this area filled in with black color with no text inside</div>";

and the necessary piece from .css file:

DIV.mmleft {
font-size: 15px;
line-height: 30px;
float: left;
background-color: #000000;
margin-left: 1px;
}

span.mm {
margin-left: 20px;
margin-right: 20px;
}

DIV.mmright {
font-size: 15px;
line-height: 30px;
float: right;
background-color: #000000;
margin-left: 1px;
}

a.mm {
color: #0000ff;
text-decoration: none;
}

a:hover.mm {
color: #ff0000;
text-decoration: none;
}

also ... is it correct method to use the same name of class for say DIV and span as I've used?

[Marshall]

[div1 | div2 | div3 | div4 .........and I need to fill this gap until here ....... divx]

You can set the background of the navigation division to black. Have divisions 1 through 4 float left and divx float right.

#Nav {
width: 100%
background-color: #000;
}
.NavLeft {
width: 150px; /*example purposes */
float: left;
}
.NavRight {
width: 150px;
float: right;
}

<div id="Nav">
<div class="NavLeft">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;" /> or something to clear after the navigation.

Marshall

[tangor]

Marshall is there... meanwhile, have to query blue text on black... I couldn't read it. Called aging eyes and low contrast. Observation... not adding much to this particular discussion other than I'd force elements needed left to the left, and the other element needed right to the right and anything undefined in between will expand to fill the space.

[esso82]

thanks for reply Marshall, this is what I want to do and that's pretty much what I've done ... but there's that catch ... I want those 1px wide grey deviders in the menu which are achieved using the margin atribute and they actualy uncover the initial menu are DIV which I clearly fergot to mention .... the whole script in my previous post is included in a parent DIV with grey underground ... to make it clear .. I have five major DIVs in my index file which determine those main areas as logo, menu or actual body of the website ...

and one more question as I am not really familiar with using DIVs, what is the 'clear' property good for? Does it affect previous or following DIVs?

[esso82]

Marshall is there... meanwhile, have to query blue text on black... I couldn't read it. Called aging eyes and low contrast. Observation... not adding much to this particular discussion other than I'd force elements needed left to the left, and the other element needed right to the right and anything undefined in between will expand to fill the space.

you made me smile :)) that's how you say 'you idiot' while making it look elegant .. :)) now seriously .... yes .. actualy, the blue on the picture looks much darker then it is in real .. probably need to adjust photoshop export settings ... and secondly .. that will change ... obviously .... it will stay blue but will be lighter color .. but thanks for opinion .. appreciated ;)

[Marshall]

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

[esso82]

thank you marshall ... I just realized how stupid I am :)) ... never thought about using borders .... but while you were busy replying to my message, I figured out another way how to do that and that is:

<div>text</div>
<div class='mmdevider'></div>
<div>text</div>
<div class='mmdevider'></div>
... and so on

DIV.mmdevider {
background-color: #9c9c9c;
float: left;
width: 1px;
min-height: 30px;
}

I've just tested this on opera and chrome ... both agree with me ... but still a question from beginner .. is this correct technique? can I keep it this way or should I rework it once again using your idea?

[Marshall]

It is adding unnecessary html and an extra CSS. It shouldn't be a problem though. The other option is set the text color of the nav <div> to the grey you want the use a pipe | in between the div, though I am not sure that will give you one pixel. Just don't forget to set the color in the nested divisions or they will be grey too.

#Nav {
width: 100%
color: #CCC;
background-color: #000;
}
.NavLeft {
width: 150px; /*example purposes */
float: left;
}
.NavRight {
width: 150px;
float: right;
}

<div id="Nav">
<div class="NavLeft">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;" />

Marshall

[alt131]

Welcome to css esso82,

that's how you say 'you idiot' while making it look elegant ..

We don't call anyone "you idiot" in this forum - directly or indirectly esso, so I apologise if that was the meaning conveyed by tangor's post.

.. is this correct technique

Depends on what you mean by "correct". :) Yes it may work, but there is a school of thought that believes in using semantic mark-up. As penders has already said a list of links is a list, so should be marked up as such. Definitely don't use a table - the references to that were to the css display:table property/value, not an actual table in the HTML mark-up. As Marshall has mentioned, support for that property has improved, but I'd suggest that unless you are definitely only supporting very modern browsers (say in a controlled environment like an intranet) it probably may not be the best choice for you at this stage.

The links penders provided take you to examples of using a list for a menu. Marshall's idea can be applied to a list if you think of the <ul> as the "container div" ("navigation division") and each of <li> as the "link divs" (divisions 1 through 4) which are being floated/left right as required. ... if that makes sense :)

[esso82]

alt131: about the 'idiot' thing .... I ment it as I said .. it made smile ... I didn't feel ofenced in any way ... and I admit I shouldn't explain it this way ... so ... apologies ...

Marshall: ... I have tried to insert pipe deviders as font, but then it is by the size of 30px wider then 1px and I want 1px only ... 2px and more doen't look nice ...

... and to be honest this application is ment to run on company intranet ... it is not to be comercial internet website ... so I'll stick with what I have at the moment

so thanks to you guys for your advices .. I appreciate .. and trust me when I say .. I'll be back :))