CODEWITHSUNDEEP
csshtml
yaru
yaru

Reputation: 1310

How to layout divs as specified?

Please help me to create layout as specified on image below.

I have tried to achieve it but my knowledge of CSS is not enough and layout has to be done ASAP... I tried to play with CSS attributes like float, overflow, position:absolute, relative, etc but results were disappointing - divs overflow with each other, don't position properly and so on. Each div contains a lot of content - other divs, images, lists, etc.

Desired result:

http://i41.tinypic.com/2z6clex.png

Upvotes: 0

Views: 55

Answers (2)

iamkarsoft
iamkarsoft

Reputation: 21

  <body>
  <div class="box">
    <div class="red">

    </div>

  <div class="green">

    </div>


  </div>
  <!-- -->
 <div class="box">
    <div class="blue">

    </div>

 </div>
 <!-- -->
 <div class="box">
   <div class="yellow">

    </div>
  </div>
 <!-- -->
 <div class="box">
    <div class="black">

    </div>
  </div>
  </body>




 .box{ 
 width:400px;
 clear:both;
 height:400px;
 margin-top:10px;
  }

.yellow{
background:yellow;
width:40%;
height:100%;
float:right;  
}

.black{
background:black;
 width:80%;
height:20%;
float:right;  
}

.blue{
background:blue;
width:20%;
height:100%;
float:right;
}

 .red{
background:red;
width:30%;
height:60%;
float:left;
}

.green{
background:green;
width:60%;
height:90%;
float:left;
margin-left:10%;
 }

Upvotes: 0

Andrea Riva
Andrea Riva

Reputation: 166

<div style="float: left; width: 100px; height: 200px; background: #f00;">content...</div>
<div style="float: right; width: 200px; height: 300px; background: #0f0;">content...</div>

<div style="clear: both;"></div>

<div style="float: right; width: 100px; height: 300px; background: #00f;">content...</div>

<div style="clear: both;"></div>

<div style="float: right; width: 500px; height: 200px; background: #ff0;">content...</div>

<div style="clear: both;"></div>

<div style="width: 100%; height: 100px; background: #000;">content...</div>

Upvotes: 3

Related Questions