[pandapete]

Hi all.

I am having trouble with getting a fluid layout in my header that I am designing.

The page layout is using a 3 column fluid layout using CSS that is working perfectly.

I have created a sliced header and used Image Ready to create the HTML and CSS.

The header will not resize automatically when different screen resolutions are applied.

I have tested the header container in the page layout with a border-right and it is resizing correctly, however, when a border-right is used on the header image container div (that is,the div.Table_01), it is not resizing, despite being set at 100%.

There is the 'useless' area in the middle of the header slice that I want to expand and contract depending upon the screen resolution. I have set it at 100%, set the image at 100%, and even tried a 1px trans.gif

The main header image container will not resize.

How can I fix this.

Here is the HTML code

<div id="header">  // This div is generated by the 3 col layout
//  This is the start of the header slice
  <div class="Table_01">
	<div class="header-01">
		<img src="images/header_01.gif" width="150" height="120" alt="">
	</div>
	<div class="header-02">
		<img src="images/header_02.gif" width="100%" height="200" alt="">
	</div>
	<div class="header-03">
		<img src="images/header_03.gif" width="600" height="120" alt="">
	</div>
	<div class="header-04">
		<img src="images/header_04.gif" width="150" height="80" alt="">
	</div>
	<div class="header-05">
		<img src="images/header_05.gif" width="600" height="80" alt="">
	</div>
  </div>  
</div>

and this is the CSS code for the header slice

div.Table_01 {
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:200px;
	border-right: 1px solid #000;
}

div.header-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:150px;
	height:120px;
}

div.header-02 {  /*this is the slice I want to be fluid*/
	position:absolute;
	left:150px;
	top:0px;
	width:100%;
	height:200px;
}

div.header-03 {
	position:absolute;
	left:400px;
	top:0px;
	width:600px;
	height:120px;
}

div.header-04 {
	position:absolute;
	left:0px;
	top:120px;
	width:150px;
	height:80px;
}

div.header-05 {
	position:absolute;
	left:400px;
	top:120px;
	width:600px;
	height:80px;
}

What am I doing wrong.

Thanks

[pandapete]

Hi again.

I think that I have worked it out. (Mum's angry as I should be in bed for school tomorrow).

Foranyone with the same problem, how I sorted it was to call the slices to the right of the container that I wanted to expand and reduce to 'float: right;'. Ithen positioned them using a negative value to position them in relation to the right border.

This may not be the correct way to do this, and I welcome anyone who knows the proper wayto pull me up and letme know how it should be done properly.

Thanks all.

Panda.