CODEWITHSUNDEEP
css
blez
blez

Reputation: 5037

How to create such layout in CSS?

Here's what I tried: http://jsfiddle.net/tJxCD/6/

I want to create a layout like this: enter image description here

But I don't know how to make the third rectangle on bottom of the second.

Upvotes: 0

Views: 104

Answers (2)

Zoltan Toth
Zoltan Toth

Reputation: 47667

http://jsfiddle.net/kHT8z/1/

.wrapper {
    overflow: hidden;
    width: 500px
}

.top {
    border: 3px solid #000;
    width: 300px;
    height: 170px;
    margin: 5px;
    float: left;
 }

.right {
    border: 3px solid #000;
    width: 150px;
    height: 75px;
    margin: 5px;
    float: left;
 }

.bottom_small {
    border: 3px solid #000;
    float: left;
    margin: 5px;
    height: 50px;
    width: 90px;
}

.bottom_big {
    border: 3px solid #000;
    float: left;
    margin: 5px;
    height: 75px;
    width: 150px;
}


<div class="wrapper">
    <div class="top"></div>
    <div class="right"></div>
    <div class="right"></div>
</div>

<div class="bottom_big"></div>
<div class="bottom_small"></div>

Upvotes: 2

Andy Rose
Andy Rose

Reputation: 16974

Hard to tell exactly what your after but your divs can share several css properties and you can use classes to specify size only. This JSFiddle represents your diagram.
Of course this layout is dependent on the width of the containing element, in this case the body, so you need to be aware of that.

HTML layout:

<html><body>
<div class="large"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="small"></div>
</body></html>

CSS:

div {
  border: 1px solid gray;
  margin: 5px 5px 0 0;
  float: left;
}

div.large{
  width: 300px;
  height: 175px;
 }

 div.medium {
  width: 150px;
  height: 84px;
 }
 div.small{
  width: 100px;
  height: 44px;
}

Upvotes: 1

Related Questions