CSS - Scrolling Content With Fixed Portions

Hi folks,

I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE.

I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page.

Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all.

I've got a problem with my css.
It consists of 1 header {header}
2 navigation divs {navigation/extra}
1 content div {content}
and 1 footer {footer}

the 2 content divs have fixed widths (200px) and the content needs to be able to stretch the rest of the window. easy? Yea i thought so, but i can't get it working, if i set the content div to a % and the window resizes it all stuffs up...

there has to be a way around this? I guess i need the syntax for 100%-200px.

below is the code

Code:

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}

/* Layout */

div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}
div#content{float:right;position:absolute;margin-left:200px;width:100%}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px;}
div#footer{clear:both;width:100%; position:fixed}

Not sure if this is a CSS question or a Javascript question. Leaning towards CSS so here goes:

Please refer to:

http://www.larreamma.com/

When the page is first loaded the scrolling 'News & Events' content initially displays... outside the container it is allocated to(?). That is, a couple of lines briefly display below the 'News & Events' background. Once it is "loaded" it displays within the box, as expected. Can this be eliminated?

The scroller being used is 'DOMnews 1.0' from http://onlinetools.org/tools/domnews/ . I had inquired there some time ago but have not gotten a reply.

Thank you in advance.

Can someone point me to a tutorial (or if it's easy enough, just show me here) where I can learn how to make a scrolling div? Ideally, one that looks like this (this would be on a black-backgrounded page):



Thanks!...

Hello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge.

So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course)

Like this pictu tinyurl.com/ydsr2ov

I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour.

I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas?

This is the technique I've been using:

Code:

<div id="header-fluid">
<div id="header-fixed">

<div id="header"></div>
<div id="nav"></div>

</div><!-- head-fixed -->
</div><!-- head-fluid -->

Code:

<div id="content-fluid">
<div id="content-fixed">

<div id="content"></div>

</div><!-- content-fixed -->
</div><!-- content-fluid -->

Code:

<div id="footer1-fluid">
<div id="footer1-fixed">

<div id="sponsors"></div>

</div><!-- footer1-fixed -->
</div><!-- footer1-fluid -->

Code:

<div id="footer2-fluid">
<div id="footer2-fixed">

<div id="copyright"></div>

</div><!-- footer2-fixed -->
</div><!-- footer2-fluid -->

Thanks for your time on this!!
Hanek

I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense?

Any help would be greatly appreciated, thanks

Hi Guys,

I'm trying to create a footer for a web page. The content displayed will change dynamically from article to article that is posted.

The footer is a simple div that has centered text stating "page posted by $membername on $date"

What I want is if the article is not long enough to push the footer all the way to the bottom, that it would be fixed to the bottom of the screen (not the page).

Is this possible? For instance, someone posts an article that is long enough that you would need to scroll down to see the entire page. The footer would be ok being placed just after the article. But if the article is very short, just like 1 paragraph.. the footer would show halfway up the page.

Ideas?

When content exceeds the window size, the fixed footer covers it.

The center div has a min-width, the right div covers it when the window is resized to smaller than the min. (Also, center div drops in IE). I have googled these issues and searched the archives.

I've tried many different techniques for getting these things in order, and this is the closest I've gotten so far.

What I want:

1.A footer that sticks to the bottom of the viewport if there is
not enough content AND stays below the container when the container is longer than the viewport.

2. The center div to be liquid with a min-fixed width and the right div to move along the edge of the center div and not cover it when viewport is sized smaller than the center div's min width.


Here is a simplified version of the HTML (none of the extra divs that are used to make rounded corners)
Code:

<!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>Troubleshooting</title>
<link rel="stylesheet" href="layout8.css" type="text/css"  />
<link rel="stylesheet" href="round.css" type="text/css"  />

</head>
<body>

<div id="header">
<div id="masthead"></div>
<div id="topnav"><div class="searchbar">Search</div>
<div class="homebar"><span>Home </span></div></div>
</div>

<div id="container">
<div id="left"></div>
<div id="right"></div>

<div id="content"></div>
</div>
<div class="clear">&nbsp;</div>

</div>
 <div id="footer"></div> 
</body>
</html>

I think there's too much CSS to post here, but everything can be found at:

www. observera. com/troubleshootingpage/index. htm

CSS @ layout.css and round.css

I appreciate any help you can offer

Em

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu.

here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu.
http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm

Also , i get wierd result in netscape navigator. please help

How can I fix a Div a set distance below another Div without a set height?

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.