Question

I have a div id css called frontwidth which holds 1 img 1 title and 1 text.

When I do a second or third frontwidth its laying behind themselves instead of going underneath and underneath.

Answer 1

As per my comment:

Wow, that’s.. a unique approach? You
have far too much position: absolute
and position: relative. I just fixed
this in Firebug, but it’s going to
take a few minutes to write an answer,
the amount of rules I had to toggle
and add.

Remove the position rule from each of these elements:

• #mainbody.
• #frontwidth.
• #titlesbig.
• #greyline.
• #homepageimage.
• #titlesmedium.
• #homepagetext.
• Hope I didn’t forget any 😀

With the exception of mainbody, you’re using each of those elements multiple times.

So, change to using a class instead.

For example, in your HTML, change to:

<div class="frontwidth">

And in your CSS, change to:

.frontwidth {

}

Now we can get to laying out those elements as you want them:

• On .homepageimage, add float: left.
• On .frontwidth, add overflow: hidden (to clear the floats).
• On .titlesmedium and .homepagetext add margin-left: 340px.