Div Layout

[jwalker80]

Hey, Im having a problem positioning some of my divs. See attached gif, What is the best way to position/float divs 4,5 and 6?

[Pheonix]

put 1,4,5, and 6 all into one div.
Or postion your div's absolutely

[herkalees]

using position: is the only way. For instance, 4 can be cleared left to get under one, because then it will get under 2... so using a combo of absolute and relative positioning will be the only way.

[Pheonix]

Originally Posted by herkalees

using position: is the only way. For instance, 4 can be cleared left to get under one, because then it will get under 2... so using a combo of absolute and relative positioning will be the only way.

Lies!

HTML: Select all

<div style="width: 900px;">
<div style="float:left;">
<div style="background-color: red; width: 361px; height: 128px;">background-color: red; width: 361px; height: 128px;</div>
<div style="background-color: yellow; width: 361px; height: 50px;">background-color: yellow; width: 361px; height: 50px;</div>
<div style="background-color: red; width: 181px; height: 163px; float: left;">background-color: red; width: 181px; height: 163px; float: left;</div>
<div style="background-color: green; width: 180px; height: 163px; float: left;">background-color: green; width: 180px; height: 163px; float: left;</div>
</div>
<div style="background-color: blue; width: 187; height: 341px; float: left;">background-color: blue; width: 187; height: 341; float: left;</div>
<div style="background-color: green; width: 352; height: 341px; float: left;">background-color: blue; width: 187; height: 341; float: left;</div>
</div>
<div style="background-color: yellow; width: 900px; clear: both;">background-color: yellow; width: 900px; clear: both;</div>

Done without any postioning at all...

[herkalees]

You win

[Pheonix]

I know ^_^
But the main problem with my code is it ends up being very inflexable very quick, which I don't like. So personaly I would still go with the rel/abs postioning method

[jpmitchell]

Phoenix, what makes your code inflexible?

[Pheonix]

I used something like it for another site I did, when I needed to make a change it quickly fell apart and I found useing absolute postioning much easier to update when I needed to make changes.