Search code examples
htmlcssvertical-alignmentalignment

CSS picture and paragraph align with float , ugly layout when multiple entry added

I'm trying to place a picture on left , and explanation paragraph on the right side , it might be long to exceed the height of that image.

So i put out a minimal test case:

<html>
    <head>
        <title> This is an demo </title>
        <style>
            img { float: left; }
        </style>
    </head>
    <body>
        <div id="content">
            <img src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph .. 
            </p>
        </div>
        <div id="content">
            <img src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph .. 
            </p>
        </div>
    </body>
</html>

And the result (Chromium Browser 15) was totally bad:

enter image description here

The second div overlapped the first one.

P.S: i tried to use a HTML table , but that's not what i wanted , it's better fix my mistake here

Thanks !

Solution

  • You can add a clear:both to the content div, that way they won't overlap each other.

    #content {
clear:both;
}

    Also, if you are using #content multiple times you should use a class instead of an id. On classes and ids: http://www.tizag.com/cssT/cssid.php