View Full Version : Help With a Div

12-20-2005, 02:11 PM
Hey Guys,

I'm having a problem getting this "top piece" div working correctly. I merely want two div elements within this top piece to align next to each other. The problem I'm having is that the second div is sitting below the first one, which isn't what I want. Here's the CSS:

body {
margin: 0px;
padding: 0px;
background-color: #ffffff;

#top {
width: 754px;
border: 1px solid #000000;
clear: all;

#top_left {
width: 432px;
border: 1px solid #ffcc00;
#top_right {
width: 200px;
text-align: right;
border: 1px solid #ffcc00;

And here's the HTML:

<div id="top">
<div id="top_left"><img src="img/home_headline.gif" alt="" /></div>
<div id="top_right"><p class="header">Visit Updates</p></div>

<div id="reveal_column">


Things I've tried:

- Floating the "top" elements: This screws up the rest of the page, for everything after "div id=top"

- Clearing - I've tried clear:both, clear:all (without fully knowing the capability of "clear". :) No luck.

- I've tried making them inline, span elements. However this throws off the text in "top-right". I need that to align to the right side of the page.

Any suggestions would be much appreciated.


12-20-2005, 02:49 PM
Your initial approach was correct: floating the top_left div left and the top_right div right seems like a usable solution. However, since the top div doesn't contain any non-floated content, it will collapse, throwing off anything that follows it.

There are three solutions:

Give the top div a fixed hight (this may not be practical);
Float the top div itself, and clear any content that follows it;
Include non-floated, clearing content (like a p with a nbsp in it) after the two floated divs (use clear: both); to make this as inconspicuous as possible, you can reduce it to 1 px by specifying "height: 1px; line-height: 1px"

12-20-2005, 02:54 PM
#1 worked. Great!

I didn't think to set a fixed height on the containing top div. That works fine in this scenario.

Thanks again!