CSS Float not expanding div

jack.mitchell · 22 Jul 2011 at 20:39

This is the page in question:

http://devel.embed.me.uk/cccms/index.php?page=1

As you can see the image is not expanding the (white) div that it is located in to it's full length. Is there anyway to force this? It only happens when I use float. Here is the class that is applied to the image:

Code:

img.imageLeft {
  float:left;
  margin-right: 20px;
  margin-bottom: 5px;
  display:block;
}

and the page source:

Code:

<div id="bodyTop">		
</div>
<div id="body">
Welcome to <strong>CCCMS DEVEL</strong><br />
<br />
<img class='imageLeft' style='width:700px;' src='userImages/pat.jpg' />			</div>
<div id="footer">
<p></p></div>
</div>

Thanks in advance!

analog · 22 Jul 2011 at 21:40

Stick overflow: auto; within the body ID should sort it.

Take a look here it might clear some things up for you.

jack.mitchell · 22 Jul 2011 at 21:48

Perfect, that link did clear up some hazy parts.

Cheers!

buzzlightweight · 23 Jul 2011 at 18:24

may i say the black text doesnt work well with the blue background.

jack.mitchell · 25 Jul 2011 at 09:15

Haha, it most certainly doesn't! I use the garish colours so I can easily identify containers and see what I'm working with or which part of the CSS is mis-behaving.