CODEWITHSUNDEEP
htmlcss
JohnCaine
JohnCaine

Reputation: 1

Three divs in one row and fourth in the second row

I need to have three divs in a row and fourth div displayed below these divs. See the layout https://i.sstatic.net/5vJoP.jpg (just illustration)

I've tried to use display block for the parent div mixed with display inline/inline-block for these three divs and some other settings but it always breaks first row and displays these divs in block. Do you have any idea how to fix this?

Thanks.

Upvotes: 0

Views: 1431

Answers (2)

Lynel Hudson
Lynel Hudson

Reputation: 2405

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>

Upvotes: 3

Raj
Raj

Reputation: 209

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>

Upvotes: -1

Related Questions