nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

CSS formatting question.

cinneide

Hello all,

I'm trying to sort out a website for a friend and I'm having trouble getting the div's to line up properly on the screen.

Basically, I'd like to keep everything 800px (this is the ideal width or is it slightly larger?) wide and centered on the screen, so it appears more or less the same on visitor's browsers.

At the moment the site is dependent on screen resolution so things aren't lining up unless viewed with the designer's (i.e. my own) resolution.

Any clues? Thanks in advance.

Find more posts tagged with

Quick Links

Comments

turgon

I dont think I understand. You could use

width: 800px;

Goodshape

<div id="pageWrap">
YOUR STUFF GOES HERE
</div>

#pageWrap {
width : 800px;
margin : auto;
}

you mean that?

cinneide

for some reason, when I start specifying widths like that, all my sidebar get completely rearranged.

the site is a basic blog setup. I've attached a jpeg of how the div's should be ideally laid out. Each box represents a different div. The red box around the four central divs represent an encapsulating, content div... I hope it makes my query clearer.

Goodshape

Rearranged how?

If you're surrounding block is set to 800px, just make sure that your sum of the four blocks inside + margin + padding does not exceed 800px.

The four inner blocks really shouldn't have any margin or padding at all as this leads to cross-browser issues. Put the required margin and padding on the elements inside them instead.

conordarcy

Something like this?

CSS:
#wrapper{
width:800px;
margin:0 auto;
}

#header{
width:800px;
}

.panel{
width:200px;
float:left;
}

#footer{
width:800px;
}

HTML:
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div id="footer"></div>
</div>
</body>
</html>

innovativeoptions.ie

cinneide

My margin and padding values needed to be adjusted to ensure that they added up to the entire width. Site looks A1 now...

heggie

i think 940/960 is a more appropriate width nowadays.

Gordon

heggie wrote: »

i think 940/960 is a more appropriate width nowadays.

I wonder when this post will be dredged up in the future and someone will laugh at the oldness of technology and tiny screens back in 2008

daymobrew

heggie wrote: »

i think 940/960 is a more appropriate width nowadays.

Yahoo UI libraries use 950px and 974px for 1024x768 screens.

Liam Byrne

cinneide wrote: »

My margin and padding values needed to be adjusted to ensure that they added up to the entire width. Site looks A1 now...

Two points:

1) Watch the box model in the different browsers; in some, a width of 100 and a padding of 10 gives a total width of 100 with content width of 80, while in others the total width becomes 120

In case that doesn't explain things properly, think of it this way. If you asked a carpenter to make you a shelving unit that was 3ft wide, using 2-inch wood for the two sides, should a 3ft fishtank fit "in" there (between the sides - total width of shelving 3ft, 4 inches) or should the whole bookcase fit in a 3ft alcove in your room ?

The different browsers are like 2 different carpenters who interpret it different ways, with the obvious different results if you don't specify it exactly right in a way they understand.

2) If you're floating a div and have a margin on it, there's a bug in IE6 that will double the margin; to prevent this, use "display:inline"

Liam