CSS layout floats problem

HTML & CSS
1

How can I get the red box in the code below to display to the right of the first blue box, without putting the first two boxes in a separate div, if possible?

<div id="box1" style="float: left; margin-right: 10px; height: 200px; width: 200px; background-color: blue;">
</div>

<div id="box2"  style="float: left; margin-right: 10px; clear: left; height: 200px; width: 200px; background-color: blue;">
</div>

<div id="box3"  style="float: left; margin-right: 10px; height: 200px; width: 200px; background-color: red;">
</div>
2

Presumably you aren’t allowed to change the source order of the boxes? Moving the red box to the middle would do the trick, of course.

3

you could absolute position all three of them, thats not that hard

4

the only way would be if you knew the height of the box. using AP or RP… or even margin-top:-200px;

unfortunately negative margin values for top /bottom are still calculated based on the WIDTH and NOT THE HEIGHT of the parent so that nixes using margin-top:-50%

5

Thanks

6

Actually I missed out part of the code, the 3rd div is higher than the others so switching the order would not work immediately unless I apply a margin-top:-140px on #box2.

What is preferable, to apply this negative margin-top on #box2 or apply absolute positioning on #box3 (together with a margin-left) to get it into place? Both give the same result visually.

So options

Updated code:

<div id="box1" style="float: left; margin-right: 10px; height: 200px; width: 200px; background-color: blue;">
</div>

<div id="box3"  style="float: left; margin-right: 10px; height: 350px; width: 200px; background-color: red;">
</div>

<div id="box2"  style="float: left; margin-right: 10px; clear: left; height: 200px; width: 200px; background-color: blue;">
</div>
7

Hi,

Whether you use negative margins or absolute positioning the potential is that you will create an overlap somewhere along the line unless what comes next isn’t controlled explicitly.

In your example you could just remove the red box from the flow and then it will line up as you wanted.

A negative bottom margin equal to its height will do:

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="box1" style="float: left; margin-right: 10px; height: 200px; width: 200px; background-color: blue;"> 1</div>
<div id="box3"  style="float: left;[B]margin-bottom:-350px; [/B]height: 350px; width: 200px; background-color: red;"> 3</div>
<div id="box2"  style="float: left; margin-right: 10px; clear: left; height: 200px; width: 200px; background-color: blue;">2 </div>
</body>
</html>

It all depends on the real dynamics of the site and why you are tying yourself to the structure you have given above. You could just absolutely place each element but of course you lose the flow of the document and you don’t get an automatic effect.

8

And if I wanted to keep the order of the boxes, box 1 then box2 then box3, as it makes more sense like that in the HTML?

9

As already mentioned you could use negative margins but it wouldnt be an automatic method.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="box1" style="float: left; height: 200px; width: 200px; background-color: blue;"> 1</div>
<div id="box2" style="float: left; clear:left;margin-right: 10px;  height: 200px; width: 200px; background-color: blue;">2 </div>
<div id="box3" style="float: left; margin-top:-200px;height: 350px; width: 200px; background-color: red;"> 3</div>
</body>
</html>