Why Are My Divs Overlapping?

The Immortal

Posts: 1341

Posted: 08/18/06 12:44:44pm

HTML : http://www.tax-eh.ca/edgetech/template.htm

If you will see in the source, I have two divs inside the header div.

CSS : http://www.tax-eh.ca/edgetech/blueTheme.css

How can I modify my CSS so the logo goes to the left, and the tab bar goes to the right? I am using Opera 9 if that means anything.

Thanks,
Johnny

lapunx

Big in Japan

Posts: 5958

Report Post

Posted: 08/18/06 01:01:15pm

If I'm not mistaken, you're going to have to add some positioning statements to those divs. As of right now, they're assuming you want them placed at Zero,Zero coordinates, so they're on top of one another.

Johnny

The Immortal

Posts: 1341

Report Post

Posted: 08/18/06 01:09:02pm

I see, so what positioning statements would have the tab bar go to the farthest right, and the logo to the farthest left?

Johnny

The Immortal

Posts: 1341

Report Post

Posted: 08/18/06 01:38:21pm

I think I have solved this, but why the solution works puzzled me.

First off, I had to change some of the HTML from this :

CODE

into :

CODE

and then from there I just had the logo "float : left;" and the tab bar "float : right;". Are DIV tags not allowed to be self-closing?

Also, it seems as if this code will force the tab bar div to go to the next line if the window is made to be too small horizontally, any way to combat this?

mavrck

Code Monkey

Posts: 2109

Report Post

Posted: 08/18/06 05:05:34pm

QUOTE (Johnny @ Aug 18 2006, 04:38 PM)

I think I have solved this, but why the solution works puzzled me.

First off, I had to change some of the HTML from this :

CODE

<div id="header">
<div id="logo" />
<div id="rightTabs" />
</div>

into :

CODE

<div id="header">
<div id="logo"></div>
<div id="rightTabs"></div>
</div>

and then from there I just had the logo "float : left;" and the tab bar "float : right;". Are DIV tags not allowed to be self-closing?

Also, it seems as if this code will force the tab bar div to go to the next line if the window is made to be too small horizontally, any way to combat this?