CSS, divs and borders

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I am experimenting with divs and CSS with a view to getting rid of tables
for layout. (no URL yet)

I have something like this:

<div style="width:49%; float:left;">


The style sheet contains this:
div {border:1px solid black;}

I expected to get two divs, each div having its own border.

The first div behaves as I expected, with a border around H1 and P1. But the
border for the second div encloses the first div and H2, P2. Why is this?
How do I make the border for second div enclose  H2 and P2 only; and not the
first div


Re: CSS, divs and borders

Ok, I haven't tried your code but I think I know what your problem is. The
reason the second div throws it's border around the first is to do with the
way that divs work. A division (unless specified otherwise) is always 100%
of the broswer width. Your first div is specified with a width and to
float. because of the float the second div is effectively place beside it.
Because the second divs width is defaulting to 100%, it's border is around
the first one as well.

You might try displaying the page in a browser which has html development
tools added (for example, MozillaFirebird with the Web Development
extension added) then you should be able to highlight the borders of all
block level elements and see where they start and end. This may help you to
see what the problem is.

Hope this helps.

Malcolm Collett wrote:

Quoted text here. Click to load it


Re: CSS, divs and borders

Quoted text here. Click to load it

Yep. That is exactly as it should work.

The first div is floated. This means it is removed totally from the normal
flow of the page. The second div behaves as if the first div were not there,
with one exception [1]. The second div will be 100% of its parent, the
<body> element.

The floated div is then put back on the page, with its left border flush
with the left of its parents border (the <body> element) and its top border
where it would have been if it were not floated. The floated div is
effectively placed on top of the other div.

[1] The exception. Any content (read text or images) in the second div is
moved to the right of the floated div. It is important to realise that it is
the text or image content that is moved, not any elements. For example if
you were to give that heading in the second div a border, that border would
extend right across the page, being 100% of its parent element, the second
div. However, the text within that heading would be shifted. You can check
this by giving the floated div a width of 80%.

BTW when investigating these things it helps to turn borders on for all
elements. In your <style> add
* {border: solid 1px green;}

Now, to your problem. If you want that second div (borders and all its
decendent elements) to live entirely to the right of the floated div then
give it a left margin:

margin-left: 50%;


Re: CSS, divs and borders

Quoted text here. Click to load it
Quoted text here. Click to load it

Thanks Derek, Richard

I now have better understanding of divs and float.
margin-left: 50% solved the problem.

But I immediately ran into another problem I don't understand:

The divs on the left and right don't display the same. The divs on the right
have space above and below the content. As if padding-top and padding-bottom
have been used. I don't understand where this has come from.

How do I get the left and right divs to display the same?


Site Timeline