New to the site, and hope someone can give me some good CSS help.
The site I'm working on is a simple 2 column layout with (roughly) a header, main content area, and footer. I have set the main content with a min-height, and the footer with a static height. When the text is enlarged, I want the main content area to expand, not the text inside the footer. Examples are below. What have I done wrong in my CSS to prevent this from happening correctly? Any suggestions are greatly appreciated. Thanks!
If you wish a div to expand relative to the size of the text - then you need to set your width using relative values - ems. Pixels are static values and as such will not expand relative to the size of you text. So, use em instead of px for the width of your divs.
AH, OF COURSE! It was the height that I wanted to expand, and by changing that to ems, it grows quite nicely. I was even using the 62.5% rule, and didn't even think of what I was doing. Thanks for your help!!
New to the site, and hope someone can give me some good CSS help.
The site I'm working on is a simple 2 column layout with (roughly) a header, main content area, and footer. I have set the main content with a min-height, and the footer with a static height. When the text is enlarged, I want the main content area to expand, not the text inside the footer. Examples are below. What have I done wrong in my CSS to prevent this from happening correctly? Any suggestions are greatly appreciated. Thanks!
Kevin
CSS:
body {
background: #98782d;
font-size: 62.5%;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}
#frame {
width: 853px;
min-height: 853px;
margin: 0 auto;
text-align: center;
}
#outer-container {
width: 856px;
min-height: 745px;
background-image:url(images/shadow_middle.png);
background-repeat: repeat-y;
margin: 0 auto;
}
#container {
width: 800px;
background: url(images/background-tile.jpg) repeat;
margin: 0 auto;
text-align: left;
font-size: 1.1em;
}
/*-------------------------------------------
MAIN CONTENT AREA
--------------------------------------------*/
#main {
width: 100%;
min-height: 619px;
background: url(images/background-tile.jpg) repeat;
background-color:#FFFFFF;
position: relative;
}
.main-content {
float: left;
width: 299px;
min-height: 340px;
}
h1 {
margin: 10px 20px;
}
.normal-par {
text-align: left;
line-height: 1.5em;
margin: 0 20px 10px 20px;
}
#first-header {
height: 77px;
background: url(images/main_headline.png) no-repeat;
text-indent: -99999px;
}
#flash-img {
float: left;
width: 500px;
height: 356px;
}
#left-image {
float: left;
margin-right: 15px;
}
#secondary-content {
float: left;
width: 500px;
}
#second-header {
height: 20px;
background: url(images/news+events.png) no-repeat;
text-indent: -99999px;
margin: 20px 0px 10px 20px;
}
h2 {
font-size: 1.8em;
color: #9e3722;
font-style: italic;
font-weight: normal;
margin: 15px 40px 0px 20px;
}
h6 {
margin: 0px 40px 0px 20px;
text-transform: uppercase;
}
.description {
margin: 0px 40px 0px 20px;
line-height: 1.5em;
}
/*-----------------------------------------------
FOOTER
-----------------------------------------------*/
#footer-container {
margin: 0 auto;
width: 856px;
height: 104px;
background: url(images/footer.png) no-repeat;
}
#footer {
color: #603913;
}
#footer-nav {
list-style-type: none;
padding-top: 15px;
}
#footer-nav li {
display: inline;
}
#footer a {
text-decoration: none;
color: #603913;
}
#footer a:hover {
text-decoration: underline;
}
#footer p {
line-height: 11px;
}