Move div to new line

Lucas Published at Dev

Lucas

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;
}

god_is_love

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-7

Comments

0 comments

From Dev

Related Related

Article