Rafael Casimiro Rafael Casimiro - 3 months ago 9
CSS Question

html class doesn't stay inline

Why doesn't the div stay in line rather like this:

image

HTML:

<div id="NovosProdutos">
<div id="name">
<h1>Novos produtos</h1>
</div>
<div id="produtos">
<div class="product"><h1>product 1</h1></div>
<div class="product"><h1>product 2</h1></div>
<div class="product"><h1>product 3</h1></div>
</div>
</div>


CSS:

#name {
height: 25px;
font-size: 8px;
font-family: Georgia, serif;
border-style: ridge;
border-color: #38c23d;
border-width: 0px 0px 2.5px;
}

#produtos {
height: 190px;
}

.product {
width:162.5px;
height: 155px;
}


Is there any problem with the class?

Answer

<div> by it's nature goes to the next line and don't stack next to each other

However you can add

float:left;

to your products class.

example: http://codepen.io/nilestanner/pen/OXYPja