CSS layout problem!

[folz83]

Hello,

I have used 960gs to layout a webpage. I want the content to appear in a horizontal manner & I have achieved that with the first two layers on the page using the appropriate grids (grid_6 & grid_4 respectively). However, for the other layer using grid_3 , the header with Branded Content To Include is out of place. What could the problem be ? Please help.
Link is ic.oneclick-digital.com

[Paulie_D]

I guess you haven’t cleared the float somewhere.

Also, there is no need to give the h2 a class of grid-12…it will be 100% wide automatically.

[folz83]

@Paulie_D Thanks for the tip on h2.

As for clearing float, I have looked through my code again. Everything seems normal. It is odd that it would work for all the other grids but that other header (Branded Content to Include) sticks out like a sore thumb. Still need help!

[Paulie_D]

My understanding is the each container can only hold grids totalling 12 (in your case) so unless you clear the float after the number reaches 12 (by way of the .clear class) this will happen.

As I said, it been a while since I used 960gs (there are better and more responsive) but I tended to create a container_12 for each ‘row’ of grids totalling 12.

You do not have to do this (apparently) but if, after the number 12 is reached you add a clear class to the next div (in your case the first grid-3) the problem solves itself.

Creating a row that will never exceed 12 is the easiest way.

I’m not sure what you reference to a ‘header’ is.

[folz83]

Hello Paulie_D,

If I had a million bucks, I would give you a huge chunk of it right now. Sadly , I dont. All I have is a deep sense of gratitude. Thank you so much. Clearing the float solved the problem. Thanks ! Thanks! Thanks a lot for taking time to help this newbie !

[Author]

Posts