Question

So basically, my css and html works like this. I have a top and bottom to the header, as well as a userbox if the user is logged in. My html and css are formed like this:

<div id=header>
 <div id=leftheader>
  <div id=topheader>
    [top header]
  </div>
 <div id=bottomheader>
   [bottom header] 
 </div>
</div>
<div id=rightheader>
   [userbox]
</div>

In a sense, I want the userbox to appear to the right of the top and bottom nav menus when the user is logged in. However, if they’re not logged in, I want to make the headers expand the full width of the screen. I have the PHP which does the back end.

The previous was accomplished easy by doing width: 100px; on the top and bottom divs. However, when I log in, the userbox appears below the two nav menus. One way I thought to get around this is to make the widths not always 100%. Is there any way to do this to still have my userbox on the right?

I tried using max-width, and I take it that it is not defined.

For reference I have the top and bottom headers floated left and the right header floated right. Thanks

Answer 1

This is possible with a <table> layout pretty easily. But since your question involves <div> elements and I presume you want a CSS solution, the following should work:

<style type="text/css">
#header { display: table; width: 100%; }
#leftheader, #rightheader { display: table-cell; }
</style>

<div id="header">
    <div id="leftheader">
        <div id="topheader">[top header]</div>
        <div id="bottomheader">[bottom header]</div>
    </div>
    <div id="rightheader">
        [userbox]
    </div>
</div>

jsFiddle: http://jsfiddle.net/fausak/ju3su/

Here’s a link to quirksmode.org talking about display: table: http://www.quirksmode.org/css/display.html#table

display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TR’s and TD’s.