one fixed div between two liquid div in side one big div

[M.O.S. Studios]

this is what i want

 

fixed div

____\/_______________________________________

|__________________________________________  |

||  liquid div    |  fixed div (165px )      |liquid div        |  |

||                      |                  wide          |                      |  |

||                      |                                  |                      |  |

||                      |                                  |                      |  |

|__________________________________________  |

|___________________________________________|

 

this is my css

 

css

.header{
   position: relative;
   border-bottom: 10px solid #f3a048;
   float: none;
   width: 100%;
   height: 135px;
   background-color: transparent;
   overflow: visible;
}

.col-logo{
   background: #fff0f0;
   position: relative;
   float: left;
   text-align:center;
   height: 100%;
   border: 0px;
}


.header .col-dock{
   background: #ffffff;
   position: relative;
   float: left;
   text-align: center;
   width: 615px;
   height: 100%;
   border: 0px;
}

.header .col-right{
   background: orange;
   position: relative;
   float: right;
   text-align: center;
   height: 100%;
   border: 0px;   
}

 

html

<div class="header">

	<div class='col-right' id='links'>
		Search: <input type='text' size='15'></input><br>
		<a href='login.php'>Login</a> / <a href='reg.php'>register</a>
	</div>

	<div class='col-logo'><img src='images/logo.png'></div>


	<div class='col-dock'>	
<br>
	 </div>


</div>

 

 

 

thanks in advance

[FaT3oYCG]

make 3 containing divs inside the main div, float the right 2 divs to the left, put your 3 current divs inside those, set the width on the central div and then play with the percentages wih the other two i think would work, if this isnt solved ill take a look when i get home tonight.

[M.O.S. Studios]

this is what I did,

I'm sure there is a way easier way of doing this,

if any one knows let me know

 

css

.header{
   position: relative;
   z-index: 0;
   border-bottom: 10px solid #f3a048;
   float: none;
   width: 100%;
   height: 135px;
   background-color: #000000;
   overflow: visible;
}

.header .col{
   background-color: transparent;
   position: relative;
   float: left;
   text-align: inherit;
   height: 100%;
   width: 50%;
   border: 0px;
   z-index: 1;
}

.header .col .filler_left{
   position:relative;
   background-color: transparent;
   float: right;
   height: 100%;
   width: 308px;
   border: 0px;
   z-index: 0;
}

.header .col .content_left{
      float: right;
      text-align: right;
      color: #f3a048;
}

.header  .col .content_left a{
      color: #f3a048;
}

.header .col .filler_right{
   position:relative;
   background-color: transparent;
   float: left;
   height: 100%;
   width: 308px;
   border: 0px;
   z-index: 0;
}

.header .col .content_right{
      float: left;
      text-align: left;
      color:#f3a048;
      z-index: 0;
}

.header  .col .content_right a{
      color:#f3a048;
}

.header .col-dock{
   background-color: transparent;
   position: relative;
   border: 0px;
   width: 616px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   z-index: 2;
   text-align: center;
}

 

html

<div class="header">
	<div class='col'>
		<div class='filler_left'></div>
		<div class='content_left'>
			<img src='images/logo.png'>
		</div>
	</div>
	<div class='col'>
		<div class='filler_right'></div>
		<div class='content_right'>
			Search: <input type='text' size='15'></input><br>
			<a href='login.php'>Login</a> / <a href='reg.php'>register</a>
		</div>
	</div>

	<div class='col-dock'>	
	</div>
</div>