Geek Answers Handbook

Move div to new line

I am new to CSS and still have some magic for me.
I want my movie_item_content_plot div in a new line. I am currently using <br> in HTML, and this works great. When I replace <br> with clear: both; , a 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 violin to play with.

required 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; }
+6
source share
2 answers

Something like that.

 <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 do not need to pop up both movie_item_poster and movie_item_content. Just swim 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 like a JSFiddle .

+5
source

try it

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

In 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_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 am changing the position of the div year.

0
source

More articles:


All Articles