Div border overlaps float

HTML & CSS
1

I’ve set up a simple floating div with the following style


float: right;
width: 150px;
margin: 0 0 5px 10px;
padding: 5px;
background: #E0E4EB;
border: 1px #426BA4 solid;
font-size: 11px;

There is then some other content in the following div


padding: 0 0 10px 0;

Within that div I have another one that is used for quoting text as follows


background: #cccccc;
margin: 10px 15px 10px 15px;
border-top: 1px #aaaaaa dashed;
border-bottom: 1px #aaaaaa dashed;
padding: 5px;
font-style: italic;

The problem is that the inner div doesn’t obey the float, it continues across although the text within it does. I’ve attached an image of what I mean in case it helps. The blue section on the right is the floating div. The grey areas are the ones I would like to obey the margin around the float. I’ve tried changing display to inline but that just messes it up.

Any suggestions welcome

2

Hi,

Floats make room for themselves by applying padding to surrounding content so that the text wraps etc. However borders and backgrounds of the elements will continue as if the float doesn’t exist. Floats are basically removed from the flow except that they make a hole for themselves by moving the foreground elements around. They do not move the background or borders etc.

This results in the overlap as seen in your picture. IE6 does actually obey the margins and applies the background to the element as you have expected, however this is not the correct behaviour but usually the one most people want :(. Other browsers let the background and borders slide under the float.

You will just need to float the other columns as well and then you can apply the dimensions as required and the backgrounds and borders will be as usual.

Hope that helps.

Paul

3

Ah, bit of a shame that but I’m sure there’s a good reason for it. Unfortunately I can’t float the other column or I end up with all sorts of other layout problems so I’ll need to come up with something different in the design front to get the desired effect.
Thanks for your help Paul, it was a good explanation

4

Hi,

Well you can still do it without floats but justset a margin to clear the float as well. e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer{
 width:600px;
 margin:auto;
 background:#ffffcc;
}
#right{
 float:right;
 width:150px;
 min-height:400px;
 background:pink;
}
* html #right {height:400px;}
#left p{
 margin:25px 175px 25px 25px;
 background:blue;
 border:1px solid #000;
 padding:1em;
}
.clearer {
 height:1px;
 overflow:auto;
 margin-top:-1px;
 clear:both;
}
</style>
</head>
<body>
<div id="outer"> 
  <div id="right"> 
	<p>This is the right content</p>
  </div>
  <div id="left"> 
	<p>This is the left content:</p>
	<p>This is the left content:</p>
	<p>This is the left content:</p>
	<p>This is the left content:</p>
	<p>This is the left content:</p>
  </div>
<div class="clearer"></div>
</div>
</body>
</html>

Try that out and see if that what you mean :slight_smile:

paul

5

I can’t use a margin though as the right hand column, the blue bit only continues part of the way down the page, once it stops the remaining content needs to take up the full width. I can’t really use clear either as I don’t know when the blue section will stop. I will send you a pm with access to our development server if you want to see what I mean

thanks again Paul

6

Hi,

Here’s an example of one way to do it for any one else watching.

http://www.pmob.co.uk/temp/floats-wrap-under.htm

Paul

7