3 page layout - positioning question.

[ktown]

hey all

i'm trying to follow this format http://www.projectseven.com/whims/cs...oxnoscript.htm

when they say
"This div is positioned left:24px and has a width of 160px."

i have this for my css

#left {
  position: absolute;
  margin: 24px;
  width: 125px;
  }

did i interpret correctly?
or is my code wrong?

thanks.

[Indicator]

I think, if you were using absolute positioning, it would be:

#left {
position: absolute;
left: 24px;
width: 160px: /*Don't forget the box model hack*/
}

[ktown]

neat works better!
what is the /*Don't forget the box model hack*/ ? sorry if this is astupid question... i seem to be full of them lately

[Fleeters]

The box model hack is for IE 5.x. it displays the boxes incorrectly. I am not at home right now to give any links or the actual hack. if no one has posted it by tonight i will post it for you.

[Indicator]

http://www.google.com/search?q=box+m...utf-8&oe=utf-8

Try Google. It works.

[ktown]

hey all, and thanks again..
i've managed to throw together something here...
http://nicotine.golden.net/~nina/CO2/layout.html

my css is there as well.. now if i was to apply the box-model-hack - i undestand why i need to do this... but odn't understnad how to approach it..

i have a list here... which one do you recommend?

the box-in-a-box?
tantek hack?
Simpliefied Box model hack?
or one of the other ones?

the problems iwth my current layout

1. EI - the blue box on the right - doesn't wrap - i think this is because my margin-left:160px - is this a model hack problem?

2. In opera - the margin between the main content area and the blue ads area is too big - i thihk again this is because of my margin-left:160px

other than that - it doesn't seem too too bad, would someone please send me in the right direction

thanks again
~nina

[ktown]

oh yeah, and my footer doesn't work

but if for now someone could just suggest a hack to use - for the problem that i am having... that would be great!

[Fleeters]

this is the box model hack....

#box{
position:relative;
padding:0 2px 0 2px;
margin:0;
width:204px; /*what IE 5.x sees
voice-family:inherit;
voice-family: "\"}\"";
width:200px; /* what others see.
}

[Fleeters]

im not sure exactly what your problem is but i hope this helps

[ktown]

thanks fleeters... i don't think that is my problem though i don't even use padding - this is where i wonder if i need a hack.

my css looks like this

/* CSS Document */
#top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  }
#left {
  position: absolute;
  left: 0px;
  margin-top: 125px;
  width: 160px;
  }
#center {
  position: absolute;
  left: 0px;
  margin-left: 175px;
  margin-top: 140px;
  width: 65%;
  }
#right {
  position: absolute;
  left: 67%;
  margin-left: 160px;
  margin-top: 125px;
  }
#footer {
  clear: both;
  visibility: hidden;  
  margin: 0px;
  }

[ktown]

for now what i have to do is put tables inside the top left and right sections... just for nn4's sake. but simple ones... i just can't have nested css inside the main content which is why i'm doing it like this... BUT i am wondering why it is that i am getting the no wrap around my right hand column in EI and why the margin is larger in opera 7 -

is there a way of creating a separate sheet for opera? because i think it doesn't like this part

#right 
  { position: absolute; 
  left: 67%; 
  margin-left: 160px; 
  margin-top: 125px; }