...

View Full Version : What is causing my Div to drop out of sight?



moss2076
12-13-2007, 02:54 PM
Im designing the content part of my webpage, it is to be a flexible layout. I have two divs for the content - 'primaryContent' and 'secondaryContent'.

The secondaryContent div keeps dropping down underneath primaryContent when I make IE or FF etc smaller in width from the right. How can I stop the div from doing this? What do I need to change in my code to keep it where it should be?

http://www.siteoftom.com/content_section.html

Thanks! :)

jlhaslip
12-13-2007, 03:06 PM
http://www.google.ca/search?as_q=three+column+fluid+width+html&hl=en&num=10&btnG=Google+Search&as_epq=&as_oq=&as_eq=&lr=&cr=&as_ft=i&as_filetype=&as_qdr=all&as_occt=any&as_dt=i&as_sitesearch=&as_rights=&safe=images

moss2076
12-13-2007, 03:10 PM
http://www.google.ca/search?as_q=three+column+fluid+width+html&hl=en&num=10&btnG=Google+Search&as_epq=&as_oq=&as_eq=&lr=&cr=&as_ft=i&as_filetype=&as_qdr=all&as_occt=any&as_dt=i&as_sitesearch=&as_rights=&safe=images

Can anyone elaborate more than just a google answer? I really need a clear explanation if possible :)

Donkey
12-13-2007, 03:30 PM
make your navigation column a % rather than fixed. When you make the page smaller the remaining area is smaller than the sum of the two %'s so the 2nd content div is bumped below.

I think 8% 42% 42% will work but you will need to adjust margins and padding as well.

moss2076
12-13-2007, 04:06 PM
I need the sidecontent to remain a fixed width.

Making it 8% causes it to loose its "fixedness".

Excavator
12-13-2007, 06:46 PM
Floats drop when they run out of room. That's what they are supposed to do.
Both your #sidecontent and #primarycontent fit inside the 450px minwidth you've set on #backgroundDiv so take the float off #secondarycontent and use a margin to position it.
Like this:
#secondaryContent {margin: 0 0 0 60%;
border: thin solid #999999;
}


Now, instead of dropping, when #secondarycontent runs out of room it goes behind #primarycontent because your mixing px and % widths.

% layouts are no fun just because of this.

moss2076
12-13-2007, 09:03 PM
Floats drop when they run out of room. That's what they are supposed to do.
Both your #sidecontent and #primarycontent fit inside the 450px minwidth you've set on #backgroundDiv so take the float off #secondarycontent and use a margin to position it.
Like this:
#secondaryContent {margin: 0 0 0 60%;
border: thin solid #999999;
}


Now, instead of dropping, when #secondarycontent runs out of room it goes behind #primarycontent because your mixing px and % widths.

% layouts are no fun just because of this.

I've added another div to wrap around both primaryContent and secondaryContent. I called it "contentDiv" and it seems to be stopping secondaryContent from dropping down. I know its another div, but it seems to be doing the trick. Ive given the new div a red border -

www.siteoftom.com/content_section.html

Also, what is the best alternative to % layout? I want to keep things flexable, should I consider em elastic layout?

Excavator
12-13-2007, 10:12 PM
Wow, that's pretty slick. You've found a very elegant solution there.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum