22 replies [Last post]
KirstyB
KirstyB's picture
Offline
Regular
United Kingdom
Last seen: 14 years 33 weeks ago
United Kingdom
Joined: 2006-01-13
Posts: 24
Points: 0

Hi,
I've been teaching myself CSS through a mixture of reading books and modifying free scripts I've found online. Anyway, I've designed my website now and everything was looking great on my monitor but when I uploaded it, it appeared differently on the computers in the office that had different sized monitors or used a different resolution to 1024 x 728.

I found out that this was largely due to the fact that I was using absolute positioning not relative.

The page is www.bandm.co.uk/Index.asp

The problem only occurred with the three content boxes in the centre of the page (referenced as .toprow .middlerow and .bottomrow in my CSS file) I've managed to change it so the top two appear as they should in all browsers now.

My problem is '.bottomrow'. With all three rows set at 'position:relative;' the '.bottomrow' doesn't show at all in my browser. I've added a 'z-index' in case it appears underneath '.middlerow' and have tried changing the percentage of the 'top' value. The only way it appears is if I change the 'top' value to 'inherent;' but then it overlaps '.middlerow'.

I've attached the external CSS file that Index.asp references so that you can see what I've done.

Is this something easy that I've missed or have I got it all wrong?

Thanks

Kirsty

drhowarddrfine
Offline
Leader
Last seen: 12 years 1 week ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Newbie Problem with positioning

Validate your code. You have several errors.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 20 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Newbie Problem with positioning

also the top box appears to be underneath the blue banner at the head of your page in FF1.5

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

KirstyB
KirstyB's picture
Offline
Regular
United Kingdom
Last seen: 14 years 33 weeks ago
United Kingdom
Joined: 2006-01-13
Posts: 24
Points: 0

Newbie Problem with positioning

Hi,
Sorry I should have mentioned that at the moment it only works in IE. This will be changed as I use Safari at home myself. I've found a javascript that reads what browser you are using and tells the page to read an external CSS file thats specifically for that browser

Kirsty

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 16 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Newbie Problem with positioning

KirstyB wrote:
Hi,
Sorry I should have mentioned that at the moment it only works in IE. This will be changed as I use Safari at home myself. I've found a javascript that reads what browser you are using and tells the page to read an external CSS file thats specifically for that browser

Kirsty

Trust me, you really don't want to be doing that Evil

Verschwindende wrote:
  • CSS doesn't make pies

KirstyB
KirstyB's picture
Offline
Regular
United Kingdom
Last seen: 14 years 33 weeks ago
United Kingdom
Joined: 2006-01-13
Posts: 24
Points: 0

Newbie Problem with positioning

Um. ok.
Is there a different way to get my CSS to work in all browsers?

Now I really am confused.

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 4 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Newbie Problem with positioning

What kind of help have you gotten thus far??? What you need to start doing is using browser specific "hacks" if you want to load different style sheets for the different browsers. Right now, however, it's perfectly acceptable to put the "hacks" right into your style sheet!

Not sure what I'm talking about? Well, you really need to start using some of the layouts that are currently being used ... like a header, with a 3 column or 2 column layout beneath it and THEN your footer. Very easy to do ... and you don't need all the positioning elements!!! Let me know if you want more help ...

[email protected]

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Newbie Problem with positioning

Be cautious about using too many hacks - keep them to a minimum and keep them separate if you can otherwise they will be difficult to keep track of and fix or delete in future if you need to.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Newbie Problem with positioning

KirstyB, it should be possible with well crafted CSS to get something looking the same or virtually the same in all major browsers without the need to send them different style sheets.

This should be done by first coding your site to look right in one of the better (from a standards compliance point of view) browsers such as firefox, safari and the like.

Once you have this down you can then check in, err, less good browsers (IE) and make adjestments to make it right. As greg420blues mentioned this can be achieved using a few well places "hacks" to correct the differences but all in all there should not be too many.

You should also validate you HTML and CSS and clear up the problems. This way you'll be sure that any problems that you encounter are not caused by invalid code and are actually a problem with the browsers interpritation of your CSS.

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 4 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Newbie Problem with positioning

And just to add a bit more to that ... as mentioned before, if you're not using Firefox in your development ... please do so!! If you'll install the new Firefox 1.5 et. al. it gives you the option to install Chris Pederick's web developer tool bar. This toolbar will allow you to instantaneously turn your CSS off and on, validate your CSS, your XHTML, check for accessibility issues, etc.

If you develop USING Firefox as your testing browser, you will need very few hacks to make sure it looks good in IE or Safari or Opera or ...

If you can't find where to install the web developer's tool bar, then go directly to Chris' site and you can download it:

http://chrispederick.com/work/webdeveloper/

This toolbar is absolutely PRICELESS!!

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

KirstyB
KirstyB's picture
Offline
Regular
United Kingdom
Last seen: 14 years 33 weeks ago
United Kingdom
Joined: 2006-01-13
Posts: 24
Points: 0

Newbie Problem with positioning

Thanks,
This has given me alot to think about. I've obviously gone about my three column page from the wrong angle.

I will go away tonight and reshuffle etc. and see what I come up with. I will post my results tomorrow.

When I first created my CSS I did use Firefox and Safari as I did it at home and I don't have IE on my mac. Unfortunately all the computers at work only run IE and I had to change it a lot for it to appear correctly.

Does anyone know of some reasonable tutorials about setting out a page with header, three column layout and footer that I can play around with?

Thanks again for all your help.

Kirsty

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Newbie Problem with positioning

Just a quick tip - might be handy, but if you can't install Firefox at work, you might be able to run it from a memory stick - which is handy I find when forced to use an alien computer.

http://portableapps.com/apps/internet/browsers/portable_firefox

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 4 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Newbie Problem with positioning

I've been using the "Any Order Columns" for the past couple weeks and it rocks!!! The only hacks I end up having to put in there are usually for lists ...

http://positioniseverything.net/articles/onetruelayout/anyorder

It doesn't really use any positioning (especially not AP!) to get the results you want. Since I work for a University, we're concerned with code position in the HTML document. So, you want the middle column content to show up first in the HTML for indexing purposes. So ... it's a really simple thing to use the AOC.

If you want a quick tutorial (meaning, you don't understand the link at the top) let me know and I'll send ya a quicky!! Smile

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Newbie Problem with positioning

Can we keep help confined to the threads please Greg so that everyone can benefit.
Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

KirstyB
KirstyB's picture
Offline
Regular
United Kingdom
Last seen: 14 years 33 weeks ago
United Kingdom
Joined: 2006-01-13
Posts: 24
Points: 0

Newbie Problem with positioning

Hi everyone,
Right, I went a way and re did my CSS file and have now got it to appear in almost exactly the same way in both IE and Firefox. It also appears the same on all the monitors in the offices regardless of their settings which I am very happy about.

I found this tutorial to be very helpful:

http://css.maxdesign.com.au/floatutorial/

I am however, experiencing some new problems.

1. The column on the right (#rightnav) is set to float to the right of the page which it does but, it floats at the bottom of the page not below the header (#top) as the left column (#leftnav) does.
Is there an obvious reason for this? I tried adding margin-top values but it made no difference.

2. I've tested my site in Firefox, IE, and Safari and everything is positioned correctly. However, in IE there is a white border at the top, right and bottom of the page which I can't get rid of. The border also appears on the right side in Safari.

I've managed to remove the border from the left side by adding this:
margin-left: -10px;
without any problems but it doesn't seem to work with the other edges in IE. It works perfectly in Firefox though.

You can see my page at
www.bandm.co.uk/Index.asp

and this is my new improved CSS:

/* CSS Document */

#Container {
width: 100%;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
margin-bottom: -10px;
background-color:#fff;
color:#333;
font: 11px verdana, arial, helvetica, sans-serif;
}

#top {
padding-top: 1.2em;
padding-left: 1em;
padding-bottom: .2em;
background-color: #000099;
}

#top h1 {
padding: 0;
margin: 0;
color: #FFFFFF;
font: 28px verdana, arial, helvetica, sans-serif;
font-weight:900;
}

#leftnav {
float: left;
width: 15%;
margin: 0;
padding: 1em;
background-color: #EBE9E9;
}

#rightnav {
float: right;
width: 20%;
margin-right: 0px;
padding: 1em;
background-color: #EBE9E9;
}

#content {
margin-left: 20%;
margin-right: 25%;
margin-top: 2%;
border: 1px solid gray;
padding: 1em;
}

#footer {
clear: both;
padding: .5em;
background-color: #000099;
}

#footer p {
padding-top: .5em;
padding-bottom: 1em;
padding-left: 1em;
margin: 0;
color: #FFFFFF;
font: 9px verdana, arial, helvetica, sans-serif;
line-height: 130%;
}

h1 {
margin:0px 0px 15px 0px;
padding:0px;
color: #FFFFFF;
}

h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}

h3 {
margin:0px 0px 15px 0px;
padding:0px;
color:#999999;
font-size:28px;
font-weight:28px;
}

h4 {
font:bold 10px/12px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}

p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}

a.BodyLinks {
color:#000099;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.BodyLinks:link {color:#000099;}
a.BodyLinks:visited {color:#000099;}
a.BodyLinks:hover {color:#FF9900;}

a.HeaderLinks {
color:#FFFFFF;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.HeaderLinks:link {color:#FFFFFF;}
a.HeaderLinks:visited {color:#FFFFFF;}
a.HeaderLinks:hover {color:#FF9900;}

Thanks for everyone's help I have learnt alot through the problems that have come up.

Kirsty

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 20 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Newbie Problem with positioning

KirstyB

The right nav would need to be above the content in order for your floats to work.

(i think)

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 4 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Newbie Problem with positioning

Maybe I'm jumping the gun by not going over your CSS, but I noticed that you were floating that right column, well, right. The funny wierd thing about the One True Layout is that you need to float everything left. Don't know why it works, but it does. So long as the combined width of all three columns is LESS than the total width of the document all the columns should line up one after the other in the order you put them in your HTML code. For instance:

Left Column 19%
Middle Column 60%
Right Column 19%

I've noticed this phenomenon MOSTLY when using percentages. If you use a fixed width, then generally you don't experience this. All you have to do is make the total width of all the columns equal to or less than the total width of the wrapper ... at least in my experience.

Next tip? Learn how to put the middle column coding BEFORE the left or right column coding in your HTML!!! It's easy!!! It's a matter of using positive/negative LEFT margins. So, if you want your middle column to appear first in your coding (for indexing purposes) then you give it a positive left margin of 20%. Since it appears first in your coding, it's going to try and line up to the left of the page. So give it a 20% margin on the left (enough to open up space for the left margin) and it will scoot over for you.

Then, if you have the left column next in order in the coding, give that left column a negative left margin of the width of your middle column PLUS how far to the left you want it to be (probably left justified) ... 79%.

Now you've got the middle column in the middle and the left column on the left. The last order is to get that right column to appear after the middle column, right? Well, because of the order of your HTML coding, it's going to try and place itself just after the LEFT column. SO, to get it to scoot over after the middle column ... give it a positive LEFT margin of the width of the middle column ... 60% and it should line up for you!! Make sense?

Let me know if you want me to expand ... it was easier for me to learn with fixed width. You can also go over the "One True Layout" and "Any Order Columns" here:

http://positioniseverything.net/articles/onetruelayout/

http://positioniseverything.net/articles/onetruelayout/anyorder

Notice that they're both on the same site. I work for a university in Texas and we've been using the Ruthsarian Method for laying out three columns. Since I've mastered this method, however, we're migrating to this ASAP as it is FAR FAR FAR FAR less confusing and uses up a LOT less code. It is much more elegant ...

Good luck!!!

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

KirstyB
KirstyB's picture
Offline
Regular
United Kingdom
Last seen: 14 years 33 weeks ago
United Kingdom
Joined: 2006-01-13
Posts: 24
Points: 0

Newbie Problem with positioning

Hi Greg,

I'm a bit confused now. I went back to the beginning yesterday and redid my CSS file and have now managed to get it working using float: left; and float: right;

I fixed my first problem today by reordering my HTML document so that where as before I had it in this order:

header, leftnav, content, rightnav, footer

I put rightnav above content as suggested by fatfreddie above (Cheers) which corrected the issue I was having with the right column on my page.

Anyway, I've gone back to your post to try and figure exactly why I couldn't get your way to work and followed your instructions exactly and it still doesn't work.

This is my CSS:
/* CSS Document */

#Container {
width: 100%;
height: 100%;
margin:-10px;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
font: 11px verdana, arial, helvetica, sans-serif;
}

#top {
padding-top: 1.2%;
padding-left: 1%;
padding-bottom: .2%;
background-color: #000099;
}

#top h1 {
padding: 0;
margin: 0;
color: #FFFFFF;
font: 28px verdana, arial, helvetica, sans-serif;
font-weight:900;
}

#leftnav {
float: left;
width: 19%;
margin-left: -79%;
padding: 1%;
background-color: #EBE9E9;
}

#rightnav {
float: left;
width: 19%;
margin-left: 60%;
padding: 1%;
background-color: #EBE9E9;
}

#content {
float: left;
width: 60%;
margin-left: 20%;
margin-top: 2%;
border: 1px solid gray;
padding: 1%;
}

#footer {
clear: both;
padding: .5%;
background-color: #000099;
}

#footer p {
padding-top: .5%;
padding-bottom: 1%;
padding-left: 1%;
margin: 0;
color: #FFFFFF;
font: 9px verdana, arial, helvetica, sans-serif;
line-height: 130%;
}

I've uploaded my results so you can see how its behaving.

www.bandm.co.uk/Index.asp

I'm very confused as both the tutorial you linked to and your post make perfect sense to me but my page is not behaving that way.

Thanks

Kirsty

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 4 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Newbie Problem with positioning

Okay ... couple of things. First, your padding on the left, middle and right elements (1%) that you threw in there actually made the elements 2% bigger than you intended. So, you stated that you wanted the leftnav to be 19% ... but when you gave it an extra 1% on either side, it became 21% ... make sense?? I have it fixed for Firefox but will need some time for Internet Explorer.

One of the things giving you problems in this, also, is that you are using a fluid format ... the web site shrinks and grows with the size of the browser. This is not a bad thing, per se, but it definitely makes things more difficult.

Here's the code that works with Firefox (by the way, did you know that with that Web Developer toolbar, you can edit the CSS on the fly in a separate window and view things live as you make the changes to the site??) :

/* CSS Document */

body {
margin: 0;
}
#Container {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
font: 11px verdana, arial, helvetica, sans-serif;
}

#top {
padding-top: 1.2%;
padding-left: 1%;
padding-bottom: .2%;
background-color: #000099;
}

#top h1 {
padding: 0;
margin: 0;
color: #FFFFFF;
font: 28px verdana, arial, helvetica, sans-serif;
font-weight:900;
}

#leftnav {
float: left;
width: 17%;
margin-left: -80%;
padding: 1%;
background-color: #EBE9E9;
}

* html #leftnav {
margin: 0;
}

* html #content {
margin: 0 0 0 8%;
}

* html #rightnav {
margin: 0;
}

#rightnav {
float: left;
width: 17%;
margin-left: 0;
padding: 1%;
background-color: #EBE9E9;
}

#content {
float: left;
width: 58%;
margin-left: 20%;
margin-top: 1%;
border: 1px solid gray;
padding: 1%;
}

#footer {
clear: both;
padding: .5%;
background-color: #000099;
}

#footer p {
padding-top: .5%;
padding-bottom: 1%;
padding-left: 1%;
margin: 0;
color: #FFFFFF;
font: 9px verdana, arial, helvetica, sans-serif;
line-height: 130%;
}

h1 {
margin:0px 0px 15px 0px;
padding:0px;
color: #FFFFFF;
}

h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}

h3 {
margin:0px 0px 15px 0px;
padding:0px;
color:#999999;
font-size:28px;
font-weight:28px;
}

h4 {
font:bold 10px/12px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}

p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}

a.BodyLinks {
color:#000099;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}

a.BodyLinks:link {color:#000099;}
a.BodyLinks:visited {color:#000099;}
a.BodyLinks:hover {color:#FF9900;}

a.HeaderLinks {
color:#FFFFFF;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.HeaderLinks:link {color:#FFFFFF;}
a.HeaderLinks:visited {color:#FFFFFF;}
a.HeaderLinks:hover {color:#FF9900;}

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Newbie Problem with positioning

Kirsty left columns negative margin needs to be the width and left margin of the center column i.e 80% not as you have it 79% the width of the left column plus center, the right column try removing the margin left altogether.

Try not to ever add padding to main layout containers it breaks things very easily pad your inner elements such as paragraphs or an inner child div; remove those 1% paddings.

It's always best when getting layout correct to work with no content until your sure the layout is stable, your table in the right column may give you problems.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 4 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Newbie Problem with positioning

Yeah ... that's a biggie. Construct the site withOUT content first ... maybe give some absolute heights just so you can see things properl and in context ... then get the layout working!!

Once you have that done ... with no padding on the main layout elements ... THEN put your content in.

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 4 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Newbie Problem with positioning

Okie dokie ... check it out ... I'm lookin' for some good Kharma, so I've created a template for you to use. What I did was put a min-width property (which is not real good semantic coding to use right now ... AND, it doesn't work with Internet Explorer 6) so that the whole site never drops below 780px in width. That should cover about 98% of the computer monitors out there. If you ever need to change that ... well ... it's easy. You can figure that part out just by looking at the CSS.

As far as the min-width thingy is concerned, the design itself breaks up a bit (the right column drops) when the screen width gets down to about 150px ... but you're not designing this for PDAs, right? So it should be fine.

First in line is the HTML document:

**--------- DOCUMENT STARTS BELOW THIS LINE ---------**

<!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=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css" media="all">
@import url(onetrue.css);
</style>

</head>

<body>

<div id="wrapper">

<div id="head">HEAD</div>

<div id="middle">MIDDLE</div>

<div id="left">LEFT</div>

<div id="right">RIGHT</div>

<div id="foot">FOOTER</div>

</div>

</body>
</html>

**--------- DOCUMENT STOPS ABOVE THIS LINE ---------**

Okay ... now that you've got that code copied into a new document, save it as whatever you want. NOW, copy the CSS code below into a new doc and save it as "onetrue.css". You'll want to go in and remove or change all the 'background' and 'color' styles to suit your needs. I put them in there so that I could make sure things were lining up properly.

**--------- DOCUMENT STARTS BELOW THIS LINE ---------**

/* One True Layout - combined with Any Order Columns - combined with Equal Height Columns */

body {
margin: 0;
}

#wrapper {
width: 90%;
margin: 0 auto;
min-width: 780px;
overflow: hidden;
background: #333;
}

#head {
width: 100%;
background: #ccc;
}

#left {
float: left;
width: 20%;
margin: 0 0 0 -80%;
background: #99CC00;
color: #fff;
}

/* Internet Explorer HACK */
* html #left {
margin: 0 0 -32767px -72%;
}

#middle {
float: left;
width: 60%;
margin: 0 0 0 20%;
background: #6699CC;
display: inline;
color: #fff;
}

/* Internet Explorer HACK */
* html #middle {
display: inline;
margin: 0 0 -32767px 18%;
}

#right {
float: left;
width: 20%;
margin: 0;
background: #009900;
color: #fff;
}

/* --[ The code below plus the 'overflow: hidden;' style on the wrapper makes all the columns the same height ]-- */
/* --[ For questions about this, go to 'http://positioniseverything.net/articles/onetruelayout/equalheight' ]-- */

#left,
#middle,
#right {
padding-bottom: 32767px;
margin-bottom: -32767px;
}

#foot {
clear: both;
float: left;
width: 100%;
margin: 0;
background: #003300;
color: #fff;
}

**--------- DOCUMENT STOPS ABOVE THIS LINE ---------**

All you should have to do now is go in and put your code in the HTML document and you should be good to go!! Hope this helps you out. Let me know how it goes ...

greg

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

KirstyB
KirstyB's picture
Offline
Regular
United Kingdom
Last seen: 14 years 33 weeks ago
United Kingdom
Joined: 2006-01-13
Posts: 24
Points: 0

Newbie Problem with positioning

Wow Greg,

Thanks for all your effort it is really appreciated.

I think I've got it now. It appears pretty much as I wanted now.

I still have a white bit on the right side of #rightnav in Firefox and Safari and #content isn't quite central in IE but I can live with these things for now as my whole site is going live on Monday and I have a few things to fix before it does.

Thanks for your help though it has been fantastic and certainly a real eye opener about what can be achieved in CSS.

I've uploaded the page again so you can see.

www.bandm.co.uk/Index.asp

and this is my CSS

/* CSS Document */

body {
margin: 0;
}

#Container {
width: 100%;
height: 100%;
margin:0px;
padding: 0px;
overflow: hidden;
background-color: #FFFFFF;
color: #000000;
font: 11px verdana, arial, helvetica, sans-serif;
}

#top {
padding-bottom: 1%;
background-color: #000099;
}

#top h1 {
padding: 1% 0 0 1%;
margin: 0;
color: #FFFFFF;
font: 28px verdana, arial, helvetica, sans-serif;
font-weight:900;
}

#top p {
padding-left: 1%;
}

#leftnav {
float: left;
width: 15%;
margin-left: -78%;
padding: 1%;
background-color: #EBE9E9;
}

/* Internet Explorer HACK */
* html #leftnav {
margin: 0 0 -32767px -76%;
}

#content {
float: left;
width: 56%;
margin-left: 20%;
margin-top: 2%;
border: 1px solid gray;
padding: 1%;
}

/* Internet Explorer HACK */
* html #content {
display: inline;
margin: 0 0 -32767px 18%;
}

#rightnav {
float: left;
width: 16%;
margin-left: 2%;
padding: 1%;
background-color: #EBE9E9;
}

/* Internet Explorer HACK */
* html #rightnav {
margin: 0 0 -32767px 5%;
}

#leftnav,
#content,
#rightnav {
padding-bottom: 32767px;
margin-bottom: -32767px;
}

#footer {
clear: both;
float: left;
width: 100%;
margin: 0;
padding: .5%;
background-color: #000099;
}

#footer p {
padding-top: .5%;
padding-bottom: 1%;
padding-left: 1%;
margin: 0;
color: #FFFFFF;
font: 9px verdana, arial, helvetica, sans-serif;
line-height: 130%;
}

h1 {
margin:0px 0px 15px 0px;
padding:0px;
color: #FFFFFF;

}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
h3 {
margin:0px 0px 15px 0px;
padding:0px;
color:#999999;
font-size:28px;
font-weight:28px;
}
h4 {
font:bold 10px/12px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}

a.BodyLinks {
color:#000099;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.BodyLinks:link {color:#000099;}
a.BodyLinks:visited {color:#000099;}
a.BodyLinks:hover {color:#FF9900;}

a.HeaderLinks {
color:#FFFFFF;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.HeaderLinks:link {color:#FFFFFF;}
a.HeaderLinks:visited {color:#FFFFFF;}
a.HeaderLinks:hover {color:#FF9900;}

Thanks again you have some seriously good karma for all your help.

Kirsty