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>
)
wrong layout (clear: both;
)
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;
}
display: block
. Put justfloat:right
in the year, everything will be fine.