resizing issue

[mattrd]

okay I don't know what i'm doing wrong, but I can't seem to get this to work the way i want it to. I have 5 divs all floating left so they are next to one another in a line. there is top_right, top_spacer, top_middle, top_spacer, and top_right. What I want to happen is when you change the window size, I want the spacer to allow the nave to stretch as big as the screen and likewise when you shrink it, but it's just not working. go to the page and you'll see what I mean. What am I doing wrong, and can anyone help me??

http://www.matthewrdaniels.com/resize.html

here's the code.

<div id="container">
<div id="top">
<div id="top_left"></div>
<div id="top_spacer"></div>
<div id="top_middle"></div>
<div id="top_spacer"></div>
<div id="top_right"></div>
</div>
</div>

here's the css


container {
width:100%;
height:auto;
margin:0 auto;
}

#top_left {
width:18px;
height:56px;
background-image:url(../images/top_left.gif);
background-repeat:no-repeat;
float:left;
}

#top_middle {
width:521px;
height:56px;
background-image:url(../images/top_middle.gif);
background-repeat:no-repeat;
float:left;
}

#top_right {
width:22px;
height:56px;
background-image:url(../images/top_right.gif);
background-repeat:no-repeat;
float:left;
}

#top_spacer {
width:25%;
height:56px;
background-image:url(../images/top_spacer.gif);
background-repeat:repeat-x;
float:left;
}

#top {
width:100%;
height:56px;

}

thanks!

[Oreo]

Hi mattrd,

I spent quite some time trying to figure out how to make this work with float set on the divs. No success. You need to first position the container to a relative position and then set positioning of the 3 divs (left, center, right) on absolute.

Here it is, I hope this is what you are looking for.

#container {
	position:relative;
	margin:0px auto; 
	width: 100%; 
	height: auto; 
}

#top_left {
	position:absolute;
	left:1%; 
	top:15px;
	background: url('../images/top_spacer.gif') repeat-x top left; 
	width: 50%; 
	height: 56px;
}

#top_middle {
	position:absolute; 
	top:15px; 
	left:50%; 
	margin-left:-260px; 
	z-index:10;
	background: url('../images/top_middle.gif') no-repeat top left; 
	width: 521px;  
	height: 56px;
}

#top_right {
	position:absolute;
	right:1%; 
	top:15px; 
	background: url('../images/top_spacer.gif') repeat-x top left; 
	width: 50%;
	height: 56px
}

#top {
	width: 100%; 
	height: 56px
}

.left {
	float: left
}

.right {
	float: right;
	
}

[mattrd]

wow. it works beautifully!! but what are the .left and .right classes for? the float left and float right? are they the images that are supposed to be on each end? i'll try to see if i can get them in. thanks!

[mattrd]

heyj ust want to let you know i got it all working. thank you SO much for your help

[Oreo]

No problem.

As for the 2 classes (.left, .right), they were not really part of the "liquid" structure as they are only helping to position the images within both ends divs. Nevertheless, the class for the right side enabled me to reposition (top:14px) the image so it would match vertically with the line made with the spacer.

Eventhough the layout moves quite nicely as you resize the browser,
I thought that the right part was collapsing a little bit before the one on the left. That is just an illusion created by the drop shadow of the center part that pushes the box to the left (in the image).