Stuck on few CSS issues mid-build
Aug 15, 2012 4:46 AM
Hi all,
Spend the last week making some good progress with a website build, but I’ve hit a few stumbling blocks I hoped the CSS pros out there might be able to help with please!
<div id="body_container">
I’ve tried setting this div’s height to 100% so it expands accordingly (set to 800px right now), but when I do this it ‘disappears’ from view – i.e. the background colour vanishes and all its contents appear on a white background which is applied to the #body_container_fullwidth. Any ideas what I’m doing wrong?
<div id="left_content">
Why isn’t this expanding in height to accommodate the youtube video? It’s height is set to 100%.
<hr class="leftcontent1"></hr>
I’m seeing this in Dreamweaver but not in FF or IE preview. Any ideas?
<img class="rightbutton" src="Images/right_button.png" width="24" height="24" alt="More" />
I’ve put this image in the <div id="right_content_greystrip"> container but it’s appearing below and I can’t work out why?
Sorry it’s quite a few issues all at once – I’ve been over each time and time again but am thoroughly stuck!
Thanks in advance guys 
---
<!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="PageTitle" -->
<title></title>
<!-- TemplateEndEditable -->
<link href="CSS/style_sheet.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17957242-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="logo_address_container_fullwidth">
<div id="logo_address_container">
<div id="logo_container"><a href="Templates/test.com"><img src="Images/thewharfhouse-logo.png" width="359" height="41" alt="The Wharf House" /></a></div>
<div id="address_container">
<p class="headeraddress">Over, Gloucester, GL2 8DB | 01452 332 900 | <a href="Templates/www.test.com">enquiries@thewharfhouse.co.uk</a></p>
</div>
</div>
</div>
<div id="nav_container_fullwidth">
<div id="nav_container">
<p class="nav"><a href="Templates/www.test.com">Home</a> • <a href="Templates/www.test.com">Restaurant</a> • <a href="Templates/www.test.com">Accommodation</a> • <a href="Templates/www.test.com">Online Shop</a> • <a href="Templates/www.test.com">News & Events</a> • <a href="Templates/www.test.com">Functions & Weddings</a> • <a href="Templates/www.test.com">Local Tourism</a> • <a href="Templates/www.test.com">Contact</a></p>
</div>
</div>
<div id="header_image_container_fullwidth">
<div id="header_image_container">
<!-- TemplateBeginEditable name="header-image" --><img src="Images/header-test.jpg" width="1100" height="350" alt="Header test" /><!-- TemplateEndEditable --></div>
</div>
<div id="body_container_fullwidth">
<div id="body_container">
<div id="body_container_left">
<div id="left_content">
<h1 class="leftcontent1">Welcome to The Wharf House</h1>
<hr class="leftcontent1"></hr>
<h2>Welcome to the award winning waterside Restaurant and Accommodation, situated in Over on the edge of the historic city of Gloucester.</h2>
<p>Welcome to The Wharf House Waterside Restaurant with Rooms, set in the perfect riverside location. Sample our culipxary delights, which have recently been awarded a highly acclaimed red rosette by the AA or enjoy a stay in our beautiful rooms awarded with 4 stars by the AA.</p>
<p>Each of our 6 bedrooms provide wonderful views of the River Severn, or our newly restored Canal Basin. All rooms are equipped with wide-screen TV’s, walk in WiFi, and private en suite facilities, some with whirl-pool baths.</p>
<p>All rooms include breakfast the following morning. Breakfast is served between 7.30am-9.30am Monday to Friday and 8.30am-9.45am Saturday and Sunday
(earlier if required at a supplement of £5 per room per half hour).</p>
<p>All profits made by The Wharf House are used for the promotion and restoration of the Herefordshire and Gloucestershire Canal Trust.</p>
</div>
<div id="left_content">
<h1 class="leftcontent2">The Wharf House video showcase</h1>
<div id="youtube">
<iframe width="380" height="214" src="http://www.youtube.com/embed/f8UT6QJIMfE" frameborder="0" allowfullscreen></iframe>
</div>
<p>Take a look inside The Wharf House restaurant and rooms in Over, near Gloucester, with naration from Natasha Turney at the restaurant.</p>
</div>
</div>
<div id="body_container_right">
<div id="right_content">
<h1 class="rightcontent">Book your stay</h1>
<img class="rightcontent" src="Images/right_content_test.png" width="120" height="90" alt="Test" />
<p>Check availability and book your stay in one of our luxurous individual rooms.</p>
<div id="right_content_greystrip">
<p class="right_content_greystrip"><a href="Templates/test.com">Check room availability</a></p>
<a href="Templates/test.com"><img class="rightbutton" src="Images/right_button.png" width="24" height="24" alt="More" /></a></div>
</div>
<div id="right_content">
<h1 class="rightcontent">Over Canal Festival 2012</h1>
<img class="rightcontent" src="Images/right_content_test.png" width="120" height="90" alt="Test" />
<p>Don’t miss the Over Canal Festival on Saturday 1 and Sunday 2 September 2012, featuring Prunella Scales and Timothy West, heritage boat processions, fun on the water, great food and drink, music and lots more!</p>
</div>
<div id="right_content">
<h1 class="rightcontent">Christmas 2012 menus available now</h1>
<img class="rightcontent" src="Images/right_content_test.png" width="120" height="90" alt="Test" />
<p>Turkey is banned for another year at The Wharf House, but instead you’ll find a tempting selection of courses sure to please even the pickiest eater in your party. Plus, a buffet menu is also available this festive season.</p>
</div>
</div>
</div>
</div>
<div id="top-footer_container_fullwidth">
<div id="top-footer_container">
<p class="footertop">The Wharf House, Over, Gloucester, GL2 8DB | 01452 332 900 |<a href="Templates/www.test.com"> enquiries@thewharfhouse.co.uk</a></p>
</div>
</div>
<div id="middle-footer_container_fullwidth">
<div id="middle-footer_container">
<div id="middle-footer_container_text">
<p class="footermiddle">Awards and accolades</p>
</div>
<div id="middle-footer_container_awardsaccolades_img"><img src="Images/aa-accommodation-logo.png" alt="AA 4 Star Guest Accommodation" width="63" height="100" class="awardsaccolades" /></div>
<div id="middle-footer_container_awardsaccolades_img"><img src="Images/aa-restaurant-logo.png" alt="AA Rosette Restaurant" width="64" height="100" class="awardsaccolades" /></div>
<div id="middle-footer_container_awardsaccolades_img"><img src="Images/green-tourism-silver-logo.png" alt="Silver Green Tourism" width="77" height="100" class="awardsaccolades" /></div>
<div id="middle-footer_container_text">
<p class="footermiddle">Social media links</p>
</div>
<div id="middle-footer_container_socialmedia_img"><a href="https://www.facebook.com/TheWharfHouse" target="_blank"><img src="Images/facebook-logo.png" alt="Facebook" width="109" height="41" class="socialmedia" /></a></div>
<div id="middle-footer_container_socialmedia_img"><a href="https://twitter.com/thewharfhouse" target="_blank"><img src="Images/twitter-logo.png" alt="Twitter" width="121" height="41" class="socialmedia" /></a></div>
</div>
</div>
<div id="bottom-footer_container_fullwidth">
<div id="bottom-footer_container">
<p class="footerbottom1"><a href="Templates/www.test.com">Home</a> • <a href="Templates/www.test.com">Restaurant</a> • <a href="Templates/www.test.com">Accommodation</a> • <a href="Templates/www.test.com">Online Shop</a> • <a href="Templates/www.test.com">News & Events</a> • <a href="Templates/www.test.com">Functions & Weddings</a> • <a href="Templates/www.test.com">Local Tourism</a> • <a href="Templates/www.test.com">Contact</a></p>
<p class="footerbottom2">All profits from The Wharf House will be used for the promotion and restoration of the Hereford and Gloucester Canal. © 2012.</p>
</div>
</div>
</body>
</html>
---
@charset "utf-8";
html {
min-height: 100%;
margin-bottom: 1px;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-right: 0px;
}
p {
font:Arial, Helvetica, sans-serif;
color: #666666;
font-size: 14px;
margin-bottom: 1.2em;
margin-top: 0em;
line-height: 1.4em;
text-align: left;
font-weight: normal;
margin-left: 15px;
margin-right: 15px;
}
p.headeraddress {
margin-bottom: 1.2em;
margin-top: 0em;
font:Georgia, "Times New Roman", Times, serif;
font-size: 15px;
text-align:left;
color: #666666;
}
p.nav {
margin-bottom: 1.2em;
margin-top: 0em;
font:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #FFF;
text-align:center;
}
p.nav a:link {
color: #FFF;
text-decoration: none;
}
p.nav a:visited {
text-decoration: none;
color: #FFF;
}
p.nav a:hover {
color: #FFF;
text-decoration: underline;
}
p.nav a:active {
color: #FFF;
text-decoration: underline;
}
p.footertop {
margin-bottom: 1.2em;
margin-top: 0em;
font:Georgia, "Times New Roman", Times, serif;
font-size: 15px;
text-align:center;
color: #666666;
}
p.footermiddle {
margin-bottom: 1.2em;
margin-top: 0em;
font:Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
text-align:right;
color: #666666;
}
img.awardsaccolades {
display: block;
margin-left: auto;
margin-right: auto;
}
img.socialmedia {
display: block;
margin-left: auto;
margin-right: auto;
}
p.footerbottom1 {
margin-bottom: 1.2em;
margin-top: 0em;
font:Georgia, "Times New Roman", Times, serif;
font-size: 15px;
text-align:center;
color: #666666;
}
p.footerbottom2 {
margin-bottom: 1.2em;
margin-top: 0em;
font:Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
text-align:center;
color: #666666;
}
img {
border: 0px;
}
h1.leftcontent1 {
font:Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #840000;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 0px;
font-weight:400;
}
h1.leftcontent2 {
font:Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #666666;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
font-weight:400;
}
h1.rightcontent {
font:Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #666666;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
font-weight:400;
}
img.rightcontent {
float:left;
margin-left: 15px;
margin-right: 12px;
}
#youtube {
float:left;
margin-left: 15px;
margin-right: 12px;
}
hr.leftcontent1 {
border: 1px;
width: 520px;
color: #840000;
height: 1px;
margin-left: 15px;
margin-top: 6px;
}
h2 {
font:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style:italic;
color: #666666;
margin-top: 0px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
font-weight:400;
}
a:link {
color: #840000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #840000;
}
a:hover {
color: #840000;
text-decoration: underline;
}
a:active {
color: #666666;
text-decoration: underline;
}
#logo_address_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color:#F1EACE;
margin: auto;
padding-top: 35px;
}
#logo_address_container {
width: 960px;
height: 74px;
background-color:#F1EACE;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#logo_container {
width: 359px;
height: 41px;
float:left;
padding-left: 20px;
}
#address_container {
width: 561px;
height: 20px;
float:left;
padding-left: 20px;
margin-top: 14px;
}
#nav_container_fullwidth {
width: 100%;
float:left;
background-color:#840000;
margin: auto;
padding: 0px;
}
#nav_container {
width: 960px;
height: 30px;
background-color:#840000;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
}
#header_image_container_fullwidth {
width: 100%;
height: 350px;
float:left;
background-color:#F1EACE;
margin: auto;
padding: 0px;
}
#header_image_container {
width: 1100px;
height: 100%;
background-color:#F1EACE;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#body_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color: #FFF;
margin: auto;
padding: 0px;
}
#body_container {
width: 960px;
height: 800px;
background-color:#F1EACE;
margin-left: auto;
margin-right: auto;
padding: 0px;
margin-top: 20px;
margin-bottom: 0px;
}
#body_container_left {
width: 580px;
background-color:#F1EACE;
float:left;
margin-left: 30px;
margin-top: 30px;
}
#body_container_right {
width: 290px;
background-color:#F1EACE;
float:right;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
}
#left_content {
width: 580px;
height: 100%;
background-color:#FFF;
box-shadow: 3px 3px 5px #999;
padding-top: 1px;
padding-bottom: 8px;
margin-bottom: 30px;
}
#right_content {
width: 290px;
height: 100%;
background-color:#FFF;
box-shadow: 3px 3px 5px #999;
padding-top: 1px;
padding-bottom: 10px;
margin-bottom: 30px;
}
#right_content_greystrip {
width: 290px;
height: 24px;
background-color:#DFDFDF;
float:left;
}
img.rightbutton {
float:right;
}
p.right_content_greystrip {
margin-bottom: 1.2em;
margin-top: 0em;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align:right;
padding-top: 1px;
margin-right: 5px;
}
p.right_content_greystrip a:link {
color: #840000;
text-decoration: none;
}
p.right_content_greystrip a:visited {
text-decoration: none;
color: #840000;
}
p.right_content_greystrip a:hover {
color: #840000;
text-decoration: underline;
}
p.right_content_greystrip a:active {
color: #840000;
text-decoration: underline;
}
#top-footer_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color: #E6D69C;
margin: auto;
padding: 0px;
font:Georgia, "Times New Roman", Times, serif;
padding-top: 20px;
}
#top-footer_container {
width: 960px;
height: 100%;
background-color:#E6D69C;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#middle-footer_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color: #F1EACE;
margin: auto;
padding: 0px;
border-top: 1px solid #840000;
border-bottom: 1px solid #840000;
font:Georgia, "Times New Roman", Times, serif;
}
#middle-footer_container {
width: 960px;
height: 140px;
background-color:#F1EACE;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#middle-footer_container_text {
width: 160px;
height: 40px;
margin-left: auto;
margin-right: auto;
float: left;
padding-top: 60px;
}
#middle-footer_container_awardsaccolades_img {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
float: left;
padding-top: 20px;
}
#middle-footer_container_socialmedia_img {
width: 130px;
height: 50px;
margin-left: auto;
margin-right: auto;
float: left;
padding-top: 48px;
}
#bottom-footer_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color: #E6D69C;
margin: auto;
padding: 0px;
font:Georgia, "Times New Roman", Times, serif;
}
#bottom-footer_container {
width: 960px;
height: 75px;
background-color:#E6D69C;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
