CSS Layouts

[DJMK4]

Im doing a template but im trying to sort out my template, im using divs but want to know the code to use so that no matter what resolution the end user is using, it will display the divs the same dimension and size in the browser (Keeps it in proportion).

 

[DJMK4]

Thats what i wanted to achieve, so basically if someone with a lower or higher res monitor views the page, it wont be out of position.

 

[DJMK4]

Can anybody spot anything wrong with this code so far..for some reason the margin seems different on both the left and right of the container div:

body {
		margin:10px 10px 0px 10px;
		padding:0px;
		background-color:#FFFFFF;
}

#container {
		position: absolute;
		margin: auto;
		left: 20%;
		top:5%;
		width:60%;
		height:90%;
		background-color:#FFFFFF;
		border:1px solid #000;
}

#banner {
		position: absolute;
		margin-left: 1%;
		margin-top: 1%;
		margin-right: 1%;
		width:98%;
		height:10%;
		background-color:#FFFFFF;
		border:1px solid #000;
}

#menu {
		position: absolute;
		margin-left: 1%;
		margin-top: 12%;
		margin-right: 1%;
		width:98%;
		height:3%;
		background-color:#FFFFFF;
		border:1px solid #000;
}


#body {
		position: absolute;
		margin-left: 1%;
		margin-top: 16%;
		margin-right: 1%;
		margin-bottom: 1%;
		width:98%;
		height:82%;
		background-color:#FFFFFF;
		border:1px solid #000;
}

 

[DJMK4]

Also just tried this on a different monitor running 1024x768 and the page is overlapping and out of place.

 

[DJMK4]

the position absolutes aren't doing you any favours and all the moving about you're doing. i'll have a proper look in a minute.

Im using floats now instead of AP....im only using AP for the container div...


Also another problem i got is when i resize the browser page, the divs all re-size with the window, making everything smaller.

 

[DJMK4]

Excellent, thank you very much.

I now have a base to work off Lets hope i dont mess it up Web design is not my strongest point.

Can i just ask what it is you implemented just then?

 

[DJMK4]

What i meant is how did you get the divs to line up propely, and how did you get it not to re-size the divs when the page was minimised.

 

[DJMK4]

That makes sence yes.

Another quick question, if i wanted to extend the length of the container div and body div, do i just go ahead and alter the height or do i have to alter any margins?

reason i asked is because i just made them bigger, but it still doesnt keep the same margin between the divs and the container div.

This is the new code after the alterations:

body {
		margin: 20px auto;
		padding: 0;
		background-color: #FFF;
}

#container {
		margin: 0 auto;
		width: 60%;
		min-height: 700px; <<<< Here i altered
		height: 700px;  <<<Here i altered
		background-color:#FFF;
		border:1px solid #000;
}

#banner {
		margin: 10px;
		height: 15%;
		background-color: #FFF;
		border:1px solid #000;
}

#menu {
		margin: 10px;
		height:5%;
		background-color: #FFF;
		border:1px solid #000;
}


#body {
		margin: 10px;
		height: 73%;  <<<<here i altered the height
		background-color: #FFF;
		border:1px solid #000;
}

 

[DJMK4]

So basically its just the Banner div and the menu div that i need to keep an eye on, i will be using an image for the banner yes.

Ill revert the code back to what you gave me earlier and ill do some test input, hopefully once there is content in there it will stretch down.

 

[DJMK4]

Its still not exactly how i want it. Basically what happens is that when i minimise the screen, the body div will shrink too.

If you shrink www.msn.co.uk you will see what i am trying to achieve, it will move everything left as you make the page smaller, then when it hits the body div it will stop doing it.

 

[DJMK4]

Thanks