Fahad Uddin Fahad Uddin - 6 months ago 9
HTML Question

Div's not occupying full width on dekstop

I am trying to make a responsive webpage without the help of any framework. Its pretty basic.

Desktop view:



All of the 3 div's should display next to each other.

Tablet view:



the first two div's display on the first row while the other one displays on the second, occupying the the full width.

Mobile view:



Each div occupies the full width.

Problem:



On the desktop, the the first two div's appear on the same row while the 3rd doesn't.

Below is my code.

HTML



<h1>Our Menu<h1>
<div class="chicken">
chicken
</div>
<div class="beef">
beef
</div>
<div class="sushi">
sushi
</div>


CSS



h1{
text-align:center;
}
.chicken,.beef, .sushi{
padding:0 15px;
margin:0px;
}

@media screen and (min-width: 992px) {
.chicken,.beef,.sushi{
width:33.333333333333333333%;
display:inline-block;
float:left;
}
}

@media screen and (max-width: 767px) {
.chicken,.beef,.sushi{
width:100%;
display:block;
}
/*
.sushi{
width:100%;
}
*/
}
@media screen and(min-width: 768px) and (max-width: 991px) {

.chicken,.beef{
width:50%;
display:inline-block;
}
}


Fiddle:



Here is the fiddle.

Answer

Use box-sizing: border-box so that it will include the padding in the width (also the borders). Otherwise, 33.33333% will be slightly too big to fit on one row.

Comments