CODEWITHSUNDEEP
htmlcss
NullVoxPopuli
NullVoxPopuli

Reputation: 65103

CSS & HTML: I'm having trouble aligning these divs

Each of them are off by a couple pixels, The corners should all line up so that it doesn't look like a bad copy / paste job in paint.

Code: http://jsfiddle.net/Lbgp3/

Upvotes: 0

Views: 71

Answers (3)

pnomolos
pnomolos

Reputation: 886

If you don't want to deal with negative margins and are only targeting webkit, you can always change the box-sizing property by doing the following:

-webkit-box-sizing: border-box;

This puts you back in the old-school days where padding and borders were included in the width calculations, so the width never goes beyond what you specify for it.

(There's appropriate properties for other browsers as well).

Upvotes: 0

Ladlestein
Ladlestein

Reputation: 6160

It's the borders that are screwing up your alignment. When I remove them, it's fine. Not sure what you need to do to align w/borders - I tried adding a 1px margin, didn't work, tried a 1px padding, didn't work.

(BTW I didn't realize that when I tried those changes, I was actually modifying the page you were working on. Hope I didn't screw you up.)

Upvotes: 0

Jibran
Jibran

Reputation: 930

From a quick view, I', guessing that you've set the width/height to 50% and then you're adding 1px borders. The CSS Box Model uses the width/height values to set the width/height of the CONTENT AREA, not the entire Box. The reason you're divs aren't aligned is because each of them is using 50% of the parents area + 2px for the borders.

Changing the width and height values should do the trick.

Upvotes: 1

Related Questions