Floated left column pushes content down

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Mike Kozlowski - 26 Aug 2003 16:04 GMT

I have a div floated left for a navbar, with another div in the normal
flow for content, like so:

#leftnav { float: left; width: 120px; }
#content { margin-left: 170px; margin-right: 10px;}

What I'd like is for my left nav to always stay in a fixed size and
position, and my content to size dynamically to fit the window. This
mostly works for that, except that if the content contains a table
wider than the content div, the table gets pushed down below the
navbar.

Can I prevent this in any way?

(I'm pretty sure I need to float the navbar; I considered absolute
positioning, but I need a left-aligned footer, and the navbar can be
the longest element on a page.)

Signature

Mike Kozlowski
http://www.klio.org/mlk/

Reply to this Message

Brian - 30 Aug 2003 07:47 GMT

> I have a div floated left for a navbar, with another div in
> the normal flow for content, like so:
[quoted text clipped - 3 lines]
>
> What I'd like is for my left nav to always stay in a fixed size

Fixed size? Even if the nav text does not fit in that window?

> and my content to size dynamically to fit the window. This
> mostly works for that, except that if the content contains a table
> wider than the content div, the table gets pushed down below the
> navbar.

Thus, at least here you have achieved flexibility in your design.
Well-done.

> Can I prevent this in any way?

Erm.

> (I'm pretty sure I need to float the navbar;

That seems to follow the kiss principle.

> I considered absolute positioning, but I need a left-aligned
> footer, and the navbar can be the longest element on a page.)

A longstanding problem. Have you looked at the faq? Googled the
group for 2 column layout? If you want more detailed ideas after
consulting these resources, supply a url.

Signature

Brian
follow the directions in my address to email me

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2003

Floated left column pushes content down