5 replies [Last post]
rcuser
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-01-26
Posts: 19
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rcuser
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-01-26
Posts: 19
Points: 0

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?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

4 divs in a row

can you post an example of what you're trying to do?

rcuser
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-01-26
Posts: 19
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.