layout help

[fine0023]

I'm redesigning my site a little and was wondering if someone can give me some help. I'll try to make this sound not too complex because I don't think it is. I've attached an image that shows basically what I'm trying to do. There are eight objects there in a page with fixed width (numbered 1-8 because that is the order they are in the code). All eight of them are set to float left. Right now, I am able to get it to look like this, but only because I have set a negative margin-top to paragraph 1 (object 5). If I don't set the negative margin to that object 5, it will not go above the lowest part of objects 2 and 4, leaving a gap between object 1 and object 5. Does anyone know how I can make that come up to sit right below object 1 without setting a negative margin-top?

I know I could probably also accomplish this by making it a two column layout, separating objects 1,5,6 from objects, 2,3,4,7,8. However, this is not ideal either since I have many pages like this and object 1 varies in width from page to page, so it would be difficult to set a size for that first column.

Anyways, I was thinking that there must be a fairly simple way to let those paragraphs sit right below the first object without setting a negative margin, but I'm not sure how.

 

[conor]

Here's an example of that layout without negative margins: http://jsfiddle.net/xb75M/

 

[ronaldroe]

Conor pretty much hit it. You'll want to wrap the paragraph in a div to make it do what you're wanting. Also, try using a CSS reset to get rid of the browser specific margins on the elements.

 

[fine0023]

Thanks! I tried this and I think it is going to work...still have to tinker with it a little. Can you just explain what the purpose of the percentages are? I've never used that before. What is that called? Do I need to include percentages?

 

[ronaldroe]

He just used percentages in the example to make everything fluid. You can replace them with pixels if you want. My suggestion is to use percentages, but then also set min and max widths.

 

[fine0023]

no go

I tried for a few hours but couldn't work it out right. With those percentages in there, the left and right sides left too big of a space gap between each other on most pages, and without the percentages something screwy usually happened like object 2 dropping way down to the wrong part of the page. The paragraphs also usually didn't behave right and would jump up on the page. Besides, I think having to have different percentages or widths for different pages isn't any better than the options I was looking at before.

 

[PixelPusher]

Try using left and right floats. That should allow object 5 to sit under object 1.