I am creating a layout using % (percentages) in stead of PX just so that it will fit other screen resolutions nicely but, as soon as I minimize the window all the page content gets squished up and stacks on top of each other.

 

I think because I am using % in stead of PX that all the content is displaying relative to the browser window so when maximised its great but 60% of a minimized window is a small portion.

 

Is there any way to fix this so that it all stays in position no matter what resolution the page is being view on?

 

A tutorial would help if no one knows the answer.

 

 

body, html {
background-color:#9933FF;
font-family:'Henny Penny',geneva, Arial, Helvetica, sans-serif;
margin:auto;
max-width:90%;
}

.textMain {
font-size:60px;
font-family:'Henny Penny';
}

.insideHead {
background:red;
border-radius:5px;
}

#wrapper{
height:100%;
width:90%;
border:1px solid #FFF;
}

header {
width:100%;
height:30%;
background-image:;
display:block;
text-align:center;
border-radius:10px;
}


nav {
height:30px;
width:100%;
background-color:#99F;
border-radius:10px;
}


artical {
height:40%;
width:50%;
float:left;	
}

aside {
height:25%;
width:30%;
background-color:#FFF;
float:right;
margin:10px;
border-radius:10px;
}

section {
display:clear;
float:left;
width:60%;
height100%;
background-color:#FFF;
padding:20px;
margin:10px;
border-radius:10px;

}

footer {
clear:both;
display:block;
background-color: #000000;
padding:15px;
border-radius:10px;
}

Edited March 2, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

**SNIP!!**

Edited March 1, 201214 yr by Bomb

im not sure i understand exactly what you mean but if i am right it sounds like you want it to be fluid but not mess up when it gets too small.

 

in that case I would find the point at which it goes wrong / it is too small and then set a min width.

 

 #container { min-width:60%; }

 

this would stop the container from shrinking below 60%.

 

Maybe what your looking for?

Edited March 2, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.