• From: Toronto, On
  • Registered: April 22, 2009
  • Posts: 44

Topic: adding padding breaks my columns

when I change my CSS from 

#left {
float:left;
width:700px;
}

to this

#left {
float:left;
width:700px;
padding: 0 1em;
}

my primary content column breaks. could someone help me see what's going on?

http://userqqqq.123bemyhost.com/index.php

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: adding padding breaks my columns

Adding the padding makes that div too wide.  Instead of em, use px for it, and whatever you take, multiply by 2 and deduct from the width.  For example: 

#left {
float:left;
width:650px;
padding: 0 25px;
}
Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • From: Toronto, On
  • Registered: April 22, 2009
  • Posts: 44

Re: adding padding breaks my columns

so the div doesn't includes the padding? if figured it would just squish everything in. bah.
gripes aside that fixes my problem thanks much.

Last edited by wolfkin (June 22, 2009 7:49 pm)

Vote up Vote down

  • Registered: April 30, 2009
  • Posts: 157
  • Reputation: 2

Re: adding padding breaks my columns

Padding and Margin is not usually included in a Block element's width and height. You have to count it in, and calculate how much space is left within the container to set for the next floated element.

Vote up Vote down