Force Div to Next Line

CSS: Force float to do a whole new line

Well, if you really need to use float declarations, you have two options:

Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS

Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.

how to make div to new line

div{  /*display:inline-block;*/  /* deleted */  /*float:left;*/            /* deleted */  color:#fff;  font-size:20px;}
.some {    margin-bottom: 10px;   /* new */}
.one{  float: left;  /* new  */  width:100px;  height:100px;  background:red;}
.three{  width:100px;  height:100px;}
.four{  width:150px;  height:50px;background:darkblue;}.five{  width:150px;  height:50px;background:blue;}

<div class="some">    <div class="one">image</div>
    <div class="three">        <div class="four">name</div>        <div class="five">desc</div>    </div></div>

<div class="some">    <div class="one">image</div>
    <div class="three">        <div class="four">name</div>        <div class="five">desc</div>    </div></div>

<div class="some">    <div class="one">image</div>
    <div class="three">        <div class="four">name</div>        <div class="five">desc</div>    </div></div>

Make div to continue to new line not jumping to new line

By default, a div element has a display attribute value of block which will place it on its own line in the document. If you want them to be side-by-side, you can set the value to inline or inline-block (if you want to set a width/height).

div {
  font-size: 4rem;
  display: inline;
}

#second {
  text-decoration: underline;
}

<div>This text is in the first div element and</div>
<div id="second">continues into the second div element and</div>
<div>finishes in the third div element.</div>

Forcing inline div to go to the next line after certain amount of divs have been rendered

There is no easy solution for this but you could hack it with display: inline on elements and content: "\00000a", white-space: pre.

.little-square {  background: black;  margin: 10px;  display: inline;  padding: 15px 25px;  line-height: 65px;}.little-square:nth-child(4n):after {  content: "\00000a";  white-space: pre;}

<div class="container">  <div class="little-square"></div>  <div class="little-square"></div>  <div class="little-square"></div>  <div class="little-square"></div>  <div class="little-square"></div>  <div class="little-square"></div></div>

Adding or Forcing Line Break after div

The float:left is causing the problem. Apply clear:both; to <hr> will do:

hr{ clear:both; }

DEMO

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.

Dropping inline divs to a new line

Wrap the divs in a container element, like....

<div class="wrapper">
     <div id="elem1"></div>
     <div id="elem2"></div>
     <div id="elem3"></div>
</div>

Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.

How to force a line break in a long word in a DIV?

~~Use word-wrap:break-word;~~

~~It even works in IE6, which is a pleasant surprise.~~

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.