Need serious CSS help - Float containers

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Need serious CSS help - Float containers

Post by JayBird »

Okay, this is doing my head in, i can normally hack around and get they layout to work as i wish, but not this time!!!

Anyway.

Take a look at this layout (simplified).

You see the left and right menu, whenever they expand, i want their container to expand around the floats, which in turn will push the footer down.

Please help before i throw my computer through the window.

Thanks
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Before you throw your computer out the window, try clear:both on the #footer
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

matthijs wrote:Before you throw your computer out the window, try clear:both on the #footer
Been there, done that, got the T-Shirt :lol:
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post by Skittlewidth »

put position: relative in your #container

Edit: oops not working in firefox
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

Nope, no joy :(
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post by Skittlewidth »

is this problem by any chance restricted to IE7?
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

I Think This Would Work
=================
Replace

Code: Select all

<div id="content">
By

Code: Select all

<div id="content" style="width: 425px; height: 447px;">
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I am sure the problem has been solved already by clearing the floats (as I mentioned). Isn't it JayBird? Or else, what problem do you still have?The solution neel_basu gives works, but is very restrictive, as the content cannot expand anymore if you give it a fixed height (only in IE<=6 but that's a bug).
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post by Skittlewidth »

I think the problem is that the pale yellow box doesn't expand down as well in FF, I've tried a few things and I'm stumped, but you're right, the clear:both on the footer does solve that bit.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I think the problem is that the pale yellow box doesn't expand down as well in FF
If you want to clear div outer (which has the yello background color) you'll have to clear that one instead of the container.
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

I tried absolutely every trick in the book to get this layout to work as i wanted but it never did.


I had to take a few steps back, and achieve the layout by coming at it from a completely different angle.

Thanks
Post Reply