Text is shifted when mixing floated and relatively positioned elements

Question

I'm looking to solve with CSS a problem that I found far trickier than expected.

Here is the smallest (valid) html fragment I was able to build that expose the issue:

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
            body, div {margin: 0; color: white;}
        </style>
    </head>
    <body>
        <div style="float: left; background-color: #000; width: 200px; height: 200px;"></div>
        <div style="background-color: #333; position: relative; left: 200px; height: 200px;">This is a test !</div>
    </body>
</html>

Does someone know how to prevent the text "This is a test !" To be shifted to the right by the floated element ?

I'm guessing that the floated element is the culprit since when I remove it the text is at the right place. Also changing the order of the divs doesn't yield the expected result.

Thank you !

Answer 1

Replace left: 200px; on your right side div with margin-left: 200px;

Fiddle to prove here

Text is shifted when mixing floated and relatively positioned elements

Question

1 answers

solution1
2 ACCPTED 2011-11-18 15:47:16

Text is shifted when mixing floated and relatively positioned elements

Question

1 answers

solution1 2 ACCPTED 2011-11-18 15:47:16

solution1
2 ACCPTED 2011-11-18 15:47:16