CSS issue...

Darragh29 · 02-06-2009 3:16pm #1

I have a three column page that I'm having an annoying CSS issue with. The 3 div containers display fine in IE and Firefox in terms of horizontal placement on my page, but the tops of the containers won't align properly. If I use just for example the top:ABCpx CSS command below, which I have to use to get the tops of the containers to align exactly in IE, when I open the same page in Firefox, the containers are all over the place vertically but horizontally are exactly where I want them:

#content-left
{
position: relative;
top: 37px;
left: 2px;
width: 316px;
margin: 0;
padding: 0;
height: 500px;
z-index:0;

}

#content-right
{
position: relative;
float: right;
top: -1200px;
width:268px;
margin: 0;
padding: 0;
height: 500px;
}

#content-middle
{
position: relative;
top: -529px;
left: 325px;
width: 300px;
margin: 0;
padding: 0;
height: 500px;
z-index:0;

}

#centerit
{

width: 900px;
height:570px;
margin-left: auto;
margin-right: auto;
background-color: #000000;

}

I'm just wondering is there a way I'm not seeing of aligning the tops of the 3 containers with messing around with putting in offsets like I'm doing at the moment, which isn't working out for me???

louie · 02-06-2009 4:06pm

Have you got a link to the page for us to see?

egan007 · 02-06-2009 4:18pm

Havn't checked this but it looks about right...

#centerit { margin:0pt auto; height:auto; }
#content-left, #content-middle, #content-right { float:left; display:inline;}

<div id="centerit ">
<div id="content-left"></div><div id="content-middle"></div><div id="content-right"></div>
</div>

louie · 02-06-2009 4:18pm

is this what you would like to achieve?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3 column layout</title>
<style type="text/css">
body{text-align:center; margin:0px; padding:0px;}
#centerit{width: 900px;height:570px;margin: auto;background-color: #000000; text-align:left; padding:0px; color:#ffffff;}
#content-left{ 
/*position: relative;
top: 37px;
left: 2px;*/
width: 316px;
margin: 0px;
padding: 0px;
height: 500px;
/*z-index:0;*/
float:left;
}

#content-right{ 
/*position: relative;
float: right;
top: -1200px;*/
width:268px;
margin: 0;
padding: 0;
height: 500px;
float:left;
}

#content-middle{ 
/*position: relative;
top: -529px;
left: 325px;
z-index:0;*/
width: 300px;
margin: 0;
padding: 0;
height: 500px;
float:left;
}


</style>
</head>

<body>
<div id="centerit">	
    <div id="content-left">
    	left
    </div>
    <div id="content-middle">
    	middle
    </div>
    <div id="content-right">
    	right
    </div>
</div>
</body>
</html>

Liam Byrne · 02-06-2009 6:37pm

Forget about positioning.

The key part of egan007's post above is float:left;display:inline - that's the bit that does what you want.

One of those on each "div" will make the div a column.

The confusing bit for newbies is that "float:left", pushes the item left - making it appear to the "right" of the previous item.

Remember to put "clear:both" in the CSS of whatever item is meant to appear under/after the columns.

Darragh29 · 02-06-2009 8:11pm

Thanks so much folks for the replies. Based on all of the posts above, I've resolved my original issue with aligning the top of the columns. The only problem I'm left with that someone might have a suggestion for is that I've 3 columns/divs within a container and I have a menu on the top of my page floating just where I want it above my container div. The container div is aligning perfectly with the menu, but my issue is that the three column divs within the container seem to be aligning to the left instead of where I want them to be which is aligning to the center. I've tried <div id="center-body" align="center"> in my masterpage.master file but the divs are not aligning center as I thought they would...

You can see the problem in the attached screenshot, I've set the background color of the container to blue just so the problem can be seen more clearly, but this will be set back to black when I have this small issue sorted...

Here's my css code so far...

#center-body
{
width: 900px;
top: 180px;
height: 550px;
margin-left: auto;
margin-right: auto;
background-color: #00f;
text-align: center;

#content-left
{
display:inline;
width: 300px;
margin-left: 0px;
margin-right: 0px;
padding: 4px;
height: 500px;
float:left;
}

#content-right
{
display:inline;
width: 175px;
margin-left: 0px;
margin-right: 0px;
margin: 0px;
padding: 4px;
height: 500px;
float: left;
}

#content-middle
{
display:inline;
width: 385px;
margin-left: 0px;
margin-right: 0px;
margin: 0px;
padding: 4px;
height: 500px;
float:left;
}

dreamlogic · 02-06-2009 9:40pm

If you want to increase the left margin, then you shouldn't have the margin specified as 0:

#content-left
{
display:inline;
width: 300px;
margin-left: 0px;

Also you should be separating your content(text) rules from your layout rules.
Use this:

p { text-align:center }

Then enclose your content in paragraph tags.

Hope that helps.

Darragh29 · 02-06-2009 10:03pm

dreamlogic wrote: »

If you want to increase the left margin, then you shouldn't have the margin specified as 0:

Also you should be separating your content(text) rules from your layout rules.
Use this:

p { text-align:center }

Then enclose your content in paragraph tags.

Hope that helps.

I see what you mean, but does that not apply to content??? I already have that text-align:center in my #center-body{} script... It's the actual divs I want to center within the container div, not the content in the three column divs.... But thanks for the suggestion DL...

Liam Byrne · 02-06-2009 10:05pm

Darragh29 wrote: »

The container div is aligning perfectly with the menu, but my issue is that the three column divs within the container seem to be aligning to the left

That's what float:left does, in order to put the things beside each other.

If you want the left column to have a margin, then give it one, or else set the margin to "auto" (not sure if this will work fully cross-browser).

Darragh29 · 02-06-2009 10:09pm

Liam Byrne wrote: »

That's what float:left does, in order to put the things beside each other.

If you want the left column to have a margin, then give it one, or else set the margin to "auto" (not sure if this will work fully cross-browser).

I've tried that and it looks grand on my PC, then I view the page on another PC in the office with a wider screen and it doesn't look right because it's working from the left of a bigger screen. I'll try the auto trick. I would have used a table to do this only tables are apparently back in the 1990's now...

Also what happens when I use the left margin as suggested above, is that the 3rd column div (the one on the right), gets shoved down to below the first column div (the one on the left)...

Liam Byrne · 02-06-2009 10:33pm

Darragh29 wrote: »

I've tried that and it looks grand on my PC, then I view the page on another PC in the office with a wider screen and it doesn't look right because it's working from the left of a bigger screen.

You can use percentages the same as you used to use tables, e.g.

5% margin; 20% left column +
5% margin; 40% content column +
5% margin; 25% right column

Mind you, since percentages can make paragraphs look like lightweight single-lines and cause havoc with graphic sizes, most people would set a width* for the overall content area with margin-left and margin-right set to auto, and have the content centred.

Target screen = 800x600 or larger = approx 760px
Target screen = 1024x768 or larger = approx 990px

Darragh29 · 02-06-2009 10:37pm

It's hard to believe that what you could do with a table in 1996, you can't actually do with a css div in 2009... I have to fiddle around with the container and the margins and it doesn't look the same in IE as it does in FF. All because 3 divs cannot be properly centered within a container. :rolleyes:

Liam Byrne · 02-06-2009 10:43pm

Darragh29 wrote: »

It's hard to believe that what you could do with a table in 1996, you can't actually do with a css div in 2009... I have to fiddle around with the container and the margins and it doesn't look the same in IE as it does in FF. All because 3 divs cannot be properly centered within a container. :rolleyes:

Common misconception, plus try adding content to those aforementioned tables and keeping proper alignment.

Yes, it's a learning curve, Darragh, but once mastered it's streets ahead of the tag-heavy, inflexible and confusing tables. And with no stupid spacer graphics.

Not only that, but in CSS-compliant browsers (i.e. excluding IE6) you can set up to THREE widths for each column; a minimum width, a maximum width AND a flexible width.

So once you've mastered it, there's NO comparison.

http://www.intensivstation.ch/files/en_templates/2/template-1-3col.html

Darragh29 · 02-06-2009 10:48pm

I think I have it where it will do... I'm nearly afraid to view it on another monitor now...

Liam Byrne · 02-06-2009 11:06pm

Darragh29 wrote: »

I think I have it where it will do... I'm nearly afraid to view it on another monitor now...

Unfortunately, if it's a public website, that's usually not good enough.

Darragh29 · 03-06-2009 2:02am

It's looking good now on all monitors except very small ones where it starts acting up again. It looks excellent I think until it goes wonky on a small screen. I'll send on the link tomorrow...

CSS issue...

Comments