Move div to new line

Question

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  lt br gt  in HTML and this works fine  When I replace the  lt br gt  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   lt br gt      wrong layout  clear  both      HTML   lt div id  movie item  gt       lt div class  movie item poster  gt           lt img src       style  max-width  100   max-height  100    gt       lt  div gt         lt div id  movie item content  gt           lt div class  movie item content title  gt title lt  div gt           lt div class  movie item content year  gt year lt  div gt           lt br gt   lt  -- I want to replace this br -- gt           lt div class  movie item content plot  gt plot lt  div gt       lt  div gt        lt div class  movie item toolbar  gt          Lorem Ipsum         lt  div gt   lt  div gt    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

User · Answer

I ve found that you can move div elements to the next line simply by setting the property Display  block  On each div

User · Answer

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      In Html   lt div id  movie item  gt       lt div class  movie item poster  gt           lt img src       style  max-width  100   max-height  100    gt       lt  div gt         lt div id  movie item content  gt               lt div class  movie item content year  gt  1890-  lt  div gt           lt div class  movie item content title  gt title my film is a long word lt  div gt           lt div class  movie item content plot  gt 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  lt  div gt       lt  div gt        lt div class  movie item toolbar  gt          Lorem Ipsum         lt  div gt   lt  div gt    I change position div year

User · Answer

What about something like this    lt div id  movie item  gt       lt div class  movie item poster  gt           lt img src       style  max-width  100   max-height  100    gt       lt  div gt         lt div id  movie item content  gt           lt div class  movie item content year  gt year lt  div gt           lt div class  movie item content title  gt title lt  div gt           lt div class  movie item content plot  gt plot lt  div gt       lt  div gt        lt div class  movie item toolbar  gt          Lorem Ipsum         lt  div gt   lt  div gt    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

[css] Move div to new line

Examples related to css

Examples related to html