- This topic is empty.
-
AuthorPosts
-
August 13, 2008 at 10:15 am #23078ktomassoMember
Hello everyone,
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
Code:News & Events
Dish of the Month
John’s Juicy Jumbalaya!
A new twist on this traditional Cajon dish. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Grand Opening Celebration
Yes, we’ve been open for 3 weeks now, but we feel we owe it to you to have a real “Grand Opening” bash. Come by this Saturday, August 30th, for a special menu and an all day happy hour. Tell your friends, well, the good-looking ones at least.
- Home |
- Menu |
- Special Events |
- Photo Gallery |
- Customer Service Survey |
- Employment Opportunities |
- Mint Lounge |
- Contact
One0One Restaurant, 230 W College Ave, Tallahassee, FL 32301 • Phone (850) 555-1234 • Fax (850) 555-5678 • [email protected]
© 2008 One0One Restaurant, Tallahassee, FL. All rights reserved.
Site design by Pro GrphX LLC
CSS:
Code: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;
}August 13, 2008 at 2:43 pm #49198ktomassoMemberAH, 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!!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.