I am trying to make a page that is 999px wide with a dark blue
background and two containers side-by-side on the page. I would like
the left container to be 30% of the page -or- 333px and the right
container to be 70% or 666px
I am using a small .gif to make the containers look like they have
rounded corners. The two side-by-side containers have a light blue
background inside. I cannot get the two containers to fill the page
width, there are always gaps around them. I really appreciate any
help anyone can provide. Thanks.
<html>
<head>
<style type="text/css">
body{background: #eee; margin: 0; padding: 0; text-align:center;}
img {border: 0px none; background:black}
#mothercontainer{
width:100%;
height: 800px;
border-top:0px solid #ccc;
}
#container{
background-color: #E1F0FF;
width: 800px;
margin: auto;
padding:0;
text-align:left;
border-left:0px solid #ccc;
border-right:0px solid #ccc;
overflow:hidden;}
#center1{
margin: auto 4px;}
#right1, #right2, #right3{
float: right;
width: 30%;}
#left1, #left2, #left3{
float:left;
width: 68%;}
#center2, #center3{
margin: auto 129px;}
.tl {
background-image: url('images/lgt-blue-circle.png');
width: 10px;
height: 10px;
float: left;
font-size: 0
}
.tr {
background-image: url('images/lgt-blue-circle.png');
background-position: 10px 0px;
width: 10px;
height: 10px;
float: right;
font-size: 0
}
.bl {
background-image: url('images/lgt-blue-circle.png');
background-position: 0px 10px;
width: 10px;
height: 10px;
float: left;
font-size: 0
}
.br {
background-image: url('images/lgt-blue-circle.png');
background-position: 10px 10px;
width: 10px;
height: 10px;
float: right;
font-size: 0
}
</style>
</head>
<body>
<div style="background-color:#023568;">
<div id="mothercontainer">
<div id="container">
<div id="center1">
<div id="left1">
<span class="tl"></span><span class="tr"></span>
LEFT SIDE
<span class="bl"></span><span class="br"></span>
</div>
<div id="right1">
<span class="tl"></span><span class="tr"></span>
RIGHT SIDE
<span class="bl"></span><span class="br"></span>
</div>
</div>
</div>
</div>
</div>
</body></html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en
-~----------~----~----~----~------~----~------~--~---
