firefox doesn't center horizontal list menu and problem with 2 columns

[wumarcus]

Okay, I am currently having two problems converting my layout to CSS.
Firstly, here is the CSS and HTML I am using:

CSS:

#headbot {
 width: 100%;
 height: 39px;
 text-align: center;
}
#bot_left {
 height: 39px;
 float: left;
}
#menubar {
 height: 39px;
 width: 640px;
}
#bot_right {
 height: 39px;
}
/* Header list properties */
#headmain ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#headmain li {
 display: block;
 float: left;
 margin: 0 10px 0 10px;
 padding: 0;
}

/* Main Section Properties */
#container {
 width: 100%;
 margin: 10px 0 10px 0;
 padding: 0;
 border: none;
}
#content {
 width: 70%;
 float: left;
 margin: 0;
 padding: 8px;
 border: none;
}
#right_block {
 width: 20%;
 float: left;
 text-align: center;
}
#block_inside {
 width: 200px;
 border-left: 2px dotted #CCC;
 padding: 8px;
 text-align: center;
}

and the HTML:
pertinent code for header...

<div id='headbot'>
 <div id='bot_left'></div>
 <div id='menubar'>
 <ul>
 <li><img src='images/services.jpg' width='102' 
 height='39' border='0' alt='Services' /></li>
 <li><img src='images/portfolio.jpg' width='103' 
 height='39' border='0' alt='Portfolio' /></li>
 <li><img src='images/inquiry.jpg' width='103' 
 height='39' border='0' alt='Inquiry' /></li>
 <li><img src='images/forum.jpg' width='103' 
 height='39' border='0' alt='Forum' /></li>
 <li><img src='images/contact.jpg' width='103' 
 height='39' border='0' alt='Contact' /></li>
 </ul>
 </div>
 <div id='bot_right'></div>
</div>
</div>

pertinent code for content area

<div id='container'>
 <div id='content'>
 <?php include('http://www.example.us/main.php')?>
 </div>
 <div id='right_block'>
 <div id='block_inside'>This is right block</div>
 </div>
</div>

Okay, so the first problem is firefox specific (maybe opera too, I haven't been able to test on opera yet) The menu at the top is supposed to be centered on the top bar and just continue to shift, but stay centered, as the screen gets smaller. This works fine in IE, but in firefox the links aren't centered to begin with, they just stay on the left.

Any ideas on this one?

The second question I have is pretty basic, I am just struggling a bit... If you look at the content section of the code and the css I have two columns that are floated and widths are percents and then inside the right column i have another div that is fixed. What I am trying to do is have a right column that is fixed in width and a left column that takes up the rest of the available space but is flexible for smaller screens. I don't want the right column shifting under the left one if the screen gets smaller, i just want the left column to shrink.

I thought this would be best accomplished with an absolutely positioned right column and a left column that is floated, but i tried that and when I put any content in the left column (like the php include i use that contains stuff which is in a div with 100% width) then it just steps on the right column.

Thanks for any help you can provide,
Marcus

[edited by: jatar_k at 11:12 pm (utc) on July 22, 2005]
[edit reason] examplified url [/edit]

[jo1ene]

I think you want to set your li to display:inline
Do you have the correct doctype declared? Does your code validate?

[bedlam]

This is a long one ;)

Okay, so the first problem is firefox specific (maybe opera too, I haven't been able to test on opera yet) The menu at the top is supposed to be centered on the top bar and just continue to shift, but stay centered, as the screen gets smaller.

What you'll find is that this behaviour only affects browsers that properly interpret the w3c specs. 'text-align [w3.org]' affects the behaviour of inline elements [w3.org] in a container:

A block of text is a stack of line boxes. In all cases except for 'justify', this property specifies how the inline boxes within each line box align with respect to the line box's left and right sides

You're apparently using 'text-align:center;' to try to center your navigation menu, but given the markup, and the other css in your posted code, this can't possibly work (except in IE, and it's a bug that it works there...) Without knowing exactly what you're trying to achieve, it's difficult to give you a specific recommendation, but what you will probably need to do is either a) apply equal left and right margins to the <ul> inside <div id='menubar'>.

The slightly tricky factor in using margins to center your menu <ul> is that you will have to apply a width to it in order for it to work as I think you intend it to. This is because a block element such as an unordered list will, by default, occupy the full width of its container, whereas what I guess you'd prefer is for your ul to 'shrinkwrap' your list items.

This probably means that you'll have to reconsider your approach. The following is untested, but I believe it's similar to what I've used in similar circumstances:

HTML:

<div>
<ul id="navigation">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
</ul>
</div>

CSS:

#navigation {
/* This will center any inline elements that happen to occur in the ul: */
text-align:center;
}

#navigation li {
/* Then make the list items inline elements: */
display:inline;
}

#navigation li a {
/* But make the links in the list items block level items! */
display:block;
}

Again, I haven't tested this just now, but I believe the general technique will work for menus of unknown width.

In answer to your second question, the secret is in the margins. A popular method lately has been the use of negative margins [google.com].

-B

[edited by: SuzyUK at 9:52 am (utc) on July 24, 2005]
[edit reason] fixed link [/edit]

[createErrorMsg]

a right column that is fixed in width and a left column that takes up the rest of the available space but is flexible for smaller screens

The best appraoch for this is to float only ONE of the divs (the fixed width one) and leave the other as a normal, in-flow element...

html:
<div id="container">
<div id="right"></div>
</div id="left"></div>
</div>

css:
#container{
float:left;
width:100%;
}
#right{
float:right;
width:200px;
}
#left{
margin-right:200px;
}

The #container floats so that it encloses it's floated child elements. This ensures that any backgrounds or borders you place on the #container element will wrap around the floated right column in the event that it is the longer of the two. The #right column, which here is first in the source code, floats to the right and has your fixed width of 200px. The left column has a right margin equal to the width of the right column (this prevents it's text from wrapping underneath once the float is cleared) but NO WIDTH. That last bit is critical. If you give #left any sort of dimension (width or height) it will kick IE into it's proprietary float model and muck things all up.

If you need or want to have the left content column first in the source code, things are a little trickier. To do that, you have to do some negative margin trickery...

html:
<div id="container">
<div id="wrap_box">
<div id="left"></div>
</div>
</div id="right"></div>
</div>

css:
#container{
float:left;
width:100%;
}
#wrap_box{
float:left;
width:100%;
margin-right:-200px;
}
#left{
margin-right:200px;
}
#right{
float:right;
width:200px;
}

Notice that the code is a little different now. The left column now comes before the right column in the source, and is wrapped in an extra container div I've called "wrap_box". #Wrap_box floats left, is 100% wide, and has a negative right margin. This clears a space for the right floated right column to move up into. Note that wrap_box MUST be floated in order for this to work, as margins work differently with floated and non-floated elements. The left div inside of wrap_box must have a positive right margin, in order to move it's text away from the right floated column. Last, float the right column to the right and give it an explicit width. The result is the same layout as above, only now the main content (#left div) comes first in the source code.

For more, run a search for "negative margins Ryan Brill." His is the seminal article on this technique.

cEM

[wumarcus]

thanks everyone, i had this all fixed before returning to this thread, but then one thing screwed up and so i did end up using some of your advice.

first, for the menu bar i was just an idiot and forgot to use margin-left:auto and margin-right:auto to center the menubar div... that fixed that...

for the columns, i first tried absolute positioning with a big right margin for the left column to not overlap and that worked in FF and opera but not IE, so I took the advice of floating the right column right and not floating the other (i tried this same thing before but left the left column floating and that messed it up) and that worked it all out.

thanks!