Jump to content

Displaying variable amount of content on site with sidebar and full page image background


NotionCommotion

Recommended Posts

Hi,

 

I have a layout with a sidebar and image background.  Please see https://output.jsbin.com/gujonedije.  If the amount of content in #custom-content exceeds a given amount, I either need a scrollbar or need the total height of the page to increase.

 

As seen, I have added a scrollbar, but it looks a little odd as it is centered in the page.  Given the sidebar, is it possible to put it on the far right of the page?

 

Or can I modify the script to allow the total height of the page to increase?  Not sure how to do this given the full page image background.

 

Thanks


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Testing template</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body class="metal">
        <div id="header">
        </div>
        <div id="middle">
            <div id="sidebar"><p>My Sidebar</p></div>
            <div id="content">
                <ul id="mainMenu"></ul>
                <div id="wrapper">
                    <div style="height:400px;">Stuff goes here.  Keep height fixed.</div>
                    <div id="custom-content">
                        <p>Page should adapt to this content.</p>
                        <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="footer-block">
                <div class="footer-bottom">
                    <ul id="subMenu" class="submenu"></ul>
                </div>
            </div>
        </div>
    </body>
</html>
#custom-content{height:400px;overflow-y:auto;}

body { font-family:Arial, Helvetica, sans-serif; background-color: #CECECE }

.right{float:right;}
.left{float:left;}
.clear { clear:both; }

#header {
    height:60px;
    background:url(http://i.imgur.com/sihSa9h.png) repeat-x #e2e2e2;
}
#middle {
    /* DONE LATER: background-image: url("../images/background3.jpg "); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height:900px;
    min-width:  1015px;/*960px(content)+50px(sidebar) plus a little extra for good measures */
}

#sidebar {
    /*background-color: #FFFFFF;
    opacity: 0.30;*/
    background: rgba(255, 255, 255, .3);
    filter: alpha(opacity=30); /*ie8*/
    border-right: 4px solid #f15a29;
    height:100%;
    width:50px;
    float:left;
}
#sidebar p {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: relative;
    top: 50%;
    font-size:30px;
    white-space: nowrap;
}

#content {margin:0 auto; width: 960px;padding-top:45px;overflow-x:auto;height:100%}

#wrapper{padding-top:20px;}

#footer {
    height:60px;
    background:url(http://i.imgur.com/juPqbXY.png) repeat-x #e2e2e2;
}
#footer .footer-block { width:960px; margin:0 auto; }
#footer .footer-bottom { clear:both; margin-top:3px; }

body.metal #middle { background-image:url(http://i.imgur.com/UlDBmPh.jpg); }

#middle div { color:#FFF; }
Link to comment
Share on other sites

If you want #wrapper to stay the same height, but #custom_content to expand the height of the page as content is entered, take #custom_content out of #wrapper and put a float: none; on both. Change 'height' to 'min-height' in the CSS for #middle. Put the background image on the body itself and set it to position: fixed, and that should do it (assuming I'm understanding the question correctly).

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.