Hi.
I'm using <div>'s to create the layout of my website. It's basically divided into different boxes (<div>'s). I want all the different boxes to be separated from each other the exact same space (For example: 4px). I've tried CSS Float, but it doesn't align them correctly. Could someone tell me how to position the <div>'s in an organized way using CSS? (It's a fixed, 800px width page)
I've attached an image showing the layout of my webiste and how the different boxes (<div>'s) should be perfectly aligned with each other. How do I do that?
Thanks.heres an example
<style type="text/css">
<!--
body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
.pagetop {
height: 120px;
width: 800px;
border: 1px solid #000000;
}
.pagetopleft {
background-color: #CCCCCC;
float: left;
height: 120px;
width: 500px;
}
.pagetopright {
background-color: #666666;
float: left;
height: 120px;
width: 300px;
}
.contentlefttop {
background-color: #999999;
float: left;
height: 200px;
width: 200px;
}
.contentleftbottom {
background-color: #999999;
float: left;
height: 200px;
width: 200px;
clear: left;
}
.contentright {
background-color: #FFFFCC;
float: left;
height: 400px;
width: 600px;
}
-->
</style>
</head>
<body>
<div class="pagetop">
<div class="pagetopleft">pagetopleft</div>
<div class="pagetopright">pagetopright</div>
</div>
<div class="contentlefttop">contentlefttop</div>
<div class="contentleftbottom">contentleftbottom</div>
<div class="contentright">contentright</div>
</body>Thanks andyshep, you're a genius! Exactly the way I wanted it.
I just had to remove the "border" property from the "pagetop" class, 'cause it was taking an extra 2 pixels, making the "pagetopright" div fall below the "pagetopleft" one.
Now, how do I separate all those sections by the same length, say 4 pixels, keeping them all ligned up like they are now, without using tables?
Thanks again!you mean that you want a gap of 4px between them?if thats what you wanted:
<style type="text/css">
<!--
body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
.pagetop {
height: 120px;
width: 800px;
}
.pagetopleft {
background-color: #CCCCCC;
float: left;
height: 118px;
width: 498px;
margin-right: 2px;
margin-top: 0px;
margin-bottom: 2px;
margin-left: 0px;
}
.pagetopright {
background-color: #666666;
float: left;
height: 118px;
width: 298px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 2px;
margin-left: 2px;
}
.contentlefttop {
background-color: #999999;
float: left;
height: 200px;
width: 198px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 2px;
}
.contentleftbottom {
background-color: #999999;
float: left;
height: 200px;
width: 198px;
clear: left;
margin-top: 2px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
}
.contentright {
background-color: #FFFFCC;
float: right;
height: 400px;
width: 598px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 2px;
}
-->
</style>
</head>
<body>
<div class="pagetop">
<div class="pagetopleft">pagetopleft</div>
<div class="pagetopright">pagetopright</div>
</div>
<div class="contentright">contentright</div>
<div class="contentlefttop">contentlefttop</div>
<div class="contentleftbottom">contentleftbottom</div>
</body>
Also to fix the orig layout in firefox ( tut tut i didnt test it in ff ).
i added float right to contentright and shifted the div in the code.Thanks again! Appreciated.
I also Download ed FireFox (I know, I'm miles behind) to test my sites with.
You think I should also Download Netscape, or is it the same as IE?i usually test in FF , IE and NS.
no netscape doesnt render pages the same as IE.
IE is one of a kind.
Without IE the world would be a better place.
but itll be around for a while.
I'm using <div>'s to create the layout of my website. It's basically divided into different boxes (<div>'s). I want all the different boxes to be separated from each other the exact same space (For example: 4px). I've tried CSS Float, but it doesn't align them correctly. Could someone tell me how to position the <div>'s in an organized way using CSS? (It's a fixed, 800px width page)
I've attached an image showing the layout of my webiste and how the different boxes (<div>'s) should be perfectly aligned with each other. How do I do that?
Thanks.heres an example
<style type="text/css">
<!--
body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
.pagetop {
height: 120px;
width: 800px;
border: 1px solid #000000;
}
.pagetopleft {
background-color: #CCCCCC;
float: left;
height: 120px;
width: 500px;
}
.pagetopright {
background-color: #666666;
float: left;
height: 120px;
width: 300px;
}
.contentlefttop {
background-color: #999999;
float: left;
height: 200px;
width: 200px;
}
.contentleftbottom {
background-color: #999999;
float: left;
height: 200px;
width: 200px;
clear: left;
}
.contentright {
background-color: #FFFFCC;
float: left;
height: 400px;
width: 600px;
}
-->
</style>
</head>
<body>
<div class="pagetop">
<div class="pagetopleft">pagetopleft</div>
<div class="pagetopright">pagetopright</div>
</div>
<div class="contentlefttop">contentlefttop</div>
<div class="contentleftbottom">contentleftbottom</div>
<div class="contentright">contentright</div>
</body>Thanks andyshep, you're a genius! Exactly the way I wanted it.
I just had to remove the "border" property from the "pagetop" class, 'cause it was taking an extra 2 pixels, making the "pagetopright" div fall below the "pagetopleft" one.
Now, how do I separate all those sections by the same length, say 4 pixels, keeping them all ligned up like they are now, without using tables?
Thanks again!you mean that you want a gap of 4px between them?if thats what you wanted:
<style type="text/css">
<!--
body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
.pagetop {
height: 120px;
width: 800px;
}
.pagetopleft {
background-color: #CCCCCC;
float: left;
height: 118px;
width: 498px;
margin-right: 2px;
margin-top: 0px;
margin-bottom: 2px;
margin-left: 0px;
}
.pagetopright {
background-color: #666666;
float: left;
height: 118px;
width: 298px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 2px;
margin-left: 2px;
}
.contentlefttop {
background-color: #999999;
float: left;
height: 200px;
width: 198px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 2px;
}
.contentleftbottom {
background-color: #999999;
float: left;
height: 200px;
width: 198px;
clear: left;
margin-top: 2px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
}
.contentright {
background-color: #FFFFCC;
float: right;
height: 400px;
width: 598px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 2px;
}
-->
</style>
</head>
<body>
<div class="pagetop">
<div class="pagetopleft">pagetopleft</div>
<div class="pagetopright">pagetopright</div>
</div>
<div class="contentright">contentright</div>
<div class="contentlefttop">contentlefttop</div>
<div class="contentleftbottom">contentleftbottom</div>
</body>
Also to fix the orig layout in firefox ( tut tut i didnt test it in ff ).
i added float right to contentright and shifted the div in the code.Thanks again! Appreciated.
I also Download ed FireFox (I know, I'm miles behind) to test my sites with.
You think I should also Download Netscape, or is it the same as IE?i usually test in FF , IE and NS.
no netscape doesnt render pages the same as IE.
IE is one of a kind.
Without IE the world would be a better place.
but itll be around for a while.