Link to home
Start Free TrialLog in
Avatar of littlemissg
littlemissgFlag for Ireland

asked on

CSS footer div and floating images in above div not expanding div

Hi, I have a div layout with header, body and footer, the usual where the body is varying heights and the footer div is designed to always stick to the bottom of the page.

The body div contains a left side bar navigation bar which floats right and a right div news bar which floats right.  Its an elastic style design so.

It all works very well until I introduce images into the centre body div....

If I do not give them any class the images push the height of the body div no problem and therefore push the footer to the bottom, the problem is because I want an elastic design that the images are viewed more along side each other if the user has a monitor or resollution that allows this I give a class of float left to the images , then the body div they are contained within does not expand and therefore the footer does not push down.

The floatleft div I am using just has {float:left; margin:1em] in it

regards
HTML BELOW:

<body>
<div id="wrapper">
<div id="headertext">
<!-- end of headertext div --></div>
<div id="mainbody">
<div id="leftsidebar">
----Navigation bar goes here ----
<!-- end of left side bar div--></div>
<div id="rightsidebar">
  <h1>LATEST NEWS</h1>
  <!-- end of sidebar div --></div>
  <div id="maintext"><!-- InstanceBeginEditable name="MainBodyText" -->
<p> Main content text here</p>
 <p><img src="photos/image2.jpg" alt="Kate Cooper 2" width="228" height="343" class="floatleft"><img src="photos/image1.jpg" alt="Joseph Ribkoff 2a" width="228" height="343" class="floatleft"></p>
<!-- end of maintext div --></div>
 <!-- end of mainbody div --></div>
 <div id="footer">Footer text 
<!-- End of Footer Div--> </div >
<!-- end of wrapper div --></div>
</body>


CSS BELOW:

/* CSS Document */

body{
background-color:#C06;
background-image:url(images/stripes-slice.jpg);
margin:0;
padding:0;
height:100%;
}

img{border-style:none;}
a:link img, a:vlink img and a:alink img{border-style:none;}


#wrapper{
min-height:100%;
height:auto;
height:100%;
width:100%;
margin:0 auto 4em;
padding:0;
}

#wrapper #navigation tr td {
	text-align: center;
	display: block;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	position: relative;
	width: auto;
}

#headertext{
	position:relative;
	top:10px;
	background-image:url(images/lacreme-heading.png);
	width:390px;
	height:120px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

#mainbody{
	position:relative;
	top:30px;
	margin-left:2%;
	margin-right:2%;
	width:95%;
	background-color:#cc0066;
	display:block;
	
}


#leftsidebar{
	float:left;
	margin-top:20px;
	margin-left:10px;
	width: 200px;
	padding:0;
	border:medium;
	border-color:#333;
	
}
#rightsidebar{
	font-family:Andalus; color:#FFF; size:13;
	float:right;
	margin-top:10px;
	margin-right:10px;
	width: 230px;
	padding:0;
	position: relative;
	top:0px;
	line-height: 23px;
	text-align: center;
}

	
#maintext{
	margin-left:230px;
	margin-right:260px;
	Font-family:Verdana, sans-serif, "Trebuchet MS";
	color:#ffffff;
	font-size:12px;
	padding-top:10px;
	line-height:120%;
	height: 100%;
    
}

img.floatRight { 
    float: right; 
    margin: 10px; 
}
img.floatleft { 
    float:left; 
    margin: 1em; 
}

img.centre{
	margin-left:auto; margin-right:auto;
	display:block;
}

#footer{
	margin-bottom:10px;
	text-align:center;
	margin-left:10px;
	margin-right:10px;
	Font-family:Verdana, Geneva, sans-serif;
	Font-size:11px;
	color:#000000;
	background-color:#FFF;
	padding:5px;
	font-weight: bold;
	line-height:125%;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of rbudj
rbudj
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of littlemissg

ASKER

Hi thanks I actually just thought of this or similar before your reply I added a clear both div just before close of div containing floating images and this worked.  Probably same as your suggestion did, so thanks the clear:both is the answer