We help IT Professionals succeed at work.
Get Started

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

littlemissg
littlemissg asked
on
818 Views
Last Modified: 2013-12-25
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

Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE