Automatically make the page grow with content

D

dembo1305

New Member
Alright i'm somewhat new to web design, infact this is my first page. But I know a few of the basics. I know most of the basic stuff of html and css, but I don't know how to make a page automatically extend itself as I add more content.

Basically I don't want to use overflow:auto but I want the whole page to grow, not a fixed page that just has scroll bars inside the page, ex: i don't want two vertical scroll bars for the page..
 
Last edited:
D

dembo1305

New Member
I think that did fix it, but now the pictures go down but the move over..
I have a vertical spry menu floated left and the my body is floated right and the pictures are wrapping under the spry menu..

any ideas how to fix that?
 
ronaldroe

ronaldroe

Super Moderator
Staff member
so instead of height, use min-height? that will make it be a certain size and get bigger if needed?
Click to expand...

That's right.

I'd love to help you. Just need to see the code and, if possible a screenshot of the offending page.
 
D

dembo1305

New Member
kd2xl2.png


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Forest City Travel Baseball</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../FCBB.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header-wrapper"><!-- TemplateBeginEditable name="Header" -->
<div id="header">Forest City Travel Baseball
</div><!-- TemplateEndEditable -->

<div id="logo"><img src="../logo.png" width="228" height="153" alt="logo" />
</div>
</div>

<div id="navigation">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="../index.html">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="../locations.html">Locations</a>
<ul>
<li><a href="../crowepark.html">Crowe Park</a></li>
<li><a href="../dunbar.html">Dunbar</a></li>
<li><a href="../mcnair.html">McNair</a></li>
</ul>
</li>
<li><a href="../tournaments.html">Tournaments</a>

</li>

<li><a class="MenuBarItemSubmenu" href="../directions.html">Directions</a>
<ul>
<li><a href="../crowepark-directions.html">Crowe Park</a></li>
<li><a href="../dunbar-directions.html">Dunbar</a></li>
<li><a href="../mcnair-directions.html">McNair</a></li>
</ul>
</li>
<li><a href="../sponsors.html">Sponsors</a></li>
</ul>
</div>
<!-- TemplateBeginEditable name="EditRegion4" -->
<div id="body-header">
</div>

<div id="body">
</div>
<!-- TemplateEndEditable -->

<div id="footer">
</div>


</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>


@charset "UTF-8";
/* CSS Document */

body{
background-color:brown;
}

#wrapper{
width:900px;
min-height:885px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
background-color:white;
padding:5px;
}

#header-wrapper{
background-color:#28266B;
height:165px;
padding-top:15px;
padding-left:15px;
padding-right:15px;
margin-bottom:5px;

}

#header{
float:left;
font-size:48px;
font-family:Tahoma, Geneva, sans-serif;
color:white;
padding-top:70px;

}

#logo{
float:right;

}

#navigation{
clear:both;
float:left;
background-image:url(nav_bg.png);
width:250px;
height:700px;

}

#body-header{
text-align:center;
font-size:36px;

}

#body{
margin-top:15px;
margin-left:15px;
margin-right:15px;
padding-left:15px;
float:right;
width:600px;
font-size:20px;
background-color:white;
width:600px;
min-height:700px;

}

#footer{
clear:both;
}
 
ronaldroe

ronaldroe

Super Moderator
Staff member
You have an extra </div> after the second <img> tag in the body section. I downloaded everything, and removed that, and it worked like a charm.
 
D

dembo1305

New Member
ronaldroe said:
You have an extra </div> after the second <img> tag in the body section. I downloaded everything, and removed that, and it worked like a charm.
Click to expand...

Thanks a lot, i'm glad I have that issue fixed! Right now i'm just trying to get something on the web for my dad. But later i'm going to try and dive into learning PHP and Javascript, along with trying to use photoshop files in there!

Should be fun but I think it could take a while!
 
You must log in or register to reply here.
Top