How to have DIVs in % and borders in pixels?

Hi,

I am having trouble setting my DIVs in percentage terms, while their borders must be in pixels.

I want to make it as simple as possible. Yes, I could use an enternal wrapper DIV whose background could act as a border... but that's too complicated.

Any simple way for combining pixels with percentages and make it all look well?

Useful tips?

 

Check this fiddle:

http://jsfiddle.net/aL5zB/

 

You didn't understand,... my problem is when using percentage together with pixels (for borders and margins).

My CSS is:

wrapper{margin: auto; padding-top: 4px; overflow: hidden; width: 800px; border: none; background-color: #FFFFFF;}
.left{float: left; width: 60%; border: 1px solid #B9B9B9; background-color: #F5F5F5; color: #555555;}
.right{float: left; width: 40%; margin-left: 5px; border: 1px dotted #6A83BC; background-color: #FFFFFF; color: #686868;}

HTML:

Can't make it look nice if pixels are used in combination with percentages.

 

How about this?
CSS:

body {background: #ccc;}

#div{
    width:50%;
    height:500px;
    border:5px solid white;
    margin: 10px auto;
    background: black;
    overflow:auto;
}

Code (markup):

It gives you this:

 

The problem is you're trying to set BOTH elements as % and float -- you only need one float, let the other one do what DIV do, auto-expand to the remaining space. To prevent the de-indent, set overflow:hidden on the second one and throw in a haslayout trigger for good measure.

... and please for the love of ghu stop cramming everything onto single lines. Pain in the ass to read and generally prone to making silly errors.

.wrapper{
	margin:0 auto;
	padding-top:4px;
	overflow:hidden;
	width:800px;
	/*
		fixed width BAD -- and if you're gonna fix the width WTF
		are you wasting time using % columns?!?
	*/
	border:none;
	background:#FFFFFF;
}

.left { 
	/*
		you should probably say what they are,
		NOT what they look like as your class
		
		I'm assuming this is the first of the two elements in flow
	*/
	float:left;
	width:60%;
	border:1px solid #B9B9B9;
	background:#F5F5F5;
	color:#555555;
}

.right{
	overflow:hidden; /* prevent de-indent */
	zoom:1; /* trip haslayout, prevent de-indent legacy IE */
	margin-left:5px;
	border:1px dotted #6A83BC;
	background;
	color:#686868;
}

Code (markup):

Should do it, assuming your div.left is before your div.right in the code order... though as the comment says, you should REALLY have better names than 'left' and 'right' and maybe say what those content areas ARE.

If the second one is set to auto-adjust to the available space, you're automatically golden and it saves you the math headaches.

This method also makes it easier to open up the layout fluid or semi-fluid, and I'd suggest making the sidebar a fixed/elastic width instead of % since usually percentage layouts are flimsy broken crap.