Как создать плавающую сетку с помощью HTML и CSS?

Question

Как создать макет, как на картинке ниже:

Возможно ли это только с атрибутом float, где у нас есть четыре divs? У меня примерно следующий код, а 3 - на 2 (браузер IE8 +).

#one #three { 
    float: left; 
} 

#two, #four { 
    float: right; 
} 

<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 
<div id="four"></div> 

Примечание: высота (1) + высота (3) = высота (2)

Answer 1

Смотрите, если эта структура кода отвечает вашим потребностям ... jsFiddle Demo here

HTML

<div class="col_1"> 
    <div id="one">1</div> 
    <div id="three">3</div> 
</div> 
<div class="col_2"> 
    <div id="two">2</div> 
    <div id="four">4</div> 
</div> 

CSS

.col_1{ 
    width:100px; 
    height:300px; 
    margin:1px; 
    float:left; 
} 

.col_2{ 
    width:100px; 
    height:300px; 
    margin:1px; 
    float:left; 
} 

#one{ 
    width:100px; 
    height:150px; 
    background:yellow; 
} 

#two{ 
    width:100px; 
    height:200px; 
    background:blue; 
} 

#three{ 
    width:100px; 
    height:50px; 
    background:green; 
} 

#four{ 
    width:100px; 
    height:100px; 
    background:purple; 
} 

Answer 2

Пожалуйста, см этот jsfiddle http://jsfiddle.net/pvashishat/49chp8ny/

Использовать HTML

<div id="xxx"> <div class="left_wrap"> <div class="one"></div> <div class="three"></div> </div> <div class="right_wrap"> <div class="two"></div> <div class="four"></div> </div> </div>

CSS

.left_wrap { 
    width: 100px; 
    float: left; 
} 

.right_wrap { 
    width: 300px; 
    float: left; 
} 

.one, .three { 
    border: 1px solid #000; 
    height: 40px; 
} 

.two, .four { 
    border: 1px solid #000; 
    height: 80px; 
} 

#xxx { 
    display:inline-block; 
}