# How to align 3 divs side-by-side with padding and margins?



## Perry|

Hello.

I am having a spot of trouble aligning 3 divs side-by-side. I need two divs on the left and right at 20% each and one center div that automatically fills the remainder of the space, the center div also has a 5 pixel margin on the left and right. All divs have 5 pixels of padding inside. Here is the code.



HTML:


<div class="wrapper">
  <div class="poll">Poll Area.</div>
  
  <div class="main">Main area the needs to fill the gap.</div>
  
  <div class="nav">Navigation Area.</div>
</div>




Code:


THIS IS THE CSS CODE

.wrapper {
	float: left;
	clear: both;
	margin-top: 5px;
	width: 100%;
}
.poll {
	float: left;
	width: 20%;
	background-color: green;
	padding: 5px;
}

.main {
	float: left;
	background-color: blue;
	padding: 5px;
	margin-right: 5px;
	margin-left: 5px;
	width: 50%;
}
.nav {
	float: left;
	width: 20%;
	background-color: red;
	padding: 5px;
}

The colours are only there so I can see the divs more clearly. The 50% width on the .main {} is there as a placeholder for now.

Thank you for reading and helping.

Regards,

Perry


----------



## PseudoEvolution

It's almost impossible to take up the full page when using dynamic width combined with static padding/margin, since the padding is added to the width of the divs (which throws off the %), unless you designed the page for 1 browser and 1 resolution, which would be foolish.

I have ran in to this problem countless times and I always end up sticking to a static width of about 900-1000px (maybe 200/500/200) for the whole page, since that would look ok for most resolutions.

What you have would be nice for a page, as long as you center it, but I think you can only center static elements.


----------



## Perry|

Almost impossible eh? Doesn't make it completely impossible  If this matters, I have a 10px margin on the body on the left and right.


----------



## PseudoEvolution

If I could say completely impossible, someone would flame me. But I have never seen anyone successfully take up the whole page (for all resolutions) using both static/dynamic properties. If you get rid off all of the padding and margins, then you could do it. 

But like I said, I always end up sticking with a static layout of some sort.


Take a look here and see if you see anything you like:
http://layouts.ironmyers.com


----------

