Not changing layout

[Acute]

Hello everyone,

I made a layout using float:left and it's ok until the browser window is resized. When window is resized everything messes up, how to fix it??? how to make it independent from window size? I mean whatever the window size is, layout keep it's positions.

Here is what I have:

body{
	margin: 1% 12% 1% 12%;
	
	border: 1px solid red;
}

div.header{
	float: left;
	
	padding: 7px;
	width: 98.5%;
	
	margin: 3px 0px 20px 0px;

	border: 1px solid red;
}

div.leftSpace{
	float: left;
	
	padding: 10px;
	width: 200px;
	margin: 0px 20px 20px 3px;
	
	border: 1px solid red;
}

div.content{
	float: left;
	
	padding: 10px;
	width: 50%;
	margin: 0px 20px 20px 0px;
	
	border: 1px solid red;
}

div.rightSpace{
	float: left;
	
	width: 170px;
	margin: 0px 3px 20px 0px;
	padding: 10px;
	
	border: 1px solid red;
}

div.footer{
	float: left;
	
	padding: 7px;
	width: 98.5%;
	margin: 0px;

	border: 1px solid red;
}

and the html:

<div class="header">
</div>

<div class="leftSpace">
</div>

<div class="content">
</div>
	
<div class="rightSpace">
</div>
	
<div class="footer">
</div>

[skald89]

I know very little and I am just trying to give back to the forum. With that said, maybe its because you have % as your sizes instead of px and it causes it to resize do the window size? I'm just making a logical guess, the % for the widths and margins are read by browsers to match the window size so it keeps changing when you resize the window.

[Acute]

Thanks for reply.
Even when I put pxs instead of %s, I face the same problem: "float:left"s cannot fit in their places and they just jump under. I've read this http://www.maxdesign.com.au/articles/liquid/ so far, and tried to apply the liquid-fixed method, but problems begin when I use three columns :( I desperately need help :/

[skald89]

oh maybe try changing the width of the divs to auto. That way its width will expand with the content instead of being a fixed width which causes overflow to jump to the next line.