how to make div to new line - html

Question

i am beginner to css.
i want to make new div into new line like this,
i try my code like this
<style>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.one{
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;
}
</style>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
but result like this
how to move, the second image to new line..
pls anybody help me. i ll appreciate your answer

Answer 1

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>
separate each block ( here i added a div with class name some )
and as you want one side .one and another side .three so just add float:left; on .one

Answer 2

you can use something like this.
.box-wrapper {
border: 1px solid #000;
width: 100%;
display: block;
position: relative;
}
.box-wrapper:before, .box-wrapper:after{
clear:both;
display:table;
content:"";
}
.box-tall {
width: 50%;
background:#ded9d9;
height: 200px;
float: left;
}
.box-left {
width: 50%;
float: left;
}
.box-1 {
background: #8f8fde;
height: 100px;
}
.box-2 {
background: #d2c47a;
height: 100px;
}
<div class="box-wrapper">
<div class="box-tall">
tall
</div>
<div class="box-left">
<div class="box-1">top</div>
<div class="box-2">bottom</div>
</div>
</div>

Answer 3

You should add clear:both or clear:left to make the div to be displayed in the new line

Answer 4

Try the following code after style tag
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<br>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<br>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
I think this is what you want to do
Hope it helps
Let me know if you require any further help

Answer 5

You need to clear the float on your .one div.
This is the only part that would change:
CSS:
.one{
width:100px;
height:100px;
background:red;
clear:left;
margin-bottom: 15px;
}
You may want to consider altering your markup as well by wrapping each group of divs, but this will get you what you need.
Fiddle: https://jsfiddle.net/k4dw68pg/

Answer 6

Here is the solution.
try this code out :
<style>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.one{
width:100px;
height:100px;
background:red;
clear:both;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
</style>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>

Answer 7

You can use the below. you were not clearing out your floats.
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="clearfix">
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="clearfix">
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.clearfix{
clear:both;
}
.one{
width:100px;
height:100px;
background:red;
margin-bottom:20px;
display:block !important;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}

Answer 8

You can add a div to wrap your group of image/name/desc and then set clear: both; to this div:
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.image-wrapper {
clear: both;
margin-bottom: 20px;
}
.one{
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="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>