BrokenGnome
04-17-2006, 09:44 PM
Been a lurker fore a while, and now I finally have a reason to post.
I'm reasonably new to CSS and am working on a layout that I just can't figure out. The basic idea is this:
The background color for the page will be a color - Got that
In the center of the page I want a white box 720px wide - Got that
I have a header container that just holds a picture, then 2-3 different colored boxes inside the white container. All are tiled down the page - Got that
Now, if for instance I want the top colored box to have 2 columns and I made 2 ids/classes for that called, i.e., contact{} and if it float left and navigation{} w/ a float right, and stick those inside the div for the box the contact(left) div appears on top of the navigation(right) div instead of them floating to the sides. So right now I just made a table inside the div w/ 2 columns and it works fine, but I'd really like to use CSS
The center white container I want to extend to the bottom of the page whether or not there is text big enough to or not, and as the text grows the white background expands with it. Right now it only works if the text is < the size of the page.
Hope this makes sense. This just isin't making any sense to me as to why it's not working. The CSS file is posted below along w/ the html I'm using:
body {
background: #b4c03a;
font: normal 12px/16px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif;
color: #666;
margin: 0 0 0 0;
text-align:center;
min-width: 760px;
}
#container {
width: 720px;
margin: 0 auto;
text-align: center;
background: #FFFFFF;
clear: both;
}
#header{
height: 129px;
background: url("images/header.gif") no-repeat;
}
#top{
background: #e05628;
}
#top #contact{
float:right;
}
#top #navigation{
float: left;
}
#middle{
background: #f8b628;
clear: both;
}
#bottom{
background: #6faea3;
text-align:right;
color:#FFFFFF;
height: 20px;
}
a:link, a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover, a:active{
border-bottom: 1px dotted #000;
}
#top, #middle{
text-align: left;
text-indent: 5px;
}
#top, #middle, #bottom, #header{
width: 700px;
margin: 0 auto 5 auto;
}
HTML:
<body>
<div id="wrapper">
<div id="container">
<div id="header">
</div>
<div id="top">
<div id="contact">lasdjfaf</div>
<div id="navigation">asldfjasdf</div>
</div>
<div id="middle">
</div>
<div id="bottom">
Copyright information
</div>
</div>
</div>
</body>
I'm reasonably new to CSS and am working on a layout that I just can't figure out. The basic idea is this:
The background color for the page will be a color - Got that
In the center of the page I want a white box 720px wide - Got that
I have a header container that just holds a picture, then 2-3 different colored boxes inside the white container. All are tiled down the page - Got that
Now, if for instance I want the top colored box to have 2 columns and I made 2 ids/classes for that called, i.e., contact{} and if it float left and navigation{} w/ a float right, and stick those inside the div for the box the contact(left) div appears on top of the navigation(right) div instead of them floating to the sides. So right now I just made a table inside the div w/ 2 columns and it works fine, but I'd really like to use CSS
The center white container I want to extend to the bottom of the page whether or not there is text big enough to or not, and as the text grows the white background expands with it. Right now it only works if the text is < the size of the page.
Hope this makes sense. This just isin't making any sense to me as to why it's not working. The CSS file is posted below along w/ the html I'm using:
body {
background: #b4c03a;
font: normal 12px/16px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif;
color: #666;
margin: 0 0 0 0;
text-align:center;
min-width: 760px;
}
#container {
width: 720px;
margin: 0 auto;
text-align: center;
background: #FFFFFF;
clear: both;
}
#header{
height: 129px;
background: url("images/header.gif") no-repeat;
}
#top{
background: #e05628;
}
#top #contact{
float:right;
}
#top #navigation{
float: left;
}
#middle{
background: #f8b628;
clear: both;
}
#bottom{
background: #6faea3;
text-align:right;
color:#FFFFFF;
height: 20px;
}
a:link, a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover, a:active{
border-bottom: 1px dotted #000;
}
#top, #middle{
text-align: left;
text-indent: 5px;
}
#top, #middle, #bottom, #header{
width: 700px;
margin: 0 auto 5 auto;
}
HTML:
<body>
<div id="wrapper">
<div id="container">
<div id="header">
</div>
<div id="top">
<div id="contact">lasdjfaf</div>
<div id="navigation">asldfjasdf</div>
</div>
<div id="middle">
</div>
<div id="bottom">
Copyright information
</div>
</div>
</div>
</body>