Log In · Register

 
my wrapper, is being a whore
HeartOfPandora
post Dec 21 2009, 09:36 AM
Post #1


i like boobies, yes I do. I like boobies - how 'bout you?
*****

Group: Member
Posts: 620
Joined: Jun 2008
Member No: 662,457
K guys, I needs some halp. I got this nice little page I'm trying to build, but the wrap id is being GAYgaygaaaay full of ridiculous tendancies. Live version here, raw code below.

The purple wrap is what's giving me trouble. It's supposed to totally envelope the two content columns but it's not. Right now I have it set to height: 100px; simply so you can see where it is and what it does, but that ain't gonna fly when it goes live.

I know there's a simple fix for it 'cause I found it once, but for the life of me I can't find it again. Help a girl out?

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
<title>blargh v4</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">

* {margin: 0; padding: 0; text-align: justify;}

body {
background: #eee url('bg.png') top left repeat scroll;
font-family: Arial;
font-size: 11px;
color: #807f7f;
}

#head {
background-color: #dedede;
width: 100%;
height: 50px;
display: block;
}

#nav {
width: 800px;
height: inherit;
margin: 0 auto;
}

#wrap {
width: 800px;
height: 100px;
margin: 0 auto;
background: purple url('rabbit.png') bottom left no-repeat fixed;
clear: both;
}

#side {
width: 120px;
height: auto;
padding: 10px;
float: right;
border-top: 10px solid #aab322;
border-bottom: 10px solid #aab322;
background-color: #fff;
}

#main {
width: 335px;
height: auto;
margin: 0 10px 0 0;
padding: 10px;
float: right;
border-top: 10px solid #f4ff4a;
border-bottom: 10px solid #f4ff4a;
background-color: #fff;
}

#foot {
background: url(foot.png) bottom left repeat-x scroll;
width: 100%;
height: 50px;
display: block;
clear: both;
}
</style>
</head>

<body>
<div id="head">
<div id="nav">rabble</div>
</div>
<div id="wrap">
<div id="side">
<p>Phasellus at turpis vitae est consectetur dapibus vitae convallis ligula. Duis hendrerit enim mauris. Nullam rhoncus tellus vitae sapien feugiat dictum ut et dui. Nam quis elementum lorem. Donec ut diam dolor. Vestibulum tempus tempus eleifend. Nunc sed elit sed tellus malesuada viverra sit amet vitae est. In volutpat ullamcorper egestas. Duis quis varius est. Aenean non risus ut metus cursus dignissim. Quisque dolor nisi, convallis vitae commodo eu, tincidunt non urna. Nam interdum velit et dolor lacinia in sagittis quam convallis. Fusce velit urna, tincidunt ut elementum ac, consectetur nec tellus.</p>
</div>
<div id="main">
<p>Pellentesque quam metus, luctus sed congue et, dignissim vel lacus. Curabitur eget pellentesque mi. Phasellus dictum tristique tellus vitae tincidunt. Donec id metus erat. Integer non mi libero. Nullam in felis a dui vulputate rhoncus eget non leo. Sed placerat malesuada feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis varius mollis adipiscing. In hac habitasse platea dictumst. Vestibulum vehicula justo ac felis molestie non accumsan magna dictum. Suspendisse fringilla dapibus faucibus. Nunc vel purus id leo interdum tincidunt. Maecenas eget purus odio, nec euismod tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In tempor feugiat massa ut convallis. Suspendisse vulputate tortor vel enim ultrices ac bibendum libero dignissim. Morbi pretium tellus non justo facilisis aliquam.</p>
<p>Phasellus vulputate tellus ac lacus pretium non vestibulum erat accumsan. Etiam risus risus, convallis et faucibus ut, hendrerit a augue. Donec convallis vulputate eros et porttitor. Nullam porttitor condimentum sem eget cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante justo, tristique a lobortis sit amet, adipiscing at lorem. Quisque iaculis sollicitudin sapien eget interdum. Ut quis mi vitae turpis faucibus pharetra non id mauris. Integer accumsan libero ut ante laoreet ac sollicitudin nunc mollis. Fusce dignissim, est et porttitor dapibus, tortor lectus rhoncus leo, vitae pellentesque leo ante a mauris. Donec sem orci, bibendum at sodales at, porttitor ut turpis. Ut ac magna diam. Donec venenatis viverra nulla, ornare mattis leo auctor in. Aliquam erat volutpat. Morbi risus lorem, congue at egestas sit amet, pulvinar viverra libero. Donec luctus orci at felis mollis et rutrum mi tristique. Donec vel neque erat. Morbi fermentum consectetur orci, et auctor elit fringilla eu. Donec vel enim a turpis feugiat blandit a eu neque. Suspendisse ut tortor leo.</p>
<p>Suspendisse posuere orci non mauris vehicula semper. Maecenas pellentesque condimentum augue eget vehicula. Suspendisse blandit eleifend nunc non auctor. Mauris adipiscing nibh ac velit posuere blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis orci vitae lectus molestie rhoncus in id enim. Aenean eu velit nec velit placerat tincidunt. Sed nisl augue, pulvinar sit amet luctus id, tincidunt vitae metus. Nunc vitae nisl in arcu scelerisque posuere at nec lacus. Cras vitae elit dolor. Etiam ut eleifend leo. Ut vitae dictum nulla. Suspendisse ac ante dui.</p>
</div>
</div>
<div id="foot"></div>
</body>
</html>
 

Posts in this topic
HeartOfPandora   my wrapper   Dec 21 2009, 09:36 AM
fixtatik   For your style sheet: CODE.clear { clear:both;...   Dec 21 2009, 09:49 AM
HeartOfPandora   That's the one! Well, I was on the right ...   Dec 21 2009, 10:13 AM
Mike   Topic closed & moved.   Dec 21 2009, 01:31 PM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic