CODEWITHSUNDEEP
csshtmlresizeoverflow
Mike Nielsen
Mike Nielsen

Reputation: 331

CSS div overflow with absolutely positioned elements

I have an absolutely positioned layout with three main divs: the header, the left options column, and the content column. The designed behavior is to have the header and left option column stay on the page at all times, while the content column is able to freely scroll up and down (picture a control panel to the left and title bar at the top).

The problem is window resizing and left-right (x-axis) overflow within the content div. My desired behavior is to have a minimum width of about 1000 pixels, at which point a horizontal scrollbar shows up within the content column and allows the user to scroll over. This prevents the window from being resized so small to the point where my layout no longer looks as intended.

I had attempted to use the min-width directive within my existing CSS, but to no avail. min-width DOES achieve the "cutoff" I'm looking for, however, no horizontal scrollbar turns up and I am unable to scroll horizontally.

Is there a way to do this using the existing paradigm, or does the style sheet need to be done differently? The following is my existing implementation (with the min-width attribute I have been testing for content_column):

html {
    overflow: hidden; 
}

body {
    margin: 0px;
    padding: 0px;
    background: #E5E5E5;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    border: 0px none;
}

#header {
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 0px;
    display: block;
    color: #FFFFFF;
    background: #146647;
    font-size: 1.5em;
    padding: 5px;
    width: 100%;
    overflow: hidden;
    z-index: 3;
}

#option_column {
    position: absolute;
    left: 0px;
    top: 40px;
    bottom: 0;
    background: #0F4C35;
    color: #FFFFFF;
    width: 155px;
    padding: 3px;
    z-index: 2;
    overflow: auto;
}

#content_column {
    position: absolute;
    overflow: auto;
    min-width: 1000px;
    z-index: 1;
    top: 40px;
    left: 161px;
    right: 0px;
    bottom: 0px;
    padding: 3px;
    background: #E5E5E5;
    color: #000000;
    font-size: 14px;
}

And this is my HTML structure:

<body>
    <div id="header">
        Head
    </div>

    <div id="option_column">
        Option Column
    </div>

    <div id="content_column">
        <div class="header_text">Content Header</div>
        <div id="subheader">
            Content (content_column intended to stop resizing at 1000px)
        </div>
    </div>

</body>

Upvotes: 2

Views: 1457

Answers (2)

user2014963
user2014963

Reputation:

On the contents section set

width:1000px;

overflow-y: auto;

But this way the width will always stay at 1000px. In other words, as follows

#content_column {
position: absolute;
width: 1000px;
overflow-y: auto;
overflow-x:scroll; /* override overflow:hidden; applied to body & html */
z-index: 1;
top: 40px;
left: 161px;
right: 0px;
bottom: 0px;
padding: 3px;
background: #E5E5E5;
color: #000000;
font-size: 14px;
}

Upvotes: 1

isherwood
isherwood

Reputation: 61079

What does 

#content_column {overflow-x: scroll}

do? Note that IE < 9 doesn't do axis-specific overflow, so you'd have to use {overflow: scroll}.

Upvotes: 0

Related Questions