4 replies [Last post]
essdog
essdog's picture
Offline
newbie
Last seen: 13 years 45 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

Why do my packageBox div and my footerBox div overlap each other? Can someone please explain. Smile

My CSS:

* { font-family: Verdana, Arial, Helvetica; font-size: 11px; font-weight: normal; }

#packageBox {
background: #99CC99;
margin: 0px 10px 10px 10px;
}

#packageList {
margin: 0px;
list-style-type: none;
}

#packageItem {
padding: 10px 10px 10px 10px;
float: left;
padding: 10px 10px 10px 10px;
background: #DDDDDD;
}

#footerBox {
background: #EAEAEA;
height: 50px;
}

My HTML:

Title



  • Column Header A

  • Column Header B

  • Column Header C



[INSERT FOOTER HERE]

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Add clear:both to the

Add clear:both to the footerbox

YOU HAVE NO DOCTYPE!

DO IT NOW. NOW YOU HEAR ......

You could also do with zeroing various elements by placing this at the start of the css:

html,body,p,div,img,h1,h2,h3,h4,li,ul,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:0; border-spacing:0; } input,select{ margin:0; padding:0; }

Also, I don't normally like the styling applied to all elements as you do, but prefer this:

body{ font-family:verdana,arial,sans-serif; font-size:101.1%; }

Trevor

essdog
essdog's picture
Offline
newbie
Last seen: 13 years 45 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

Thanks Treva. That did it.

Thanks Treva. That did it. And, yes, I do now have a DOCTYPE element in my document.

As I am new to this, is clear: both usually something that needs to be done after using an unordered list, if the next DIV is to be below it? Is it a hacky way to get around my n00b code or is it something that is pretty standard?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

essdog wrote:As I am new to

essdog wrote:
As I am new to this, is clear: both usually something that needs to be done after using an unordered list, if the next DIV is to be below it?

Not at all - it's something that needs to be done every time you float an element.

Quote:
Is it a hacky way to get around my n00b code or is it something that is pretty standard?

Nope, it's standard Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

No, it refers to what to do

No, it refers to what to do following a float.

clear:left means drop below a float if it was floated left.
clear:right blah blah
clear:both means drop below any float