1 reply [Last post]
rch316
rch316's picture
Offline
newbie
Last seen: 2 years 39 weeks ago
Timezone: GMT-5
Joined: 2011-07-18
Posts: 3
Points: 5

I am having trouble with making my background color stretch vertically without adding "height:400px;". Have a look at the following link to see my problem. In the body the dark blue and light blue background is not stretching automatically for me to cover the entire block. How can I resolve this? Thank you!

http://www.andersonwebdesigns.com/GarageStorageNewEngland/

@charset "utf-8";
/* CSS Document */

body {
margin:0;
padding:0;
background:url(images/bg2.jpg) repeat-x #2d83c0 fixed;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
}

#wrapper {
width:1000px;
margin:0 auto;
}
#header {
height:152px;
background:url(images/header-bg.gif) repeat-x;
}
#header1 {
width:2px;
background-color:#fff;
float:left;
height:152px;
}
#header2 {
width:194px;
float:left;
height:152px;
}
#header3 {
width:802px;
float:left;
}
#header4 {
width:2px;
background-color:#fff;
float:right;
height:152px;
}

#white-breaker {
width:1000px;
height:2px;
background:#fff;
clear:both;
}

#tophead {
width:1000px;
clear:both;
}
#tophead1 {
width:2px;
background-color:#fff;
float:left;
height:400px;
}
#tophead2 {
width:691px;
height:400px;
float:left;
}
#tophead3 {
width:303px;
background:#206196;
height:400px;
float:left;
}

#main {
clear:both;
background:#206196;
}
#main1 {
width:2px;
background-color:#fff;
float:left;
height:425px;
}
#main2 {
float:left;
width:290px;
background:#206196;
}
#main2:after { content: "."; display: block; height: 0; clear: both; }

#main3 {
width:704px;
background:#99c4f1;
float:left;
height:100%;
}
#main3:after { content: "."; display: block; height: 0; clear: both; }

.clear {
clear:both;
}

#foot {
clear:both;
width:1000px;
height:207px;
}
#foot1 {
width:2px;
background-color:#fff;
float:left;
height:207px;
}
#foot2 {
width:330px;
float:left;
}
#foot3 {
width:331px;
float:left;
}
#foot4 {
width:331px;
float:left;
}

#footquotes {
clear:both;
width:1000px;
height:30px;
background:#206196;
}
#footquotes0 {
width:2px;
background-color:#fff;
float:left;
height:30px;
}
#footquotes1 {
width:330px;
float:left;
text-align:center;
font-style:italic;
color:#fff;
}
#footquotes2 {
width:335px;
float:left;
text-align:center;
font-style:italic;
color:#fff;
}
#footquotes3 {
width:331px;
float:left;
text-align:center;
font-style:italic;
color:#fff;
}

#footer {
height:90px;
width:1000px;
clear:both;
}
#footer1 {
width:2px;
background-color:#fff;
float:left;
height:90px;
}
#footer2 {
width:996px;
background:#206196;
float:left;
text-align:center;
}
#footer2, #footer2 a:link, #footer2 a:visited, #footer2 a:hover, #footer2 a:active {
color:#fff;
font-size:14px;
}

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 1 year 1 week ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

it is working fine.

it is working fine.