[help] Minor Css Assistance

Hi all, I'm making a site with a 165px side-bar, and a main section that needs to span the remainder of the page. This is what I've got in my CSS:

html, body {
  width:100%;
  height:100%;
}

div.menuframe {
  position: absolute; 
  left: 0px; 
  top: 0px; 
  width: 165px;
  height: 100%; 
  z-index: 101; 
  background: #A3001D url(./images/TableOfContents/menuFrameBG.gif) top left no-repeat;
  text-align: center;
}

.mainframe {
  position: absolute; 
  left: 165px; 
  top: 0px; 
  right: 0px;
  border: none;
  width: auto; 
  height: 100%; 
  z-index: 100;
}

In Mozilla, the right: 0px; properly expands the .mainframe so that it fills the remaining horizontal space, but in IE it's only about 300px wide, and won't expand to the right edge of the window.

Anyone have any suggestions for me?

#196121

It'd also help to see the structure of your (X)HTML, if you wouldn't mind...

Nothing major, just the general layout of the divs et al., and their relation to one another...

If you can do that, I can provide you with the exact solution, and what you'd need to change where, and why (I've been doing this sort of layout work a lot of late).

#196123

Try this:

.mainframe {
 margin-left: 165px;
}

I have found that Absolute position is not needed in this situation.

Of course, it would be nice to see your (X)HTML code.

EDIT: Stevie, I think I may have beat you.

#196129

Originally posted by kjwebb@Jul 30 2004, 02:19 PM
EDIT: Stevie, I think I may have beat you.

<{POST_SNAPBACK}>

That all depends on how his (X)HTML is structured

Also, I may be able to provide a more elegant reworking of his document structure

#196132

Allright guys, the site I'm working on is at www.descore.com, right now I've got a javascript running onLoad to dynamically size the frame (yes, it's an iframe.. I didn't design it, I'm just "improving" it as best I can, in a short timeframe.) The code's there.

Thanks for the quick replies.

#196133

Ok, rather than absolutely positioning your elements, try floating div.menuframe left, and set .mainframe, as kjwebb said, to have 165px left margin.

That'll be more consistent in most browsers, unless you apply a margin to the floated menuframe (in which case, you'll need to apply a hack or two).

#196134

Allright, I'll give that a shot.. and I don't intend on applying margins to my floaty menuframe

#196135

I have looked at your CSS code for the .mainframe class.

Add this:

.mainframe {
  
  margin: 0 0 0 160px; 
  
  width: auto; 
  height: 100%; 

	}

EDIT: I forgot to say I have tested this in both Firefox and IE, and it works as requested in your first post.

#196137

Tried those things, none of them worked. kjwebb, are you sure it wasn't the javascript resizing the frame? I've removed the javascript, check again: www.descore.com

Also, Stevie, you'll notice the two main sections are now floating freely, unconstrained by the absolute positioning.. still no go

#196151

Originally posted by Cerebral@Jul 31 2004, 12:22 AM
Tried those things, none of them worked. kjwebb, are you sure it wasn't the javascript resizing the frame? I've removed the javascript, check again: www.descore.com
Also, Stevie, you'll notice the two main sections are now floating freely, unconstrained by the absolute positioning.. still no go
<{POST_SNAPBACK}>

Strange that it didn't work. Try the code in the attached text file.

www.descore_1_.txt

Attachment: www.descore_1_.txt

#196153

kjwebb, the code in the attached text file still uses javascript to resize the frame, check out the tag. It works (so long as I don't specify a doctype), but I'd like to steer away from that, if possible.

#196160

Originally posted by Cerebral@Jul 31 2004, 12:50 AM
kjwebb, the code in the attached text file still uses javascript to resize the frame, check out the
tag. It works (so long as I don't specify a doctype), but I'd like to steer away from that, if possible.

<{POST_SNAPBACK}>

Just for your information, I have got the iFrame resizing pefectly in IE. I just need to fix the Firefox hic-up that has appeared.

#196166

Originally posted by kjwebb@Jul 30 2004, 11:03 AM
Just for your information, I have got the iFrame resizing pefectly in IE. I just need to fix the Firefox hic-up that has appeared.
<{POST_SNAPBACK}>

Thanks a ton for your help kj, it's greatly appreciated.

#196172

Originally posted by Cerebral@Jul 31 2004, 01:11 AM
Thanks a ton for your help kj, it's greatly appreciated.
<{POST_SNAPBACK}>

Your welcome.

Attached is the latest version of the HTML code I was working on. It has the iFrame being resized by the CSS. The html>body #iwrapper is just to make sure that the iFrame doesn't fly off the right hand side of Firefox (The problem that I was having).

www.descore_2_.txt

Attachment: www.descore_2_.txt

#196175

I seem to have fixed it, using stevie's floating and margins idea, and adding a containing div around the iframe. There's a margin issue in IE that's hardly noticable tho, that I'm gonna look at.

Once again, thanks a lot for your help, guys.

#196176