Why Does Border Not Go All the Way Around On This Simple Example

HTML & CSS
1

Hi Guys

I’m trying to learn CSS page layout :slight_smile: please see:

http://www.highlycreative.co.uk/test/css-layouts/test5-2-col-fixed-header-nav-footer.htm

I have set a 2px border on the #container class, i.e. the main page container div. I was expecting this to produce a border right around the page content, i.e. around the header, down each side and around the footer, but it only goes around the header (I’m looking at the site in Firefox).

Can anyone tell me why the border doesn’t go all the way around like I was expecting?

Many thanks

2

Looks like you need to contain your floated stuff. Here is how http://www.visibilityinherit.com/code/contain-floats.php once you do so the border should sorround the outer div

3

because your container div contains floated items, it doesn’t know where the content ends, therefore only shows the container div around the first contained div (header)

a quick and easy fix is to add ‘overflow: hidden’ to the container div. :slight_smile:

4

Thank you for your help guys.