Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Three Divs In One Row And Fourth In The Second Row

Post a Comment
I need to have three divs in a row and fourth div displayed below these divs. See the layout http://i.imgur.com/k3TFW6b.jpg (just illustration) I've tried to use display block for

Solution 1:

Instead of using display:inline on a div, a simpler solution might be using the float property in CSS. With the help of adding a width and height we can make complex layouts:

html, body{
  margin:0; padding:0;
  height:100%;
}
body{
  background:#48c;
}

#container{
  height:50%;
  width:50%;
  margin:auto;
}

.rect{ float:left; height:100%; }
#box1{ width:50%; background:#999; }
#box2{ width:25%; background:#666; }
#box3{ width:25%; background:#333; }
#box4{ width:100%; background:#000; }
<body>
  <div id="container">
    <div class="rect" id="box1"></div>
    <div class="rect" id="box2"></div>
    <div class="rect" id="box3"></div>
    <div class="rect" id="box4"></div>
  </div>
</body>

Solution 2:

Simple and effective Solution would be CSS Table layout

HTML

.Row 
{
    display: table;
     width: 100%;
     table-layout: fixed;
     border-spacing: 7px; 
} 

.Column 
{
     display: table-cell;
     background-color: gray; 
}
<div class="Row">
     <div class="Column">First</div>
     <div class="Column">Second</div>
     <div class="Column">Third</div> 
</div> 
<div class="Row">
     <div class="Column">Fourth</div>
     <div class="Column">Fifth</div>
     <div class="Column">Sixth</div> 
</div>

Post a Comment for "Three Divs In One Row And Fourth In The Second Row"