Slickwilly9
09-17-2007, 10:53 AM
I can't get my container to extend down with the content section of my page. I am pretty sure it is because of the floats which are in my content. I read that FF doesn't recognize the <br> tags. Any thoughts on other options to get the container to extend? It does validate btw.
HTML:
<style type="text/css">
#container
{
margin: 0 auto;
background-image: url(images/container_bg.jpg);
background-repeat: repeat-y;
height: 1000px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img class="logo" src="images/lahacienda_logo_header.png" alt="Lahacienda Logo" />
</div>
<div id="beauty">
<img src="images/beauty_UTtower.jpg" alt="UT Tower Beauty Shot"/>
</div>
<div id="navbar">
<ul id="menu">
<li><a href="index.htm" title="Title Here">Home</a></li>
<li><a href="accommodations.htm">Accommodations</a></li>
<li class="parent"><a href="amenities.htm">Amenities</a>
<ul>
<li><a href="#" title="Title Here">Sub Item</a></li>
<li><a href="#" title="Title Here">Another Sub Item</a></li>
<li><a href="#" title="Title Here">Sub Item</a></li>
</ul>
</li>
<li class="parent"><a href="rates.htm">Rates</a>
<ul>
<li><a href="#" title="Title Here">Sub Item</a></li>
<li><a href="#" title="Title Here">Another Sub Item</a></li>
<li><a href="#" title="Title Here">Sub Item</a></li>
</ul>
</li>
<li class="parent"><a href="aboutus.htm">About Us</a>
<ul>
<li><a href="#" title="Title Here">Sub Item</a></li>
<li><a href="#" title="Title Here">Another Sub Item</a></li>
<li><a href="#" title="Title Here">Sub Item</a></li>
</ul>
</li>
<li><a class="reserve" href="reservations.php">Reservations</a></li>
<li><a href="layout.htm">Layout</a></li>
<li><a href="events.php">Events</a></li>
<li class="parent"><a href="attractions.htm">Attractions</a>
<ul>
<li><a href="#" title="Title Here">Sub Item</a></li>
<li><a href="#" title="Title Here">Another Sub Item</a></li>
<li><a href="#" title="Title Here">Sub Item</a></li>
</ul>
</li>
<li><a href="directions.htm">Directions</a></li>
<li><a href="realestate.htm">Real Estate</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="content">
<img style="margin-left:35px;" src="images/home_heading.png" alt="Where Living is Easy...Leaving is Hard" />
<p>Conveniently nestled in the heart of the beautiful Texas Hill Country, <span class="highlight">La Hacienda RV Resort</span> and Cabins is the perfect hub for all of your Central Texas adventures. We are just minutes away from Lake Travis, the premier recreational lake in Texas. Outdoor enthusiast may enjoy an afternoon of golf or rent your own personal watercraft to cruise or fish with a guide at majestic Lake Travis.
<img class="right_pics" src="images/home_signpic.png" alt="La Hacienda Front Sign"/>
You will be awed by the natural phenomenon of Hamilton Pool and West Cave Preserve! Austin's blissful charm and sophistication offers world class shopping, spectacular live music, an amazing variety of restaurants, numerous cultural events and miles of natural beauty that will soon have a place in your traveling heart for years to come.
<br /><br />Our RV Park sits on 35 acres of peaceful and serene surroundings with endless activities nearby. Fresh country breezes, green rolling hills and beautiful wild flowers surround our beautiful park. All of this awaits you at <span class="highlight">La Hacienda RV Resort</span>. Rallies and large groups are welcome.
<br /><br />
<img class="right_pics" src="images/home_wheelpic.png" alt="Wheel"/>
All of our premium sites have full hook-ups, cable television, local telephone service and high-speed wireless internet. Our beautiful park is surrounded by breathtaking, majestic oak trees.
<br /><br />While at <span class="highlight">La Hacienda RV Resort</span>, enjoy the relaxing family atmosphere where you can take a leisurely walk, relax under one of the many shade trees, or watch the deer feed in the meadows.</p>
<p><img class="left_pic" src="images/home_clubhousepic.png" alt="La Hacienda Clubhouse" /><a href="#VT"><img style="margin-right: 70px" class="right_pics" src="images/home_vtburst.png" alt="Click here for a Virtual Tour" /></a> At <span class="highlight">La Hacienda RV Resort</span>, the new rustic Clubhouse is available for groups and rallies. Itss also open for watching TV, relaxing, meeting new and old friends, or simply reading a good book.</p>
<a href="#eNews"><img style="margin-right: 200px;" class="right_pics" src="images/home_enews.png" alt="Sign Up for our eNewsletter"/></a>
<div style="clear:both;"></div>
<div id="bottom_nav">
<a href="sitemap.htm">Site Map</a>::<a href="index.htm">Home</a>::<a href="accommodations.htm">Accommodations</a>::<a href="amenities.htm">Amenities</a>::<a href="rates.htm">Rates</a>::<a href="aboutus.htm">About Us</a>::<a href="layout.htm">Layout</a>::<a href="events.htm">Events</a>::<a href="amenities.htm">Amenities</a>::<a href="direction.htm">Direction</a>::<a href="realestate.htm">Real Estate</a>
</div>
</div>
</div>
</body>
</html>
CSS
/* CSS Document */
body
{
background: url(../images/body_bg.jpg);
margin-top:0px;
}
#container
{
width: 960px;
border: 0px solid;
height: 1000px;
margin: 0 auto;
}
#header{
background: url(../images/header_bg.jpg) no-repeat;
width: 950px;
height: 227px;
margin: 0 auto;
}
#header .logo
{
border: 0px;
margin-left: 50px;
margin-top: 25px;
}
#beauty
{
width: 950px;
margin: 0px;
padding: 0px;
height: 458px;
margin: 0 auto;
}
#beauty img
{
float:left;
}
#navbar
{
}
/*
#navbar a
{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
border: 0px solid #332b1f;
text-decoration: none;
color: #000000;
margin: 0px;
float: left;
padding-top: 10px;
padding-right: 8px;
padding-bottom: 11px;
padding-left: 10px;
}
#navbar a.reserve
{
font-family: Georgia, serif;
font-size: 14px;
border: 4px outset #3f2102;
text-decoration: none;
color: #e9c64a;
background: #3f2102 no-repeat;
text-transform: uppercase;
font-weight: bold;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 7px;
}
#navbar a.reserve:hover
{
border: 4px inset #3f2102;
color: #F7F3DE;
background:#3f2102 left no-repeat;
font-family: Georgia, serif;
font-size: 14px;
border: 4px outset #3f2102;
text-decoration: none;
background: #3f2102 no-repeat;
text-transform: uppercase;
font-weight: bold;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 7px;
}
#navbar a:hover
{
border-bottom:1px dashed #e9c64a;
padding-bottom:2px;
} */
#content
{
background: url(../images/content_bg.jpg);
width: 950px;
margin: 0 auto;
}
#content p
{
margin-left: 30px;
width: 875px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
line-height: 25px;
letter-spacing: 3px
word-spacing: 7px;
text-align: left;
font-style: oblique;
}
.highlight
{
color: #b13a21;
}
.right_pics
{
float:right;
margin-top: 15px;
margin-left: 10px;
border: 0px;
}
.left_pic
{
float:left;
margin-top: 15px;
margin-right: 10px;
}
Thanks.
Seth
HTML:
<style type="text/css">
#container
{
margin: 0 auto;
background-image: url(images/container_bg.jpg);
background-repeat: repeat-y;
height: 1000px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img class="logo" src="images/lahacienda_logo_header.png" alt="Lahacienda Logo" />
</div>
<div id="beauty">
<img src="images/beauty_UTtower.jpg" alt="UT Tower Beauty Shot"/>
</div>
<div id="navbar">
<ul id="menu">
<li><a href="index.htm" title="Title Here">Home</a></li>
<li><a href="accommodations.htm">Accommodations</a></li>
<li class="parent"><a href="amenities.htm">Amenities</a>
<ul>
<li><a href="#" title="Title Here">Sub Item</a></li>
<li><a href="#" title="Title Here">Another Sub Item</a></li>
<li><a href="#" title="Title Here">Sub Item</a></li>
</ul>
</li>
<li class="parent"><a href="rates.htm">Rates</a>
<ul>
<li><a href="#" title="Title Here">Sub Item</a></li>
<li><a href="#" title="Title Here">Another Sub Item</a></li>
<li><a href="#" title="Title Here">Sub Item</a></li>
</ul>
</li>
<li class="parent"><a href="aboutus.htm">About Us</a>
<ul>
<li><a href="#" title="Title Here">Sub Item</a></li>
<li><a href="#" title="Title Here">Another Sub Item</a></li>
<li><a href="#" title="Title Here">Sub Item</a></li>
</ul>
</li>
<li><a class="reserve" href="reservations.php">Reservations</a></li>
<li><a href="layout.htm">Layout</a></li>
<li><a href="events.php">Events</a></li>
<li class="parent"><a href="attractions.htm">Attractions</a>
<ul>
<li><a href="#" title="Title Here">Sub Item</a></li>
<li><a href="#" title="Title Here">Another Sub Item</a></li>
<li><a href="#" title="Title Here">Sub Item</a></li>
</ul>
</li>
<li><a href="directions.htm">Directions</a></li>
<li><a href="realestate.htm">Real Estate</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="content">
<img style="margin-left:35px;" src="images/home_heading.png" alt="Where Living is Easy...Leaving is Hard" />
<p>Conveniently nestled in the heart of the beautiful Texas Hill Country, <span class="highlight">La Hacienda RV Resort</span> and Cabins is the perfect hub for all of your Central Texas adventures. We are just minutes away from Lake Travis, the premier recreational lake in Texas. Outdoor enthusiast may enjoy an afternoon of golf or rent your own personal watercraft to cruise or fish with a guide at majestic Lake Travis.
<img class="right_pics" src="images/home_signpic.png" alt="La Hacienda Front Sign"/>
You will be awed by the natural phenomenon of Hamilton Pool and West Cave Preserve! Austin's blissful charm and sophistication offers world class shopping, spectacular live music, an amazing variety of restaurants, numerous cultural events and miles of natural beauty that will soon have a place in your traveling heart for years to come.
<br /><br />Our RV Park sits on 35 acres of peaceful and serene surroundings with endless activities nearby. Fresh country breezes, green rolling hills and beautiful wild flowers surround our beautiful park. All of this awaits you at <span class="highlight">La Hacienda RV Resort</span>. Rallies and large groups are welcome.
<br /><br />
<img class="right_pics" src="images/home_wheelpic.png" alt="Wheel"/>
All of our premium sites have full hook-ups, cable television, local telephone service and high-speed wireless internet. Our beautiful park is surrounded by breathtaking, majestic oak trees.
<br /><br />While at <span class="highlight">La Hacienda RV Resort</span>, enjoy the relaxing family atmosphere where you can take a leisurely walk, relax under one of the many shade trees, or watch the deer feed in the meadows.</p>
<p><img class="left_pic" src="images/home_clubhousepic.png" alt="La Hacienda Clubhouse" /><a href="#VT"><img style="margin-right: 70px" class="right_pics" src="images/home_vtburst.png" alt="Click here for a Virtual Tour" /></a> At <span class="highlight">La Hacienda RV Resort</span>, the new rustic Clubhouse is available for groups and rallies. Itss also open for watching TV, relaxing, meeting new and old friends, or simply reading a good book.</p>
<a href="#eNews"><img style="margin-right: 200px;" class="right_pics" src="images/home_enews.png" alt="Sign Up for our eNewsletter"/></a>
<div style="clear:both;"></div>
<div id="bottom_nav">
<a href="sitemap.htm">Site Map</a>::<a href="index.htm">Home</a>::<a href="accommodations.htm">Accommodations</a>::<a href="amenities.htm">Amenities</a>::<a href="rates.htm">Rates</a>::<a href="aboutus.htm">About Us</a>::<a href="layout.htm">Layout</a>::<a href="events.htm">Events</a>::<a href="amenities.htm">Amenities</a>::<a href="direction.htm">Direction</a>::<a href="realestate.htm">Real Estate</a>
</div>
</div>
</div>
</body>
</html>
CSS
/* CSS Document */
body
{
background: url(../images/body_bg.jpg);
margin-top:0px;
}
#container
{
width: 960px;
border: 0px solid;
height: 1000px;
margin: 0 auto;
}
#header{
background: url(../images/header_bg.jpg) no-repeat;
width: 950px;
height: 227px;
margin: 0 auto;
}
#header .logo
{
border: 0px;
margin-left: 50px;
margin-top: 25px;
}
#beauty
{
width: 950px;
margin: 0px;
padding: 0px;
height: 458px;
margin: 0 auto;
}
#beauty img
{
float:left;
}
#navbar
{
}
/*
#navbar a
{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
border: 0px solid #332b1f;
text-decoration: none;
color: #000000;
margin: 0px;
float: left;
padding-top: 10px;
padding-right: 8px;
padding-bottom: 11px;
padding-left: 10px;
}
#navbar a.reserve
{
font-family: Georgia, serif;
font-size: 14px;
border: 4px outset #3f2102;
text-decoration: none;
color: #e9c64a;
background: #3f2102 no-repeat;
text-transform: uppercase;
font-weight: bold;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 7px;
}
#navbar a.reserve:hover
{
border: 4px inset #3f2102;
color: #F7F3DE;
background:#3f2102 left no-repeat;
font-family: Georgia, serif;
font-size: 14px;
border: 4px outset #3f2102;
text-decoration: none;
background: #3f2102 no-repeat;
text-transform: uppercase;
font-weight: bold;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 7px;
}
#navbar a:hover
{
border-bottom:1px dashed #e9c64a;
padding-bottom:2px;
} */
#content
{
background: url(../images/content_bg.jpg);
width: 950px;
margin: 0 auto;
}
#content p
{
margin-left: 30px;
width: 875px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
line-height: 25px;
letter-spacing: 3px
word-spacing: 7px;
text-align: left;
font-style: oblique;
}
.highlight
{
color: #b13a21;
}
.right_pics
{
float:right;
margin-top: 15px;
margin-left: 10px;
border: 0px;
}
.left_pic
{
float:left;
margin-top: 15px;
margin-right: 10px;
}
Thanks.
Seth