can anybody please help .. I've having a bit of difficulty with the use of float

 

I'm trying to get ..

 

left hand side on top of each other 2 divs (each 150 x 150px)

 

Directly to the right of this a larger div, say 300 x 300 in size

 

ending up with a combined overall box, 450 wide x 300 high

 

I've tried diffrent options with float, clear etc but have now given in

 

Any help would be appreciated

 

<html>
<style type="text/css">

body{
background-color:black;
}

#container{
width:760px;
margin:0 auto;
height:1000px;
background-color:white;
}


#image2{
background-color:blue;
width:100px;
height:100px;
color:white;
float:left;
}

#image3{
background-color:maroon;
width:200px;
height:200px;
color:white;
float:left;

}

#image4{
background-color:green;
width:100px;
height:100px;
color:white;
clear:both;

}


.both{
clear:both;}

.left{
clear:left;
}

.right{
clear:right;
}

</style>

<body>
<div id="container">


<div id="image2">
image 2 box
</div>

<div id="image3">
image 3 box
</div>


<div id="image4">
image 4 box
</div>



<div>


</body>
</html>

 

Many thanks !

Instead of floating box 2 & 4 wrap them in a div and float that

 

<div id="container"> 

<div class="lft">
<div id="image2"> 
image 2 box 
</div> 

<div id="image4"> 
image 4 box 
</div> 
</div>

<div id="image3"> 
image 3 box 
</div> 

<div> 

 

#container{ 
width:760px; 
margin:0 auto; 
height:1000px; 
background-color:white; 
}  
#image2{ 
background-color:blue; 
height:100px; 
color:white; 
} 
#image3{ 
background-color:maroon; 
width:200px; 
height:200px; 
color:white; 
float:left;
}  
#image4{ 
background-color:green; 
height:100px; 
color:white; 
} 
.lft{float:left;width:100px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<head>
<title>...</title>
<style>
#container {width: 450px; height: 300px; border: slod 1px; margin: 20px auto;}
#left_col  {width: 150px; height: 300px; float: left;}
.left_item  {width: 150px; height: 150px; float: left;}
.top	{background: #f60;}
.bottom {background: #fc3;}
#right_col {width: 300px; height: 300px; float: left; background: #f00;}
.clrfx {clear: both;}
</style>

</head>
<body>

<div id="container">
<div id="left_col">
	<div class="left_item top">first left</div>
	<div class="left_item bottom">second left</div>
</div>
<div id="right_col">
	right
</div>
<div class=clrfx"></div>
</div>



</body>
</html>

Mteam / Lev

 

Thanks for your replies ... I see now, the two left side boxes are in their own div.

 

I don't know why I didn't think of that

 

Kind regards to both of you