3 divs alinhadas perfeitamente

[Monkey D. Luffy 0]

Boa noite, galera eu não manjo muito em css e consegui um esquema na internet para alinha perfeitamente 3 div uma do lado da outra sendo:

 

 

 

ESQUERDO MEIO DIREITO

 

 

unico problema é que ela perde muito espaço pois

 

esquerda e direita fica com 21% e a do meio com 45% pois elas perdem espaço nas separações e pelo menos das formas que tentei recuperar esses espaços não consegui... alguem poderia me dar uma ajuda?

 

segue o codigo css

 

.colmask {
position:relative;	/* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:99.9%;			/* width of whole page */
overflow:hidden;	
border:0;	
margin: 0 auto;  
border-radius:5px; 

/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;			/* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
				only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
/* background:#eee;		 right column background colour */
}
.threecol .colmid {
right:25%;			/* width of the right column */
/*background:#FFCCFF;		/*center column background colour */
}
.threecol .colleft {
right:50%;			/* width of the middle column */
/* background:#f4f4f4;	 left column background colour */
}
.threecol .col1 {
width:46%;			/* width of center column content (column width minus padding on either side) */
left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%;			/* Width of left column content (column width minus padding on either side) */
left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%;			/* Width of right column content (column width minus padding on either side) */
left:85%;			/* Please make note of the brackets here:
				(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

 

 

e aqui como chamos elas nas divs...

 

 

<div class="colmask threecol">
        <div class="colmid">
	          <div class="colleft">  
		           <div class="col1">				
			         <div id="conteudo_mostrar">                             
                             			<?php include("conteudohome.php");?>
                        		 </div>			
		           </div>
		                 <div class="col2">	
                        			<?php include("conteudoesquerdo.php"); ?>			
		         	 </div>
	         		 <div class="col3">				
                        		  	<?php include("conteudodireito.php"); ?>				
	              		 </div>                    
              </div>              
           </div>             
        </div>  

 

 

Obrigado

[angelorubin 142]

Bom dia,

 

Se eu entendi bem a tua dúvida é coisa simples:

 

CSS

#container_global {
   overflow: hidden;
   border: 1px solid #CCC;
   padding: 2px;
   margin: 5px;
}

#container_um {
   overflow: hidden;
   border: 1px solid #CCC;
   padding: 2px;
   margin: 5px;
   width: 31%;
   float: left;
   height: auto;
   min-height: 100px;
}

#container_dois {
   overflow: hidden;
   border: 1px solid #CCC;
   padding: 2px;
   margin: 5px;
   width: 31%;
   float:left;
   height: auto;
   min-height: 100px;
}

#container_tres {
   overflow: hidden;
   border: 1px solid #CCC;
   padding: 2px;
   margin: 5px;
   width: 31%;
   float:left;
   height: auto;
   min-height: 100px;
}

 

XHTML

<div id="container_global">
   <div id="container_um"></div>
   <div id="container_dois"></div>
   <div id="container_tres"></div>
</div>

 

Exemplo Online - Clique aqui

 

Espero que ajude.