CODEWITHSUNDEEP
htmlcsspositioningcss-position
UserX
UserX

Reputation: 1229

Absolute position and overflow:auto without a scroll bar appearing

I don't know if this is possible with only html and css, but I have an absolute div inside a relative container and want to have a regular div under the container.

HTML:

<div id="container">

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

</div>

<div id="footer">

</div>

CSS:

#container{


position:relative;
overflow:auto;



}

#content{

position:absolute;
width:955px;
z-index:1000;


}

The goal is to prevent the "content" div from overlapping into the footer. It worked with overflow:auto, but I got another vertical scrollbar appearing for the container div.

Any other ways to get around this?

Upvotes: 1

Views: 4411

Answers (3)

Jay
Jay

Reputation: 4686

You'll have to change the layout differently since element with absolute position doesn't have a layout space. Like this:

<html> 
<head>
<style>
#container{
position:relative;
}
#absoluteContent{
position:absolute;
width:955px;
z-index:1000;
}
</style>
</head>
<body>
<div id="container">
  <div id="absoluteContent">
    <div id="content">content
    </div>
    <div id="footer">footer
    </div>
  </div>
</div>
</body>
</html>

Upvotes: 0

ObstacleCoder
ObstacleCoder

Reputation: 170

It is possible to do this with only HTML and CSS. You may find the setup of the HTML and CSS code from http://www.cssstickyfooter.com/ useful since it is using the same layout as your code and it trying to achieve a similar goal.

I have combined the code used to create a sticky footer with your code in the Fiddle below:

http://jsfiddle.net/bPybY/1/

Upvotes: 0

Cyber
Cyber

Reputation: 382

So, how about hiding only vertical scrollbar: 

#container {
    position: relative;
    overflow: auto;
    overflow-y: hidden;
}

?

If you're looking for something more fancy to hide scrollbars then you could use JavaScript mousescroll event to do it. http://viralpatel.net/blogs/2009/08/javascript-mouse-scroll-event-down-example.html Or you could use some jquery plugin to handle scrollbars, there are plenty of them, jScrollpane, Scrollable...

Upvotes: 1

Related Questions