CSS Newbie with float problem

HTML & CSS
1

I have a containing div and in that I have div which is now set float left (so out of the flow so the ‘next div’ moves up and its content goes around the shape of the floating div.

This is fine, but only when the items contained in the ‘next div’ have boarders around them. If I remove their borders then the two divs seem to behave like block boxes and the ‘next div’ and its contents are below the first div.

I realise this is not the full story, but can any one advise me of any general reason why adding borders to items might have an impact on the positioning of their containing block?

What is the best stratefy to debug this? I have Vis Studio 2008 CSS Propertes, but after adding the borders through a class, or removing I can see no change to what is inherited and what is not, to be able to identify the cause. Are there any tools out there that will provide some kind of cause/effect presentation so you could know what set of conditions lead to the positioning and thereby identify the link to the borders?

Any help or advice for this css newbie greatly appreciated.

2

Borders will have no reason to make elements behave like blocks.

I’m assuming that what you mean is when you apply borders it drops the next div down? When you add borders it adds to the total width of an element.

Say you have 2 columns, both floated and the parent is 800px wide.

You set them both to 400px and then you set one column to have border:1px solid red;.

That’s 2px total borders and thus the width of both columns = 802px. Thus since it doesn’t have room to fit it will drop dwon thus a float drop.

Count your widths on the columns, borders/margins/paddings add to the total width of the element. Make sure they all match up and there is enough room :).

If not you can post a link to the page in question and we will sort this out for you :slight_smile:

Firebug is a great tool for debugging.

3

Thank you. I shall take a look at fire bug. I’m looking to understand CSS and debug rules and reasons, not ustogenerate. Hopefully it will do the job.

The page&css need a little (lot of) tidying, though I could post as is if you feel appropriate. However my problem seems to be the other way around, when the borders are ADED the ‘next div’ moves up and drops below the floated div when borders removed. The borders however are on the content of ‘next div’.

I thought once the first div is floated it is actually out of the flow and the second div moved up is actually taking up the entire width of the container, but it’s just that its contents flow around the shape of the floated div.

Thank you again.

4

Hi,

As Ryan said borders on static elements will have no effect on a float and in fact should slide under the float while the foreground content is repelled.

Here is a basic floated block - can you adjust it to show the effect you were seeing so that we can see what you were doing.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0 0 1em;
}
#wrap {
    width:800px;
    margin:auto;
    background:#fffccc;
    padding:5px;
overflow:hidden;
}
.fl {
    float:left;
    width:300px;
    background:blue;
    border:1px solid #000;
    height:200px;
    margin:5px;
}
</style>
</head>
<body>
<div id="wrap">
    <div class="fl">Float</div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet diam lacus, sit amet facilisis turpis. Mauris posuere viverra bibendum. Pellentesque gravida vehicula sollicitudin. Pellentesque tellus ligula, dignissim in viverra sed, euismod sit amet erat. Ut dapibus risus nec lorem semper consequat vestibulum eros consectetur. Suspendisse tempus quam sit amet turpis auctor sed adipiscing sem placerat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet diam lacus, sit amet facilisis turpis. Mauris posuere viverra bibendum. Pellentesque gravida vehicula sollicitudin. Pellentesque tellus ligula, dignissim in viverra sed, euismod sit amet erat. Ut dapibus risus nec lorem semper consequat vestibulum eros consectetur. Suspendisse tempus quam sit amet turpis auctor sed adipiscing sem placerat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet diam lacus, sit amet facilisis turpis. Mauris posuere viverra bibendum. Pellentesque gravida vehicula sollicitudin. Pellentesque tellus ligula, dignissim in viverra sed, euismod sit amet erat. Ut dapibus risus nec lorem semper consequat vestibulum eros consectetur. Suspendisse tempus quam sit amet turpis auctor sed adipiscing sem placerat.</p>
    </div>
</div>
</body>
</html>
5

As Paul asid, we would need to see a page in question, and tell us where to add the borders so we can replicate the effect :). Without your full code our efforts will probably be folly.

6

Thank you. I shall post the code when I have tidied it up.

By the way. I downloaded firebug with firefox, but this doesn’t help me because I discover this problem (which I wouldnt expect to happen any way) that I am seeing in IE 8 does NOT occurr in Firefox 3.6

Not sure if that gives any clues. But yes I shall provide (such as it is) code. It may have other errors, but possibly it ought not do what it is doing despite those.

Is there a tool that is highlites browser anomolies?

7

IE has a developer toolbar but I just use firebug to look at the code and then I do a test in IE (or whatever browser has the quirk) and that’s generally good enough for me.

The developer toolbar should have what you need but it’s a tad bit low tech :slight_smile: