Move div to new line

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.


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>

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

On each div.

Tags:

Html

Css

Recent Posts