Displaying an element left, and another one right.

I am obviously lacking some fundamental understanding here.

[schroeder8]

I want to put 2 things in a page-wide div: a title on the left and some text on the right (very easy with a 2 column 100% width table) using css. I also want to put a border above and below the whole thing. Here is what I am thinking should work:

<div id='titlediv'>
 <div style='float:left'><h1>The Title</h1></div>
 <div style='float:right'>Some text here</div>
</div>

And the stylesheet:

#titlediv {
 border-top: 1px dashed #ccc;
 border-bottom: 1px dashed #ccc;
}

However, this doesn't work in a couple of ways:
1. In IE6, the border displays one after the other and the content follows it, rather than being in between the two.
2. In FF, no borders are shown at all.
3. Any content (e.g. <p>) that follows this code starts to the right of the title and fills the space between it and the right aligned text. I would have thought that the outside div would make the whole thing a 'block' and anything following it would display after the outside div.

Obviously there is something I am not comprehending about css - can anyone provide a fix and explain it to me exactly why?

p.s. Very sorry if this question has already been asked and answered - I couldn't find it.

[ronin]

Floats move the content outside the normal flow of the document. If you want to float elements inside a div, I think you have to give the div either position:relative; or position:absolute; - somebody much better than me at CSS will be able to correct me if this isn't quite right.

You rarely need to use both float:left; and float:right; at the same time. Usually one or the other will do the job - once you've floated something left, the other thing will automatically be to the right of it.

One way to create two columns without floats is to use relative and absolute positioning.

For instance you can have something like:

#titlediv {position:relative; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;} 
h1 {position:absolute; top:5px; left:5px; width:30%;}
#titlediv p {position absolute; top:5px; right:5px; margin-left:32%;}

and then have this in the html:

<div id="titlediv"> 
<h1>The Title</h1>
<p>Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here</p>
</div>

[iamlost]

Welcome to WebmasterWorld, schroeder8!

Your titlediv is showing only what appears to be the top dashed border (in FF) because it has no height: you declared none for the div explicitly and by floating the interior divs you effectively removed them from within titlediv by removing them from the normal flow. The browser is therefore displaying an empty div and collapsing the borders on top of each other.

If you declare position: relative; then nothing will change - all divs will think they are out of flow.
If you declare titlediv position: absolute; you will see both borders with the floats being contained within titlediv as desired.

Note that a float declaration requires an explicit width declaration. The only difference in using float: left/right; on the text div will be a slight bias of the text to left or right. With blocky items like pictures this can make a bigger display difference.

When testing in IE6 it helps to note if you are using a valid DocType (without prior xml header) forcing IE into standards compliant mode or if IE is in quirks mode which will frequently make the display look different from compliant browsers.

Try:

CSS:

#titlediv {position: absolute; left: 0; top: 0; width: 100%; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;
}
#h1-div {float: left; width: 40%; text-align: center;}
#text-div {float: left; width: 60%;}
#text-div p {margin: 0; padding: 0.5em;}

HTML:

<div id="titlediv">
<div id="h1-div"><h1>The Title</h1></div>
<div id="text-div"><p>Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here</p></div>
</div>

[jo1ene]

I know they're not really cool, but this is what I use a table for.

[ronin]

Well... it's not really that tables aren't "cool" that's the problem... it's that when used for positioning employing tables is a hack. Like writing

 
<big><big>&nbsp; &nbsp; &nbsp; Main Title</big></big>

instead of:

<h1 style="margin-left:3em;">Main Title</h1>

Also, just a note about iamlost's code...
<h1> is already a block level element, so, perhaps you don't need to place it inside a block level wrapper like this:

<div class="h1-div"><h1>...</h1></div>

Just use this:

<h1>...</h1>

And apply your style instructions so:

 h1 { ... } 

[drbrain]

You can also use absolute positioning:

<div id="navbar">
<div id="top">Sitemap</div>
<div id="crumbs">Page 1 &lt; Page 2 &lt; Current Page</div>
</div>

#navbar { position: relative; top: 0; left: 0; right: 0; height: 1.8em; text-align: right; }

#top { position: absolute; top: .15em; left: 0; z-index: 1; }

#crumbs { position: absolute; top: .15em; right: 0; }