27

I'm pretty new to CSS and it is still magic for me.
I want to have my div movie_item_content_plot on a new line. Currently I use <br> in HTML and this works fine. When I replace the <br> with clear: both; the div appears between movie_item_poster and movie_item_toolbar - but this is not what I want to have. It should be in movie_item_content but under movie_item_year and movie_item_plot.

Here is a fiddle to play around with.

wanted layout (<br>)

wanted layout

wrong layout (clear: both;)

wrong layout

HTML

<div id="movie_item">
    <div class="movie_item_poster">
        <img src="..." style="max-width: 100%; max-height: 100%;">
    </div>

     <div id="movie_item_content">
        <div class="movie_item_content_title">title</div>
        <div class="movie_item_content_year">year</div>
        <br> <!-- I want to replace this br -->
        <div class="movie_item_content_plot">plot</div>
    </div>

    <div class="movie_item_toolbar">
        Lorem Ipsum...
    </div>
</div>

CSS

#movie_item {
    display: block;
    margin-top: 10px;
    height: 175px;
}

.movie_item_poster {
    float: left;
    height: 150px;
    width: 100px;
}

.movie_item_content {
    float: right;
}

.movie_item_content_title {
    float: left;
}

.movie_item_content_year {
    float: right;
}

.movie_item_content_plot {

}

.movie_item_toolbar {
    clear: both;
    vertical-align: bottom;
    width: 100%;
    height: 25px;
}
2
  • Note: breaks "<br>" are not made to structure you border-box model. They are only made to break texts in CDATA. Get along with "display:block" with CSS to create a break in your layout.
    – lin
    Commented Mar 18, 2014 at 20:46
  • @Lucas Replace float by display: block. Put just float:right in the year, everything will be fine.
    – michel
    Commented Mar 18, 2014 at 20:46

3 Answers 3

16

What about something like this.

<div id="movie_item">
    <div class="movie_item_poster">
        <img src="..." style="max-width: 100%; max-height: 100%;">
    </div>

     <div id="movie_item_content">
        <div class="movie_item_content_year">year</div>
        <div class="movie_item_content_title">title</div>
        <div class="movie_item_content_plot">plot</div>
    </div>

    <div class="movie_item_toolbar">
        Lorem Ipsum...
    </div>
</div>

You don't have to float both movie_item_poster AND movie_item_content. Just float one of them...

#movie_item {
    position: relative;
    margin-top: 10px;
    height: 175px;
}

.movie_item_poster {
    float: left;
    height: 150px;
    width: 100px;
}

.movie_item_content {
    position: relative;
}

.movie_item_content_title {
}

.movie_item_content_year {
    float: right;
}

.movie_item_content_plot {
}

.movie_item_toolbar {
    clear: both;
    vertical-align: bottom;
    width: 100%;
    height: 25px;
}

Here it is as a JSFiddle.

2
  • your fiddle shows the same result as I mentioned as wrong above? See the pictures ;)
    – Lucas
    Commented Mar 18, 2014 at 21:11
  • Dohhh... didn't notice the word "plot" there in the middle. I just removed a float from movie_item_content_title and moved movie_item_content_year up one line in the HTML and that should work better for you. I also updated the JSFiddle. Commented Mar 19, 2014 at 2:10
4

I've found that you can move div elements to the next line simply by setting the property Display: block;

On each div.

2

Try this

#movie_item {
        display: block;
        margin-top: 10px;
        height: 175px;
    }
    
    .movie_item_poster {
        float: left;
        height: 150px;
        width: 100px;
        background: red;
    }
    
    #movie_item_content {
        float: left;
        background: gold;
    }
    
    .movie_item_content_title {
        display: block;
    }
    
    .movie_item_content_year {
        float: right;
    }
    
    .movie_item_content_plot {
        display: block;
    
    }
    
    .movie_item_toolbar {
        clear: both;
        vertical-align: bottom;
        width: 100%;
        height: 25px;
    }
    <div id="movie_item">
        <div class="movie_item_poster">
            <img src="..." style="max-width: 100%; max-height: 100%;">
        </div>
    
         <div id="movie_item_content">
                <div class="movie_item_content_year">(1890-)</div>
            <div class="movie_item_content_title">title my film is a long word</div>
            <div class="movie_item_content_plot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, ratione, aliquam, earum, quibusdam libero rerum iusto exercitationem reiciendis illo corporis nulla ducimus suscipit nisi dolore explicabo. Accusantium porro reprehenderit ad!</div>
        </div>
    
        <div class="movie_item_toolbar">
            Lorem Ipsum...
        </div>
    </div>

1
  • That'll make the whole block go to a new line.
    – bjb568
    Commented Mar 18, 2014 at 21:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.