I have a problem at the moment using style sheets, my inner container, no matter how much how much content is in it always seems to span longer than the page itself.Is it possible just to let the container expand to the size of the content in it.
body
{
background-color: #800036;
min-width : 760px;
text-align : center;
margin : 0;
padding : 10px;
background-repeat : repeat-x;
font : small arial,helvetica,verdana,sa
ns serif;
height:auto;
}
#wrapper
{
width : 760px;
margin-left: auto;
margin-right:auto;
background-color : #FFFFD2;
color : #800036;
height: 100%;
padding : 10px 10px 10px 10px;
}
#header {
padding-top:20px;
padding-bottom:20px;
background-color: #800036;
}
#nags_logo_left {
position:absolute;
left : 145;
top :33;
/* border-top-width:5px;
border-top-color: #800036;
border-left-width:5px;
border-left-color: #800036;
border-right-width:5px;
border-right-color: #800036;
border-bottom-width:5px;
border-bottom-color: #800036; */
}
#nags_logo_right {
float:right;
border-top-width:5px;
border-top-color: #800036;
border-left-width:5px;
border-left-color: #800036;
border-right-width:5px;
border-right-color: #800036;
border-bottom-width:5px;
border-bottom-color: #800036;
}
#wrapper a {
color : #800036;
}
#header-bottom
{
padding : 0px;
border-top : 5px solid #800036;
border-bottom : 5px solid #800036;
}
#header-bottom ul
{
padding : 0px;
text-align :right;
margin : 0;
}
#header-bottom li
{
display :inline;
background-color : #FFFFD2;
padding : 0;
}
#tagline
{
font-weight : bold;
font-style :italic;
float:left;
color : #FFFFD2;
}
#f1 {
padding : 0px;
border-bottom : 5px solid #800036;
clear:right;
width : 100%
}
#topbuttonpadding {
padding-top: 5px;
}
#main {
position:relative;
MARGIN-TOP:0PX;
top:0;
left:0;
width:100%;
}
#content {
margin: 0 580px 0 0;
padding : 0px;
text-align:left;
}
#selectorimage {
float:left;
}
#selectorimagepadd {
padding-right:5px;
}
#bodytext {
position:absolute;
top:0;
right:0;
width:605px;
text-align:justify;
/* border-left : 3px solid ; */
padding:0px 5px 0px 10px;
font-size : 13px;
font-family:century gothic;
}
and the associative html
<head>
<link rel="stylesheet" type="text/css" href="c:\inetpub\wwwroot\n
ags_css\na
gsindex.cs
s"</>
</head>
<body>
<div id="wrapper">
<div id ="header">
<img src="./nags_img/nags_img_i
ndex_heade
r.gif" alt="The Nags Head Inn"/>
</div>
<div id="header-bottom">
<p id ="tagline"> The Nags Head Inn </p>
<ul>
<li> <a href="">Home</a> | </li>
<li> <a href="">Food</a> | <li>
<li> <a href="">About US</a> | </li>
<li> <a href="">Location</a> |</li>
<li> <a href="">Contact Us</a> </li>
</ul>
</div> <!-- header-bottom -->
<!-- main sections -->
<div id ="main">
<div id="content">
<div id ="topbuttonpadding">
<div id = "buttonspacer">
<img src="./nags_buttons/butt_h
ome_page.g
if"
onmouseover="this.src = './nags_buttons/butt_home_
page.gif';
"
onmouseout="this.src = './nags_buttons/butt_home_
page.gif';
"
</>
</div>
</div>
<div id= "buttonspacer">
<img src="./nags_buttons/butt_f
ood.gif"
onmouseover="this.src = './Nags_buttons/butt_food_
hover.gif'
;"
onmouseout="this.src = './nags_buttons/butt_food.
gif';"
</>
</div>
<div id="buttonspacer">
<img src="./nags_buttons/butt_a
bout_us.gi
f" id="buttonspacer"
onmouseover="this.src = './nags_buttons/butt_About
_us_hover.
gif';"
onmouseout="this.src = './nags_buttons/butt_about
_us.gif';"
</>
</div>
<div id = "buttonspacer">
<img src="./nags_buttons/butt_l
ocation.gi
f" id="buttonspacer"
onmouseover="this.src = './nags_buttons/butt_locat
ion_hover.
gif';"
onmouseout="this.src = './nags_buttons/butt_locat
ion.gif';"
</>
</div>
<div id="buttonspacer">
<img src="./nags_buttons/butt_c
ontact_us.
gif"
onmouseover="this.src = './nags_buttons/butt_conta
ct_us_hove
r.gif';"
onmouseout="this.src = './nags_buttons/butt_conta
ct_us.gif'
;"
</>
</div>
</div> <!--content -->
<div id ="bodytext">
<span class="firstletter"> <p>W</span>elcome to the Nags Head Inn Scalby. </p>
<p>Situated in the heart of the picturesque village of Scalby on the edge of the North
Yorkshire Moors.Scalby village is located approximately 2 miles north of the town of Scarborough where walks in the country or by the
meandering river are at your disposal. </p>
<div id= "imglineleft">
<img src="./nags_pictures/nags 006.jpg"width="180" height="100" />
<!-- onmouseover="this.src = './nags_buttons/butt_conta
ct_us_hove
r.gif';"
onmouseout="this.src = './nags_buttons/butt_conta
ct_us.gif'
;" -->
</div>
<p> The Nags Head Inn boats a comfortable lounge and bar room offering darts and dominoes and also available is a beer garden to the rear, to enjoy summer evenings. Occasionally music is played to create a warm and friendly atmosphere.</P>
<div id ="imglineright">
<img src="./nags_pictures/nags_
pics_home_
02.jpg" width="180" height="100" />
<!-- onmouseover="this.src = './nags_buttons/butt_conta
ct_us_hove
r.gif';"
onmouseout="this.src = './nags_buttons/butt_conta
ct_us.gif'
;" -->
</div>
<br>
<P>Let the crackle and the warmth of the open log fire and occasional soft music, entice you in. </p>
<p> A selection of cask beers are available </p>
<div id = "beer_list">
<ul>
<li> Black Sheep </li>
<li> John Smiths </li>
<li> Tetley Smooth </li>
</ul>
</div>
<div id ="f1">
</div>
</div> <!--body text-->
</div> <!--main-->
</div> <!--wrapper--!>
</body>
</html>
This my style sheet, and code
can anyone help please
Start Free Trial
