Tue, 2005-03-22 20:41
Hi,
I'm having trouble lining up 4 <div> in a horizontal row with a 1px border on the right. I can get it to work OK in IE accept when I encase the 4 div's in another div tag. It also falls down for firefox (and probabley other browsers).
I was thinking something along the lines of
.testcell {
float left;
width 25%;
border-right 1px solid white;
}
Any ideas what I'm doing wrong?
Thanks,
Richard
Tue, 2005-03-22 20:58
#1
4 divs in a row
Border dimensions are added to the content dimension. 4×25%+4px=too wide. I'm guessing you don't have a proper DTD, and so IE is using a faulty box model. Reduce the width of the float elements a bit, and try again.
cheers,
gary
Tue, 2005-03-22 21:12
#2
4 divs in a row
I thought about that but that would cause the gaps to be bigger than the 1px that I was aiming for and wouldn't be inkeeping with the design of the site....
is there a way of gaining the border without using a border, perhaps through padding or margins or something?
Tue, 2005-03-22 21:18
#3
4 divs in a row
can you post an example of what you're trying to do?
Tue, 2005-03-22 21:29
#4
4 divs in a row
I have attached an example snippet of the relevant code. You can see the prob in firefox but not in IE
Wed, 2005-03-23 05:42
#5
4 divs in a row
You have IE in quirks mode, using a non-conformant box model. If you use a complete DTD, IE goes into standards mode and it will do the same as Moz etc..
You can leave things as they are and use a little css3 trickery. Works in Moz and Opera, but not Safari.
.testcell {
background-color: #000033;
float: left;
width: 25%;
border-right: 1px solid #FFFFFF;
color: #FFFFFF;
box-sizing:border-box; /*for Opera, but with improper syntax*/
-moz-box-sizing:border-box; /*proper moz syntax*/
}
[edit]You might try {-khtml-box-sizing: border-box;}. That, at least, would be the proper syntax, should the khtml engine implement the property.[/edit]
cheers,
gary