hi,
I have a single column webpage with a rounded corner box which is positioned on the left in which the links sit, the main content is on the right, I am trying to make the page stretch with the content but only the main content side works, not quite sure what I am doing wrong
CSS
body {
background-color: #e2dfc2;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Arial, "Arial Black";
}
#wrapper {
background-color: #ffffff;
height:auto;
width: 800px;
margin-right:auto;
margin-left:auto;
}
#headername {
height: auto;
width: 50%;
float:left;
border-bottom:solid #000000;
}
#headername p {
margin: 1cm 0 0.3cm 0.7cm;
}
#headeremail {
height: auto;
width: 50%;
float:right;
border-bottom:solid #000000;
text-align:right;
}
#headeremail p{
margin: 1cm 0.7cm 0.3cm 0;
}
#title {
clear:both;
height:60px;
width: 100%;
border-bottom: solid #000000;
}
#title h1 {
margin-left: 0.7cm;
position:relative;
top:20%;
font-size: 150%;
}
#content {
height: auto;
}
#maincontent {
background-color: #ffffff;
height: 900px;
width: 65%;
float:right;
}
#maincontentsidebar {
padding: 1cm 0 0 0.7cm;
}
#copyright {
background-color: #ffffff;
height:auto;
width: 100%;
font-size:x-small;
border-top:solid #000000 thin;
}
#copyright p {
padding:0 0 0 0.7cm;
}
#name {
float: left;
height: 20px;
width: 100%;
text-align:left;
left: -5px;
}
#roundcont {
width:256px;
height:auto;
padding:10px 0 0 10px;
float:left;
}
#roundtext {
width:240px;
background-color:#bfdceb;
border-left:solid #6caedf 1px;
border-right:solid #6caedf 1px;
float:left;
}
#roundtext p {
margin:0;
padding:0 10px 10px 15px;
font-size:95%;
line-height:120%;
float:left;
}
#roundtext p span {
margin-left:17px;
}
a {
text-decoration:none;
color:#000000;
}
#roundtop {
width:243px;
height:20px;
background:url(../images/roundtop.gif) no-repeat top left;
}
#roundbottom {
width:243px;
height:20px;
background:url(../images/roundbottom.gif) no-repeat top left;
}
HTML
<body>
<div id="wrapper">
<div id="headername">
<p>Ray Batchelor</p> </div>
<div id="headeremail">
<p>Email:rt.batchelor@btinternet.com</p> </div>
<div id="title">
<h1>Evolution, Artefacts, Meaning & Design</h1>
</div>
<div id="content">
<div id="maincontent"><!-- TemplateBeginEditable name="maincontent" -->
<p> </p>
<!-- TemplateEndEditable --></div>
<div id="roundcont">
<div id="roundtop"></div>
<div id="roundtext">
<p>0. <a href="../index.html">Home</a><br/>
1. Evolution, fitness and <span>adaptations</span><br/>
2. The origins of the designing <span>brain</span><br/>
3. The evolutionary origins of <span>aesthetics</span><br/>
4. Artefacts, symbolism and <span> narrative</span><br/>
5. How humans engage with <span>artefacts:a provisional model</span> <br/>
6. Consequences<br/>
<span>Illustrations</span><br/>
<span>Bibliography</span><br/>
<span>Webography</span><br/>
<span>Site Map</span></p>
</div>
<div id="roundbottom"></div>
</div>
</div>
<p> </p>
<div id="copyright">
<p>© Ray Batchelor 2007 </p> </div>
</div>
</div>
</body>
