Try this:
<html>
<head>
<style type="text/css">
body{
background: #023568;
margin: 0;
padding: 0;
text-align:center;
}
img {
border: 0px none;
background:black;
}
#mothercontainer{
width:100%;
height: 800px;
border-top:0px solid #ccc;
margin: auto;
padding:0;
}
#container{
background-color: #E1F0FF;
width: 100%;
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: 33%;
}
#left1, #left2, #left3{
float:left;
width: 65%;
margin-right: 1%;
}
#center2, #center3{
margin: auto 129px;
}
.tl {
background-image: url('images/lgt-blue-circle.png');
width: 10px;
height: 10px;
float: left;
}
.tr {
background-image: url('images/lgt-blue-circle.png');
background-position: 10px 0px;
width: 10px;
height: 10px;
float: right;
}
.bl {
background-image: url('images/lgt-blue-circle.png');
background-position: 0px 10px;
width: 10px;
height: 10px;
float: left;
}
.br {
background-image: url('images/lgt-blue-circle.png');
background-position: 10px 10px;
width: 10px;
height: 10px;
float: right;
}
</style>
</head>
<body>
<div id="mothercontainer">
<div id="container">
<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>
</body>
</html>
On Sat, May 30, 2009 at 12:25 PM, RCGUA <[email protected]> wrote:
>
> 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>
>
> >
>
--
Thanks,
Andy Baughman
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
