Web Design Forum: Content Wrapper auto height problem - Web Design Forum

Jump to content

WDF

WDF Premium Memberships

Reseller Hosting

View New Content

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Content Wrapper auto height problem

#1 msaunders26

Forum Newcomer

Group: Members
Posts: 11
Joined: 01-January 10
Reputation: 0

Posted 05 February 2010 - 09:08 PM

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

Attached File

Capture.JPG (75.68K)
Number of downloads: 11

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 &amp; 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 &amp; M Property Maintenance" title="B &amp; 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);
}

0

Back to top of the page up there ^

#2 mteam

Web Guru

Group: Members
Posts: 1,814
Joined: 07-November 09
Reputation: 244
Gender:Male
Location:Manchester
Experience:Nothing
Area of Expertise:Nothing

Posted 05 February 2010 - 10:26 PM

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

that should do it

0

Back to top of the page up there ^

#3 msaunders26

Forum Newcomer

Group: Members
Posts: 11
Joined: 01-January 10
Reputation: 0

Posted 05 February 2010 - 10:29 PM

mteam, on 05 February 2010 - 10:26 PM, said:

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

that should do it

Thankyou. That did the trick

0

Back to top of the page up there ^

← Webdesign Stock Images
Website Design and Layout
How do I center with in a Background Image? →

Share this topic:

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users

Time Now: Feb 10 2012 01:59 AM

Community Forum Software by IP.Board