CSS, divs and borders

Malcolm Collett · Nov 12, 2003

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;">
<h6>..H1..</h6>
<p>..P1..</p>
</div>

<div>
<h6>..H2..</h6>
<p>..P2..</p>
</div>

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

Thanks
Malcolm

Derek Clarkson · Nov 12, 2003

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.
Derek.

rf · Nov 13, 2003

Malcolm Collett said:
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;">
<h6>..H1..</h6>
<p>..P1..</p>
</div>

<div>
<h6>..H2..</h6>
<p>..P2..</p>
</div>

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

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%;

Cheers
Richard.

Malcolm Collett · Nov 13, 2003

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

Yep. That is exactly as it should work.

margin-left: 50%;

Cheers
Richard.

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:
http://users.iafrica.com/m/mc/mcollett/Testing/Testing.htm

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?

Thanks
Malcolm

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Stuck with html and css	25	Dec 14, 2022
New CSS features for smooth entry and exit animations	0	May 28, 2024
CSS problem - no borders showing	4	Nov 14, 2013
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022

CSS, divs and borders

Malcolm Collett

Derek Clarkson

rf

Malcolm Collett

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads