Linux Format forums

Spitfire · Posted: Tue Aug 08, 2006 9:14 pm Post subject: CSS: Floating a nested div.

Hi,

I'm having a problem with some css. In order to get the menu to be on the left I set the float to left. However, this then produces a problem when the rest of the page content isn't enough to cover the height of the menu...

It's probably easier to understand by looking: http://www.arrowesecuritysystems.co.uk/new/

When the window is fairly narrow all is well and good, once the window is widened the menu juts out at the bottom.

I would appreciate any insight you may have into this.

Regards,
Matt

Gordon · Posted: Tue Aug 08, 2006 10:44 pm Post subject: RE: CSS: Floating a nested div.

I've not tried floating a nested div in CSS. My method is to use absolute positioning for div's. See http://www.gordonmurgatroyd.pwp.blueyonder.co.uk/ for how I create menus. Also try looking at Eric Meyer's website and look at his CSS/Edge pages. You may be able to find info there.

Hope this helps.
_________________
Violence is the last refuge of the incompetent

Spitfire · Posted: Tue Aug 08, 2006 11:21 pm Post subject:

Hi,

The problem with absolute positioning, as well as this float method, is that the outer div - the one that produces the border effect - does not expand to surround the positioned items.

Thank you for the links though, some interesting ideas.

Regards,
Matt

emyr42 · Posted: Wed Aug 09, 2006 4:04 pm Post subject:

Bah, browser rendering bug...

have you set a minimum height for the container div?
_________________
OpenSUSE 10.2, WinXPHome
AMD Sempron 2400, 512MB DDR333, Twin 60GB Deathstars

ollie · Posted: Wed Aug 16, 2006 10:31 am Post subject:

Just a real quick look - I think you need a container around #sidebar and #content with a "clear: left" on the #content div.

A better place to ask this would be the Web Standards Group mailing list (also free) - you can also search the archives for solutions.

Sorry, I just haven't got time to troubleshoot your CSS - but using the View Source Chart Firefox extension makes this easier.

Spitfire · Posted: Wed Aug 16, 2006 8:02 pm Post subject:

Thanks for your reply. I ran with that and ended up using the #content:after to have a clear: left; which I found on http://www.positioniseverything.net/easyclearing.html, to clear up the xhtml. It now looks as I intended... On firefox, I've yet to try it on IE.

Regards,
Matt