Jess McKenzie
Reputation: 8385
CSS Layout Improvements
I have the following layout and I would like to know the following:
- When I have more data how can I make the gray background repeat down the page more?
- With my portfolio I have
margin-left:25pxthe wrapper but how can I make sure it stops at the end of the content background?
CSS:
html{
height:100%;
width:100%;
background:url(../img/bg.jpg) repeat;
}
body{
width:960px;
height:100%;
background-color:#e3e3e3;
margin:42px auto;
}
p,h1,h2{
margin:25px;
}
h1{
color:#67686a;
font:18px Myriad Pro bold;
}
p{
font:Myriad Pro;
color:#99999a;
}
a{
text-decoration: none;
color:#99999a;
font-weight:bold;
}
#space{
padding:10px 0 0 0;
}
header{
width:100%;
height:160px;
}
#logo{
height:100px;
width:159px;
margin:0 auto;
background:url('../img/logo.png') no-repeat;
}
header nav{
width:410px;
height:18px;
margin:3px auto;
}
header nav ul{
width:100%;
height:18px;
margin:0 auto;
}
header nav ul li{
float:left;
display:block;
margin:0 auto;
}
header nav li a{
float:left;
width:85px;
padding:0 3px 3px 3px;
font:18px Myriad Pro;
text-decoration: none;
text-align: center;
color:#99999a;
}
header nav li a:hover, a:active, .current{
font:18px Myriad Pro bold;
color:#67686a;
}
header nav .first{
margin:0 0 0 25px;
}
#line{
clear:both;
width:610px;
height:1px;
margin:0 0 0 235px;
background:url('../img/line.png') no-repeat;
}
#banner{
width:100%;
height:161px;
}
#content{
float:left;
width:100%;
height:100%;
background-color:#e3e3e3;
margin: 0 0 10px 0;
}
footer{
width:150;
height:24px;
}
footer p{
color:#e3e3e3;
}
/*Portfolio*/
#portfolioWrapper{
width:100%;
height:100%;
margin:0 0 0 25px;
border:1px solid blue;
}
#portfolioBox{
float:left;
padding-left:8px;
}
#portfolioBox img{
height:150px;
width:150px;
background-color:green;
}
#portfolioBox p{
width:150px;
margin:5px 0 0 0;
text-align:left;
border:1px solid red;
}
HTML:
<!DOCTYPE html>
<head>
{pyro:theme:partial name="metadata"}
</head>
<body>
<header>
<div id="space"></div>
<div id="logo"></div>
<div id="line"></div>
<nav>
<ul>
{pyro:navigation:links group="header" indent="tab"}
</ul>
</nav>
</header>
<section id="banner" class="nivoSlider">
{pyro:galleries:images slug="template-slider" limit="5"}
<img src="{pyro:url:base}uploads/default/files/{name}" alt="{description}">
{/pyro:galleries:images}
</section>
<section id="content">
{if ('{pyro:page:is_portfolio}' == TRUE)}
{else}
<h1>{pyro:page:title}</h1>
{/if}
<p>
{pyro:page:body}
</p>
<div id="portfolioWrapper">
<div id="portfolioBox">
<img src="http://placekitten.com/g/150/150" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a vestibulum nisi. Ut ligula nulla, ullamcorper quis tempor nec, ultrices a tortor. Integer tellus tellus, dignissim vel volutpat vitae, viverra vitae mauris. In hac habitasse platea dictumst. Fusce massa mi, tincidunt eu malesuada sit amet, elementum eu mi.
</p>
</div>
<div id="portfolioBox">
<img src="http://placekitten.com/g/150/150" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a vestibulum nisi. Ut ligula nulla, ullamcorper quis tempor nec, ultrices a tortor. Integer tellus tellus, dignissim vel volutpat vitae, viverra vitae mauris. In hac habitasse platea dictumst. Fusce massa mi, tincidunt eu malesuada sit amet, elementum eu mi.
</p>
</div>
<div id="portfolioBox">
<img src="http://placekitten.com/g/150/150" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a vestibulum nisi. Ut ligula nulla, ullamcorper quis tempor nec, ultrices a tortor. Integer tellus tellus, dignissim vel volutpat vitae, viverra vitae mauris. In hac habitasse platea dictumst. Fusce massa mi, tincidunt eu malesuada sit amet, elementum eu mi.
</p>
</div>
<div id="portfolioBox">
<img src="http://placekitten.com/g/150/150" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a vestibulum nisi. Ut ligula nulla, ullamcorper quis tempor nec, ultrices a tortor. Integer tellus tellus, dignissim vel volutpat vitae, viverra vitae mauris. In hac habitasse platea dictumst. Fusce massa mi, tincidunt eu malesuada sit amet, elementum eu mi.
</p>
</div>
<div id="portfolioBox">
<img src="http://placekitten.com/g/150/150" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a vestibulum nisi. Ut ligula nulla, ullamcorper quis tempor nec, ultrices a tortor. Integer tellus tellus, dignissim vel volutpat vitae, viverra vitae mauris. In hac habitasse platea dictumst. Fusce massa mi, tincidunt eu malesuada sit amet, elementum eu mi.
</p>
</div>
<div id="portfolioBox">
<img src="http://placekitten.com/g/150/150" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a vestibulum nisi. Ut ligula nulla, ullamcorper quis tempor nec, ultrices a tortor. Integer tellus tellus, dignissim vel volutpat vitae, viverra vitae mauris. In hac habitasse platea dictumst. Fusce massa mi, tincidunt eu malesuada sit amet, elementum eu mi.
</p>
</div>
<div id="portfolioBox">
<img src="http://placekitten.com/g/150/150" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a vestibulum nisi. Ut ligula nulla, ullamcorper quis tempor nec, ultrices a tortor. Integer tellus tellus, dignissim vel volutpat vitae, viverra vitae mauris. In hac habitasse platea dictumst. Fusce massa mi, tincidunt eu malesuada sit amet, elementum eu mi.
</p>
</div>
</div>
</section>
<footer>
<p>© {pyro:settings:site_name} | {pyro:helper:date format="Y"}
</footer>
</body>
Upvotes: 1
Views: 147
Answers (1)
rmagnum2002
Reputation: 11421
body{
width:960px;
height:auto;
min-height: 100% !important;
background-color:#e3e3e3;
margin:42px auto;
}
the height: auto; will resize the content depending how dig is the div inside, and min-height will keep body's height not less then 100%
update
#content{
float:left;
width:100%;
min-height: 100%;
height:auto;
background-color:#e3e3e3;
margin: 0 0 10px 0;
}
Upvotes: 1