PDA

View Full Version : [CSS] No wrap around on floats



NeoDreamer
January 25th, 2008, 02:33 PM
As you may know from the CSS box model, borders contribute to the actual width of a DIV. For example, if a DIV has width: 50px and border-left: 1px, then the actual width is 51px.

figure 1
http://img115.imageshack.us/img115/4458/helpuw2.gif
figure 2


This box model theory causes a problem when a DIV's width is set as a percentage. Float's will wrap around if their widths are set exactly as their intended width (figure 2). Right now, I'm using a ghetto solution: set one DIV to be 1% less than the intended width (figure 1). But as you can see, it's not the ideal solution - I don't get pixel perfect precision - see how the shadow juts out a little on the right?

Do any of you know how to prevent this wrapping while still have the DIVs' widths' be their intended width?

Tesseract
January 25th, 2008, 03:14 PM
YOU could always use absolute positioning, if the design will allow it. That will take care of the wrapping issue.

NeoDreamer
January 25th, 2008, 03:47 PM
YOU could always use absolute positioning

That's one way, but it's not very flexible or practical if I need this bar to have dozens of pieces with different percentages.

Icy Penguin
January 28th, 2008, 04:44 PM
I usually just put one div inside another - and put the border/padding on one div and the width on the other.