By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,724 Members | 1,707 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,724 IT Pros & Developers. It's quick & easy.

stretching page to fit content

P: 35
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 &amp; Design</h1>
</div>

<div id="content">
<div id="maincontent"><!-- TemplateBeginEditable name="maincontent" -->
<p>&nbsp;</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>&nbsp;</p>

<div id="copyright">
<p>&copy; Ray Batchelor 2007 </p> </div>




</div>
</div>
</body>
Mar 30 '07 #1
Share this Question
Share on Google+
4 Replies


Expert 100+
P: 1,892
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 &amp; Design</h1>
</div>

<div id="content">
<div id="maincontent"><!-- TemplateBeginEditable name="maincontent" -->
<p>&nbsp;</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>&nbsp;</p>

<div id="copyright">
<p>&copy; Ray Batchelor 2007 </p> </div>




</div>
</div>
</body>
Set body margin to 0px you don't need to specify left, right etc.. then use 100% to fill the entire page.
Mar 30 '07 #2

P: 35
tried that but it didn't work, think it has to do with the #wrapper div and maybe the #roundcont div but not sure how to fix it, go to http://www.raybatchelor.com/template.jpg to have a look.
can't seem to push the line & copyright down

thanks
Mar 30 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
Parent elements are NOT to expand to contain floated elements. To do this, add overflow:auto to the #content css.
Mar 31 '07 #4

P: 35
I did that but I still don't understand why the right side won't stretch with the content, this is what it look like when I added overflow: auto to the #content css
http://www.raybatchelor.com./prelim/index.html, my rounded corners are missing

thanks
Apr 2 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.