CSS fluid layout madness

[SrWebDeveloper]

** LINK REMOVED DUE TO ISSUE BEING RESOLVED, NEED THE SERVER SPACE FOR OTHER USAGE **

I downloaded a very complex theme and I'm converting it from a static layout to a mostly liquid or fluid layout. I've got it almost completed, but I'm stuck on one part, the header area which is inside a container div (in yellow) which is 90% of the page width. Inside that are the two columns for the header, assigned as follows:

header-left - (in red) static width of 588 pixels which I want to keep as is
header-right - (in blue) fluid, it's supposed to fill the width up to the container size sans any margin created by other elements. This is the problem.

Yes, there are other div's inside which in the actual theme have images that make for nice looking 3D blocks in the template. I kept them intact in case they play a role. Please visit [REMOVED] to see the layout and please test your solution before replying if possible.

Thanks!

-jim

 

[angelwatt]

Here are the changes to the CSS.

#header-right {
/*	float: right; //removed */

#header-center-border {
 position:relative; top: 0; /* added */
/*	float: left; //removed */

#header-content-container {
/*	float: left; //removed */

which gave me the attached output (only tested in Firefox in XP).

 

[SrWebDeveloper]

@angelwatt:

You made it so header-right spans the entire width starting from header-left's starting point. This covers up the gap between header-left and header-right that was visible before. Locally I added margin-left: 608px for header-right to move it over, but doing so affects the rightmost div by pushing it down. I cannot get all elements to align and the right side to be fluid at the same time.

In the production version the leftmost and rightmost div's actually contain a graphic 13w x 295h to render a nice looking 3D shadow effect for the left and right sides. FYI.

Thank you for your effort so far.

-jim

 

[angelwatt]

Think I got it. The exact spacing may not be right, but you can fiddle with that. The main change from before was increasing the left margin on header-right.

#header-right {
[B]/*	float: right; */[/B]
	background-color: blue;
	height: 271px;
	margin-right: 10px;
	[B]margin-left: 604px; /* increased */[/B]
}

#header-subpage {
	float: left;
	height: 110px;
}

#header-subpage-content {
[B]/*	float: left;*/[/B]
	height: 110px;
	margin: 0 auto;
	line-height: 10px;
}

#header-left-border {
	float: left;
	width: 13px;
	height: 295px;
}

#header-center-border {
[B]/*	float: left; //removed */[/B]
	height: 295px;
}

#header-content-container {
[B]/*	float: left;*/[/B]
	margin-top: 12px;
	margin-left: 10px;
	height: 271px;
}

 

[SrWebDeveloper]

Thank you, kindly. I'll take it from here to tweak.

-jim