Avatar of littlemissg
littlemissg
Flag 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

Web DevelopmentHTMLCSS

Avatar of undefined
Last Comment
littlemissg

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
rbudj

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck