DIV width not filling containing element

[Suren]

I have set 'rowmain' to 740px and 'leftcolumn' & 'rightcolumn' to 370. But 'leftcolumn' & 'rightcolumn' are 1 pixel shorter than rowmain. I have tried almost everything no borders, no margins & no paddings. But still the width is 1 pixel shorter than it should be and it is driving me crazy.

So I want to know why these two divs are 1 pixel shorter than they should be!

<div id="rowmain">
	<div id="leftcolumn" class="data">content1</div>
	<div id="rightcolumn" class="data">content2</div>
</div>

Thanks

[Hot]

This is an impossible question without access to your CSS code.

[Suren]

#rowmain {
	width: 740px;
	height: 500px;
	border: #88add7 0px solid;
	clear: both;
	position: relative;
	display: block;
}

#leftcolumn {
	width: 350px;
	height: 500px;
	border: #88add7 1px solid;
	padding: 10px;
	position: relative;
	display: block;
	float: left;
}
#rightcolumn {
	width: 350px;
	height: 500px;
	border: #88add7 1px solid;
	position: relative;
	display: block;
	padding: 10px;
	float: left;;
	border-left: #88add7 0px solid;
}

[sweetsam]

Do you have a reset at the top of your css ? If not try adding this to the top of your stylesheet.

* {
margin: 0;
padding: 0;
}

[jordan.]

The problem seems to arise when you apply border-left: #88add7 0px solid; to #rightcolumn. It's not actually a problem, its just that you are probably forgetting to factor it in to your calculations.

leftcolumn = 350px width + 20px padding (10px for left and right) + 2px border (1px for left and right) = 372px wide

right column = 350px width + 20px padding (10px for left and right) + 1px border (1px for right, left is 0) = 371px wide

372px + 371px = 743px

So your rowmain should be 743px wide and everything will be nice and snug ;)