CSS Layouts

Soldato
Joined
1 Dec 2004
Posts
22,748
Location
S.Wales
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).
 
Code:
#container {
width:700px;
}
Code:
<div id="container">
Code here
</div>

Would contain everything within a div of 700 pixels wide.

Edit: oh in proportion. In that case use a percentage. Eg: width:70%;
 
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.
 
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:


Code:
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;
}


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

:mad:
 
I think you need to keep at least the container a fixed width or the page will overlap all over the place when the browser windows is resized.
 
RandomTom said:
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.
 
Last edited:
Try using this:

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

#container {
		margin: 0 auto;
		width: 60%;
		min-height: 500px;
		height: 500px;
		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: 70%;
		background-color: #FFF;
		border:1px solid #000;

It gets rid of all the nasty percentages all over the place, and is hopefully what you're looking for. Obviously when you get some content in the divs then you won't need the height values. :)
 
Excellent, thank you very much.

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

Can i just ask what it is you implemented just then?
 
Haha, You were just trying to over complicate things I think, with that, although there are pixel definitions on the margin, that's easy to keep distances apart consistent. When you resize the widths change so that's all in proportion, keep posting updates, I'm bored and will probs have a look at anything. :)

edit: not sure what you mean by implemented? i used my brain knowledge and notepad lol, i just used your divs to make the html you'd be using, which seemed pretty simple and worked off that.
 
Last edited:
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.
 
Code:
#container {
		margin: 0 auto;   - centres the whole content area
		width: 60%; - sets a width of 60% to the whole area
		min-height: 500px; - heights set due to having no content
		height: 500px;
		background-color:#FFF;
		border:1px solid #000;
}

#banner {
		margin: 10px; - 10pixels each side from the outer border line
		height: 15%;
		background-color: #FFF;
		border:1px solid #000;
}
In there you'll see the margin: 10px; in each div, that aligns each div 10pixels from the edge, so that means they're all in line in an even fashion. Their width is then set from the remaining space but the height is a constant percentage so resizing would only keep the width of the page 60% and each div inside that would just stay consistent with the proportion.

That probably made no sense.
 
Last edited:
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:


Code:
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;
}
 
Last edited:
Yeh it is a bit iffy, are you using an image in your banner? If you are then that will be a set height, say 100px, then you could set the navigation to a particular height say 40px or about 2.5em.

Once you start entering content into the #body div then you won't need to bother about the heights in either #container or #body.
 
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.
 
Last edited:
All the height values can be removed once you have got content. They were only included by random so you could see the layout. If the height values weren't there you wouldn't see very much :p
 
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.
 
is that not just a min width on the container DIV?
Not sure if container DIV is what you have called yours but im sure you get the idea

min-width: 500px;

should do that :)
 
Back
Top Bottom