Layout problems

[Hebrews12]

Hi everyone. I'm new to this CSS lark and am really struggling to get the layout that I'm after. I'm after a layout like the one attached and have got to this stage - http://www.enrichproject.org.uk/page1.html - but whenever I try to add the rows beneath, it puts everything else out. I'm not sure if I've just done it completely wrong. Can anyone advise me keeping in mind that I'm a novice? Thanks for looking.

[davej]

Well, it is certainly nice to see someone post a link to a work-in-progress page and also a diagram of what they want.

 

What is the problem? If you keep floating your divs left inside a wrapper of a defined width then they will jump to the next row as soon as there is no room on the row above. You just need to add a wrapper div that defines how wide you want the rows to be. The wrapper div could enclose everything or you could have a wrapper div for each row. You can assign a width to the wrapper or a combination of min-width and max-width to achieve the desired result.

[Hebrews12]

Thank you for taking the time to respond. As I understand it, I have a wrapper ("topheader") which is 960px wide and then 3 columns within that which each amount to less than that width. But when I try and add something below that in the code, it moves my end column on to the next row.

 

#topheader {

width:960px;

margin:0 auto;

}

#col-1 {

float:left;

width: 483px;

margin-right:30px;

}

#col-2 {

float:left;

width: 210px;

margin-right:30px;

}

#col-3 {

float:left;

width: 170px;

margin-right:0;

}

Clive

[Steven]

Looks like you're in need of a "clearfix"

 

Read this: http://css-tricks.com/almanac/properties/c/clear/

 

Try giving clear: both; to your text box. So, something like this:

.textBox { clear: both; }