Problems with Div Positioning [closed]

Question

This is begining to do my head in now, 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..

HELP :-( http://www.e-fluential.com/offline/

Thanks in advance

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 :D

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.

Answer 2

You have positioned all of the content inside the frontwidth divs absolute. Absolute positioning takes elements out of the flow and all other elements are positioned as if they weren't there.

The best solution would be not to use position: absolute (which is a "last resort" thing to use usually anyway). Instead float the image left and give the title and text a left margin.

Some more advice:

• Many of your images are lacking alt attributes.
• Your source code is a big div soup. "Table-less layout" doesn't mean "only use divs". Don't wrap things in divs for the heck of it. For example it's unnecessary to wrap each image in a div. You can apply the style directly to the images. And use meaningfull elements like h1, h2, etc. for headlines, p for text paragraphs, ul and li for lists (menues), etc. divs are "last resort" thing, too. Only use them if no other HTML element is suitable.

Answer 3

The problem lies in your usage of position: absolute and position: relative.

If you remove those from the css, the no longer stacks on top of each other. try removing those and then adjusting the html

Answer 4

Most of the layout sorts itself out if you remove position: absolute from the homepageimage, titlesmedium and homepagetext classes. The various position: relative elements aren't causing problems because they don't have any references to top, bottom, left or right - essentially, they aren't changing the layout at all.

To make one element sit next to another, you can use float. For instance, float the image left and then float the title left. This will place the title next to the image. Afterwards, be sure to use clear to start flowing elements as normal again. Alternately, get rid of all the extra divs - you're changing the layout by adding lots of extra elements. For wrapping and styling an inline element, consider a <span> tag instead.