Thanks to the awesome advice here regarding choosing a CMS, I was able to set my client up with an ExpressionEngine site. I have absolutely fallen in love with it, I’ve developed one site already (a personal site) and I’m now developing a client’s site.
Everything was running smoothly, I was inputting content, but I’ve ran into a problem. I cannot get my main division to stretch to fill the amount of content that needs to be displayed. This is a huge problem, I absolutely need to get it fixed by tomorrow, as we’re planning on launching the site sometime then. I wouldn’t like to have to put it off, and I’ve run into this problem in the past, I just can’t remember how it was solved. I’m hoping you guys can give me some help, so that I don’t run into this problem again, or at least I’ll now for sure how to fix it.
Anyway, as I’ve said, the main division where the content is being displayed won’t stretch to fill the page. I’ve tried all kinds of different CSS to get it to work, but it just doesn’t feel like working.
Below I’ve attached a screenshot that shows the problem visually.
As you can see, the main division (with the stripes for a background) isn’t stretching like it should. The footer wrap, is in the right position in regards to the main division, but the footer links are all the way below the content, where the footer wrap and it’s background should be.
I know my CSS code could be better, at least more semantic, but I coded it in the best way I know how. I’m new to creating large and complex sites with a CMS.
Here’s the CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {border: none;}
/*====================================================
04 - TEXT STYLES
====================================================*/
/*=============================
04.2 - DEFINE TEXT STYLES
=============================*/
body {font-family: Albert, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: Clerkenwell, serif; font-weight: normal;}
h1 {font-size: 36px; color: #f2f2f2; text-shadow: 0px 2px #3f2f2d;}
h1.headline {font-size: 36px; margin-top: 10px; color: #b95951; text-shadow: 0px 2px rgba(63,47,45,0.4);}
h2 {font-size: 24px;}
h3 {font-size: 21px;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
p, blockquote, pre, abbr, acronym, address, big, cite, code, dfn, em, q, s, samp, small, strike, strong, sub, sup, tt, b, u, i, center {font-family: Albert, Helvetica, sans-serif;}
p {font-size: 13px; margin-top: 5px; margin-bottom: 18px; color: #383838; line-height:1.2;}
p.column-text {font-size:13px; margin-top: 80px; margin-left: 9px; margin-right: 9px; color:#383838;}
p.article-text {font-size:13px; margin-top: 75px; margin-left: 9px; color:#383838;}
p.pull-quote {font-size: 18px; font-weight: bold; font-style: italic; color:#ffffff; text-shadow: 0px 2px rgba(56,56,56,0.4); margin: 11px 0 10px 0;}
/*** LINK STYLES ***/
.column-text a:link {text-decoration: underline; color:#b95951; background: transparent;}
.column-text a:visited {text-decoration: underline; color:#b95951; background: transparent;}
.column-text a:hover {text-decoration: none; color:#b95951; background: transparent;}
.column-text a:active {text-decoration: none; color:#b95951; background: transparent;}
.article a:link {text-decoration: underline; color:#b95951; background: transparent;}
.article a:visited {text-decoration: underline; color:#b95951; background: transparent;}
.article a:hover {text-decoration: none; color:#b95951; background: transparent;}
.article a:active {text-decoration: none; color:#b95951; background: transparent;}
blockquote {width:610px; height:auto; padding:10px; margin-top:0; margin-bottom:30px; margin-left:90px; margin-right:90px; background-color:rgba(56,56,56,0.5);}
b, strong {font-weight: bold;}
i, em {font-style: italic;}
/*** NAVIGATION LINKS ***/
ul.nav {
list-style-type:none;
margin:0;
padding:0;
}
li.navitem a:link, a:active, a:visited {
width: 164px;
font-family: Clerkenwell, Times, Serif;
font-size: 21px;
font-weight: normal;
color: #ffffff;
display: block;
float: left;
text-decoration: none;
text-shadow: 0px 2px 0px rgba(87,61,59,0.7);
text-align: center;
margin-top: 24px;
margin-left: -5px;
}
li.navitem a:hover {
text-decoration: none;
color: #ffffff;
text-shadow: 0px -2px 0px rgba(87,61,59,0.4);
}
li.navitem-footer a:link, a:active, a:visited {
width: 164px;
font-family: Clerkenwell, Times, Serif;
font-size: 16px;
font-weight: lighter;
color: #ffffff;
display: block;
float: left;
text-decoration: none;
text-shadow: 0px 2px 0px rgba(87,61,59,0.7);
text-align: center;
margin-top: 24px;
margin-left: -5px;
}
li.navitem-footer a:hover {
text-decoration: none;
color: #ffffff;
text-shadow: 0px -2px 0px rgba(87,61,59,0.4);
}
/*====================================================
05 - MAIN DIVISIONS
====================================================*/
html, body {height: 100%;}
body {
background-image: url(http://www.paninicreations.com/images/uploads/layout/bg.jpg);
background-position: top left; background-repeat: repeat;
}
#main-wrapper, #masthead-wrapper, #navbar-wrapper, #content-wrapper {width: 1020px; margin: 0 auto;} /* BECAUSE OF THE HANGING RIBBONS, I NEEDED TO USE WRAPS FOR EACH SECTION */
#main, #masthead, #navbar, #footer {width: 820px; margin: 0 auto;} /* THE #MAIN DIV IS WHERE I'M HAVING PROBLEMS */
#main-wrapper, #main {height:100%;} /* THIS CHANGE WAS MADE TO TRY AND REMEDY THE PROBLEM */
/*=============================
05.1 - SPECIFIC DEVISION STYLES
=============================*/
#main {
min-height: 880px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/bodybg.jpg);
background-repeat: repeat;
}
#masthead {
height: 311px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/masthead.jpg);
}
#navbar {
height: 99px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/navbar.jpg);
background-repeat: repeat-x;
float:left;
background-position: top center;
}
#navbar-left {
width:79px;
height: 99px;
float: left;
background-image: url(http://www.paninicreations.com/images/uploads/layout/navbar-left.png);
background-repeat: no-repeat;
margin-left: 21px;
}
#navbar-right {
width:79px;
height: 99px;
float: right;
background-image: url(http://www.paninicreations.com/images/uploads/layout/navbar-right.png);
background-repeat: no-repeat;
margin-right: 21px;
}
#content {
margin: 0 auto;
width:800px;
padding-top: 40px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
#slider-container {
margin: 0 auto;
}
#footer {
background-image: url(http://www.paninicreations.com/images/uploads/layout/footer.jpg);
background-repeat: no-repeat;
height: 53px;
padding-top: 1px;
}
/*=============================
05.2 - ARTICLE STYLES
=============================*/
.article-wrap {
margin: 0 auto;
width:640px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/bodybg.jpg);
background-repeat: repeat;
}
.article-header-wrap {
width: 650px;
margin-top: 10px;
margin-left: 1px;
margin-bottom: -80px;
position: relative;
float:left;
}
.article-header {
float:left;
}
.article {
width: 610px;
padding: 10px;
background-color: #f2f2f2;
float: right;
}
.clear {
clear:both;
}
/*=============================
05.3 - BUTTONS/IMG STYLES
=============================*/
.our-story-img-wrap {
width: 640px;
margin: 0 auto;
}
.our-story-img {
width: 300px;
margin-bottom: 40px;
margin-right: 10px;
margin-left: 10px;
float: left;
background-color: #c9c9c9;
}
.readmore-blue {
width: 168px;
height: 34px;
margin-left: 30px;
margin-right: 30px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/button-readmore-blue.png);
}
.readmore-green {
width: 168px;
height: 34px;
margin-left: 30px;
margin-right: 30px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/button-readmore-green.png);
}
.readmore-red {
width: 168px;
height: 34px;
margin-left: 30px;
margin-right: 30px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/button-readmore-red.png);
border: 0px;
}
/*************************
FUNDRAISING/GIVING BACK BADGES
************************/
#badge-wrap {width:270px; height:124px; margin-top: 150px; float:right;}
#giving-back {
width:124px;
height: 124px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/button-givingback.png);
margin-left: 10px;
float:left;
}
#fundraising-opportunities {
width:124px;
height: 124px;
background-image: url(http://www.paninicreations.com/images/uploads/layout/button-fundraising.png);
margin-left: 10px;
float:left;
}
/*=============================
05.4 - DYNAMIC RIBBON STYLING
=============================*/
.ribbon-container {height: 59px; width: 441px;}
.ribbon-wrap {
height: 59px;
width: 9px;
margin-left: -19px;
background-image: url(http://www.paninicreations.com/images/layout/ribbon-red-wrap.png);
background-position: top left;
background-repeat: no-repeat;
}
.ribbon-body {
height: 59px;
width: 401px;
background-image: url(http://www.paninicreations.com/images/layout/ribbon-red-body.png);
padding-left: 0px; /*ADJUST PADDING FOR TEXT PLACEMENT */
background-repeat: no-repeat;
}
.ribbon-end {
height: 59px;
width: 31px;
background-image: url(http://www.paninicreations.com/images/layout/ribbon-red-end.png);
background-repeat: no-repeat;
}
/*=============================
05.5 - BOTTOM THREE COLUMNS
=============================*/
.column-wrap {
width: 249px;
height: 325px;
margin-top: 70px;
margin-left: 10px;
float: left;
}
.column {
width:240px;
height:325px;
background-color: #f2f2f2;
float: right;
padding-right: 0px;
}
.column-header {
width:249px;
height:68px;
position: absolute;
}
/*=============================
06 - CATERING PAGE
=============================*/
.product-section {
width: 600px;
padding: 10px;
background-color: #f2f2f2;
}
.item-description {
width: 380px;
margin-top: -80px;
margin-left:10px;
float:right;
}
p.product-price {
font-family: Clerkenwell, serif;
font-weight: bold;
font-size: 18px;
}
img.product-photo {
width: 200px;
height: 200px;
margin-right: 10px;
float:left;
background-color: rgba(150,150,150,0.4);
}
Here’s the HTML, well everything after the <body> tag. Keep in mind this is what’s been rendered by ExpressionEngine:
<body>
<div id="masthead-wrapper">
<div id="masthead">
<div id="badge-wrap">
<a href="http://www.paninicreations.com/static/fundraising-opportunities/"><div id="fundraising-opportunities"></div></a>
<a href="http://www.paninicreations.com/static/foodshelf-program/"><div id="giving-back"></div></a>
</div>
</div>
</div>
<div id="navbar-wrapper">
<div id="navbar-left"></div>
<div id="navbar">
<ul class="nav">
<li class="navitem"><a href="http://www.paninicreations.com/index.php">HOME</a></li>
<li class="navitem"><a href="http://www.paninicreations.com/index.php/our-story/index.php">OUR STORY</a></li>
<li class="navitem"><a href="http://www.paninicreations.com/index.php/catering/index.php">CATERING</a></li>
<li class="navitem"><a href="#">WHOLESALE</a></li>
<li class="navitem"><a href="#">CONTACT US</a></li>
</ul>
</div>
<div id="navbar-right"></div><!-- END NAVIGATION -->
</div>
<div class="clear"></div>
<div id="main-wrapper">
<div id="main">
<div class="article-wrap">
<div class="article-header-wrap">
<img src="http://www.paninicreations.com/images/uploads/layout/ribbon-catering.png" />
</div>
<div class="article">
<p class="article-text">Whether hosting a holiday party, business lunch, wedding reception or anything in between, panini creations tuscan flatbread rounds, desserts, salads and box lunches will be a pleasant change and a sure hit!!! Our unique, delicious and affordable fare is easy to serve and always hand crafted and fresh for your special event. With each tuscan flatbread sandwich round ordered, you can help us fill the food shelves in our community so contact us now! <br />
<br />
<em>To ensure that each order is delivered fresh and on time, we request a minimum 24 hour notice for orders under $150.00 and 72 hours for orders over $150.00.</em></p>
<div class="product-section">
<a href="http://paninicreations.com/images/uploads/products//panini-round.jpg"><img src="http://paninicreations.com/images/uploads/products/thumb_panini-round.jpg" /></a>
<div class="item-description">
<p class="article-text"><strong>Turkey & Aioli:</strong> Thinly sliced deli style turkey with aioli sauce and romaine on our signature tuscan parmesan flatbread.<br />
<br />
<strong>Chicken Caesar:</strong> Tender garlic chicken pieces with caesar dressing and romaine on our signature tuscan parmesan flatbread.<br />
<br />
<strong>Ham & Brie:</strong> Deli style ham and sliced brie with dijon mustard and romaine on our signature tuscan parmesan flatbread.<br />
<br />
<strong>Roast Beef:</strong> Tender roast beef slices with horseradish mayo and romaine on our signature red pepper tuscan flatbread.<br />
<br />
<strong>Mozzarella & Pesto:</strong> Mozzarella sliced with basil pesto, roasted red peppers and romaine on our signature herb tuscan flatbread.<br />
<br />
<br />
<em>*All sandwich rounds are served using biodegradable tray and box</em><br />
<br />
<strong>For every round purchased, $1.00 will be donated to a food shelf program.</strong></p>
<p class="product-price">$24.99 Per Round</p>
</div>
</div>
</div><!--END ARTICLE -->
</div><!-- END ARTICLE WRAP -->
<div class="article-wrap">
<div class="article-header-wrap">
<img src="http://www.paninicreations.com/images/uploads/layout/ribbon-dessert-trays.png" />
</div>
<div class="article">
<p class="article-text"></p>
<div class="product-section">
<a href="http://paninicreations.com/images/uploads/products//small-desserts.jpg"><img src="http://paninicreations.com/images/uploads/products/thumb_small-desserts.jpg" /></a>
<div class="item-description">
<p class="article-text">Each tray serves 32 petite wedge bites including cheesecake brownie, oatmeal fudge bar, white chocolate raspberry bar and turtle brownie. <br />
<br />
<em>*Dessert trays are served using biodegradable tray and box.</em></p>
<p class="product-price">$15.99 Per Tray</p>
</div>
</div>
</div><!--END ARTICLE -->
</div><!-- END ARTICLE WRAP -->
<div class="article-wrap">
<div class="article-header-wrap">
<img src="http://www.paninicreations.com/images/uploads/layout/ribbon-pasta-salads.png" />
</div>
<div class="article">
<p class="article-text"></p>
<div class="product-section">
<a href="http://paninicreations.com/images/uploads/products//pastas.jpg"><img src="http://paninicreations.com/images/uploads/products/thumb_pastas.jpg" /></a>
<div class="item-description">
<p class="article-text">Pasta Supreme: rainbow rotelli pasta, sundried tomatoes, red peppers, carrot and italian dressing.<br />
<br />
Summer Fresh Pasta: rainbow rotelli pasta, carrot, cucumber, green pepper and creamy dressing.<br />
</p>
<p class="product-price">$8.99/2lb Bowl $21.99/5lb Tub</p>
</div>
</div>
</div><!--END ARTICLE -->
</div><!-- END ARTICLE WRAP -->
</div><!-- END MAIN -->
</div><!-- END MAIN WRAPPER -->
<div id="footer">
<ul class="nav">
<li class="navitem-footer"><a href="http://www.paninicreations.com/index.php">HOME</a></li>
<li class="navitem-footer"><a href="http://www.paninicreations.com/index.php/our-story/index.php">OUR STORY</a></li>
<li class="navitem-footer"><a href="http://www.paninicreations.com/index.php/catering/index.php">CATERING</a></li>
<li class="navitem-footer"><a href="#">WHOLESALE</a></li>
<li class="navitem-footer"><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>
Any help is much appreciated.
You are my only hope, SitePoint. 