Div behind another div problem.

Question

Here is a (big) example of the massive problem I am having, when this page is live at euroworker.no/order, it is dynamically generated, I have supplied a static version for people to mess with. All I need is where it says "Endre Valg" to push the div wrapper under it down.. Sounds easy huh? I have tried many many things, I hope that some discussion and even trial and error can help us here.

Sorry for the huge amount of code and stuff but this has taken me all day and I am out of ideas.

Thanks.

Edit: Decided to go back to tables, thanks all for the suggestions. :)

Answer 1

Sorry I'm not going to give you the answer here, I have had a look and can not find it quickly. I will however give you two methods to get this problem sorted.

The first is this is a table of data what is the best html element for displaying tabular data? The table. I know there is a great, justified back-lash about using tables to format the page but when you have a table of data they are the correct element to use. This will simplifiy your markup and your css.

If you choose not to use a table what you will need to do is remove all the css effecting this page. look at the page check there are no over laps. Add back a few of the css classes and check there are no overlaps ... repeat. Start very simple and build up until the error occurs again, now you know what peice of css caused this.

If I was to have a guess it would be that the error was in elements marked either float or position:relative/absolute, but one of the above methods will get you there in an hour.

Sorry for not directly addressing the problem.

Answer 2

I support the idea of the previous answer to stick to the standards and use a standard html table for data and html blocks <div> for layout.

If your want to keep your box-structure, you should have a look at the css display-property instead of using position:absolute for positioning your table cells. This resource http://www.quirksmode.org/css/display.html#table might be interesting for you.

Answer 3

I'd echo the comments about using a table. It's never wrong to use a table when you're displaying tabular data, which is what you're doing here.

Either way, adding clear: left onto the class declaration for the anchor tag will help solve your problem:

#cart2Produkt a {
    color:#0a5692;
    text-decoration:none;
    line-height:15px;
    clear: left; 
}

But the way this page is constructed is just a nightmare waiting to happen. Use a table.