Search code examples
htmlcsscss-floatfont-family

Position of text changes according to the length of it

So, while I tried positioning some text on the right of an image, I got this very weird error:

Positioning worked when I used as an article description a few characters.

So, that's the HTML code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" type="image/png" href="somelogo.png">
        <link rel="stylesheet" type="text/css" href="main.css" />
        <title>Title - Home</title>
    </head>
    <body>
        <section id="mainContent">

            <div class="article_summary">
                <span class="article_date_author">2013-11-08 20:31:32 by MY NAME</span>
                <span class="article_title">ARTICLE TITLE HERE</span>
                <div class="article_clear"></div>
                <div class="article_image_container">
                    <img class="article_image" src="http://i.imgur.com/Nl8SwBp.jpg">
                </div>
                <div class="article_descr">
                    <p>
                        Article Summary
                        <a href="somelink">Read more...</a>
                    </p>
                </div>

            </div>
        </section>
    </body>
</html>

main.css:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300);

* {
    font-family: "Ubuntu";
}

.article_summary {
    overflow: hidden;
    background-color: white;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 2px 2px 10px 1px #777;
}

.article_date_author {
    font-size: 0.7em;
    float: right;
    padding: 10px 10px 0 0;
}

.article_clear {
    clear: both;
}

.article_image_container {
    position: relative;
    float: left;
}

.article_image {
    float: left;
    padding-top: 10px;
    width: auto;
    max-height: 300px;
    max-width: 100%;
}

.article_descr {
    position: relative;
    float: left;
}

If I change "Article Summary" to something longer the text will result beneath of the image.

Images:

small summary

large summary

I came to the realization that this has to do with the fact that it can't stand more than 1 line of text on the right of the image. But why is this happening ?

Solution

  • Text takes all the space it needs. If you want it to stay on the right you need to give the descr div a width

    .article_descr {
    position: relative;
    float: left;
    width: 70%;
}