CSS: Floating a nested div.

Code junkies hangout here

Moderators: ChrisThornett, LXF moderators

CSS: Floating a nested div.

Postby Spitfire » Tue Aug 08, 2006 8:14 pm

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
Spitfire
 
Posts: 3
Joined: Tue Aug 08, 2006 8:09 pm
Location: High Wycombe

RE: CSS: Floating a nested div.

Postby Gordon » Tue Aug 08, 2006 9:44 pm

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
User avatar
Gordon
LXF regular
 
Posts: 209
Joined: Thu Apr 07, 2005 5:01 pm
Location: Bradford, West Yorkshire

Postby Spitfire » Tue Aug 08, 2006 10:21 pm

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
Spitfire
 
Posts: 3
Joined: Tue Aug 08, 2006 8:09 pm
Location: High Wycombe

Postby emyr42 » Wed Aug 09, 2006 3:04 pm

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
User avatar
emyr42
LXF regular
 
Posts: 147
Joined: Tue Nov 22, 2005 9:16 am
Location: Cardiff, UK

Postby ollie » Wed Aug 16, 2006 9:31 am

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.
User avatar
ollie
Moderator
 
Posts: 2749
Joined: Mon Jul 25, 2005 11:26 am
Location: Bathurst NSW Australia

Postby Spitfire » Wed Aug 16, 2006 7:02 pm

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
Spitfire
 
Posts: 3
Joined: Tue Aug 08, 2006 8:09 pm
Location: High Wycombe


Return to Programming

Who is online

Users browsing this forum: No registered users and 5 guests