border percentages possible box model problem

[Alkaline2233]

I want 2 columns of fluid width. The problem is when I add a doctype, the far right column jumps down because the border-right in the left column makes it too big. When i take away the border the problem is fixed, but the border is part of the design, so I want to keep it. Im pretty sure the box model hack applies to this somehow, im just not sure of how to use it in this case, since im using percentages. Any help appreciated

<div id="container">

<div id="news"></div>

<div id="sidebar"></div>

</div>

body {
margin: 0;
padding: 0;
}

#container {
width: 100%;
height: 100%;
}

#news {
background-color: #fff;
float: left;
width: 68%;
border-right: 1px solid %000;
}

#sidebar {
background: #DDDDDD;
float: right;
width: 32%;
color: #1E3C3C;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
}

[Robin_reala]

It's a tricky one. There's been some talk recently about adding simple arithmatic to CSS3 to allow you to specify something like (32% - 1px). Unfortunately there's not a lot you can do at the moment though. I usually just try and make my widths add up to 99% instead of 100% which usually leaves a few pixels spare for whatever borders I need to put in.

[createErrorMsg]

the border is part of the design

This is more of a "designer" answer than a "coder" answer, but you might want to consider making the border part of a background image tiled vertically down one or the other column. This way you can just have straight widths with no box model problems, but still get your visual effect.

cEM

[Robin_reala]

Funny you should say that cEM - I just did that on my current site a couple of hours ago. It's a nice technique that only really falls apart in a CSS on / images off situation. Luckily this isn't that common. I do use this config on my phone, but the screen resolution is usually too small to have boxes sitting next to eachother anyway.

[Alkaline2233]

thanks for suggesting that work-around with the background, works great.