div corner layout
ok, I'm still learning css..
but this is driving me nuts.
I want to arrange 4 div's (1,2,3 and 4) to sit in each corner within a containing div of 800 px square. I've got 3 corners looking good but the fourth div (in bottom right cornrt) is not playing ball.
can you help that last div sit snug in the right hand bottom corner?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.mian {
margin: auto;
height: 800px;
width: 800px;
}
.1 {
background-color: #666666;
height: 250px;
width: 250px;
float: left;
}
.2 {
background-color: #00FFCC;
float: right;
height: 250px;
width: 250px;
}
.3 {
background-color: #990000;
height: 250px;
width: 250px;
margin-bottom: 0px;
margin-top: 550px;
margin-left: 0px;
margin-right: 0px;
}
.4 {
background-color: #33CCCC;
height: 250px;
width: 250px;
float: right;
margin-top: 550px;
margin-right: 0px;
margin-left: 0px;
}
-->
</style>
</head>
<body>
<div class="mian" id="main">
<div class="1" id="1">Content for class "1" id "1" Goes Here</div>
<div class="2" id="2">Content for class "2" id "2" Goes Here</div>
<div class="3" id="3">Content for class "3" id "3" Goes Here</div>
<div class="4" id="4">Content for class "4" id "4" Goes Here</div>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks