Content Wrapper auto height problem

February 5, 201016 yr

I am having trouble setting my maincontentwrapper height to auto. if i give it a fixed height it will move the footer down but I want to set it to auto

See screen attached

HTML

<!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" />
<title></title>
<link href="style/global.css" rel="stylesheet" type="text/css" media="all" />

<script type='text/javascript' src='/js/jquery-1.4.1.js'></script>
<script type='text/javascript' src='/js/slideshow.js'></script>

<script type="text/javascript">
$(function() {
   $("#billboard").showcase({
       css: { width: "853px", height: "234px" },
       animation: { type: "fade" },
       images: [
       { url:"images/slideshow/image1.jpg", description:"Welcome to B & M Property Maintenance" },
       { url:"images/slideshow/image2.gif", description:"Professional and Reliable Service" },
       { url:"images/slideshow/image3.gif", description:"Expert trades" },],
       navigator: { position:"top-right", orientation:"horizontal",
            css: { padding:"6px", margin:"5px 0px 0px 0px" }
           },
       titleBar: { css: { height:"25px" } }
   });
});


</script>

</head>

<body>

<div id="headerWrapper">
<div id="headerContent">

       <div id="logo"> <a href="http://www.bandmpropertymaintenance.co.uk"><img src="images/logo.jpg" width="405" height="124" alt="B & M Property Maintenance" title="B & M Property Maintenance" /></a>
 </div><!-- End Logo -->

     <div id="contactTel"> <img src="images/phoneIcon.jpg" alt="" width="36" height="36" align="left" /><h2>Call US Today</h2></div><!-- End of contactTel -->

     <div class="clear"></div>

 <div id="nav">
 <ul>
 		<li><a href="#">Home</a></li>
       <li class="current"><a href="#">About</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Contact</a></li>
 </ul>

 </div><!-- End of nav -->
</div><!-- End headerContent -->
</div><!-- End headerWarpper -->

<div id="mainContentWrapper">

 <div id="billboard"></div><!-- End billBoard -->

<div id="contentWrapper">

<div id="leftSideOuter">
<div id="leftSideInner">
<div class="contentBoxHeader"><h3>About B&M Property Maintenance</h3></div><!-- end contentBoxHeader -->

<p>Providing full and comprehensive property maintenance solutions for all our customers</p>

<p>We pride ourselves on offering a prompt, professional and courteous service, coupled with high quality workmanship and attention to detail.</p>

<p>We understand the importance of liaising fully with our clients and customers to obtain the best possible conclusion to their particular project, however large or small.</p>

<p>It is this high level of service that allows us to obtain new and additional works through referrals from existing customers and gives new customers confidence in choosing a company that can carry out works to their complete satisfaction.</p>

<p>We aim to Perform - Deliver - Improve</p>

<p><strong>NOTE: Add Picture Here</strong></p>


</div><!-- End Left Side Inner -->
</div><!-- End Left Side Outer -->


<div id="rightSideOuter">
<div id="rightSideInner">


<p>Providing full and comprehensive property maintenance solutions for all our customers</p>

<p>We pride ourselves on offering a prompt, professional and courteous service, coupled with high quality workmanship and attention to detail.</p>

<p>We understand the importance of liaising fully with our clients and customers to obtain the best possible conclusion to their particular project, however large or small.</p>


</div><!-- End right Side Inner -->
</div><!-- End right Side Outer -->

</div><!-- End contentWrapper -->
<div id="footerContainer"></div>
</div><!-- End mainContentWrapper -->



</body>
</html>

CSS

/* Resets*/

* {
padding: 0px;
margin: 0px;
}

a {
padding: 0px;
border:none;
}

img {
padding: 0px;
border:none;
margin: 0px;
}

p {
font-family:Georgia, "Times New Roman", Times, serif;
padding: 5px 10px 5px 10px;
font-size:12px;	
}

.clear {
clear: both;
}







/*Typeography*/

#headerWrapper #headerContent #contactTel h2 {
text-align:right;
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
color: #d02600;
margin: 0px;
padding: 20px 10px;
}

#leftSideOuter #leftSideInner .contentBoxHeader h3 {
font-size: 12px;
padding: 12px 0px 0px 10px;
font-family:Georgia, "Times New Roman", Times, serif;
color: #ecf4fc;
}

#leftSideOuter #leftSideInner p {
font-family:Georgia, "Times New Roman", Times, serif;
padding: 5px 10px 5px 10px;
font-size:12px;
}







#headerWrapper #headerContent #contactTel img {
margin: 0px;
padding: 15px 0px 0px 0px;
}









/* Page Structure*/

#headerWrapper {
height: 117px;
width: 100%;
border-bottom: #d1d1d1; border-bottom-style:solid; border-bottom-width: 1px;
border-top: #3764a5; border-top-style:solid; border-top-width: 10px;
background-color: #dbe9fd;

}

#headerContent {
width: 853px;
height: 127px;
margin: 0 auto 0 auto;
position: relative;
}

#logo {
height: 124px;
width: 405px;
position: absolute;
left: 0px;
top: 4px;
}

#contactTel {
width: 300px;
height: 50px;
float: right;
}

#nav {
width: 400px;
height: 50px;
float: right;
padding-top: 18px;
}

#billboard {
	margin: 15px auto 0 auto;
	width: 853px;
	height: 234px;
	background-color:#FFF;
	background-repeat: no-repeat;
}

#mainContentWrapper {
width: 100%;
height: auto;
background-image:url(../images/mainContentBG.jpg); background-repeat: repeat-x;
border-top: #ffffff; border-top-style:solid; border-top-width: 1px;
background-color:#FFF;
}

#contentWrapper {
margin: 32px auto 0 auto;
width: 853px;
height: auto;
}

#leftSideOuter {
width: 584px;
height: auto;
float:left;
margin-right: 15px;
border: #dcdbdb solid 1px;
}

#leftSideInner {
border: #FFF solid 1px;
height: auto;
background-color:#FFF;
background-image:url(../images/leftContentBoxBG.jpg);
background-repeat: repeat-x;
background-position: bottom left;
position:relative;
padding-top: 50px;
}

#rightSideOuter {
width: 250px;
height: auto;
float:left;
background-color:#999;
border: #c5daf6 solid 1px;
}

#rightSideInner {
background-color:#e8f1fc;
border: #FFF solid 1px;
height: auto;
}

.contentBoxHeader {
width: 263px;
height: 42px;
position: absolute;
background-image:url(../images/contentBoxHeader.jpg);
background-repeat: none;
background-position:left;
left: -8px;
top: 5px;
}

#footerContainer {
width: 853px;
height: 25px;
background-color:#000;
margin: 0 auto 0 auto;
}








/* Unordered List */

#nav ul {
padding: 21px 0px 0px 40px;
}

#nav ul li {
float:left;
list-style: none;
margin: 0px 1px 0px 1px;
background-image:url(../images/navButton.jpg);
width: 85px;
height: 28px;
}

#nav ul li a {
display:block;
text-align:center;
padding: 5px 0px 6px 0px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color: #FFF;
}





/* Nav Anchor Link styling */

#nav ul li A:link {
text-decoration: none;
}

#nav ul li A:visited {
text-decoration:none;
}

#nav ul li A:active {
}

#nav ul li A:hover {
text-decoration: none;
background-image:url(../images/navButtonHover.jpg);
}

#nav ul .current {
background-image:url(../images/navButtonCurrent.jpg);
}

February 5, 201016 yr

You want <div class="clear"></div>

just before </div>

that should do it

February 5, 201016 yr

Author

You want <div class="clear"></div>

just before </div>

that should do it

Thankyou. That did the trick

Content Wrapper auto height problem

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)