CODEWITHSUNDEEP
htmlcsslayout
h2o826
h2o826

Reputation: 13

HTML CSS DIV Layout with Top, Left, and Right DIVs fixed with a scrolling Center DIV

Picture (no rep yet to post) https://flic.kr/p/ppcZtV

Here is what I have so far, and I am not sure the jsFiddle represents it: http://jsfiddle.net/5jeymu5f/ (I commented out stuff from my site to make the example simpler)

What I am trying to do and see the attached picture, I want basically everything fixed as they are menus of sorts. All content is entered in the purple 'content' section. Some pages get to long and you have to scroll down which kills everything up top. I have multiple 'to the top' links with an anchor, but I do not want to have to use those. The picture is just illustration for position, not correct sizes.

Also, my right pane does not even show up in the code. I tried putting fixed all over the board and not sure where to go next.

How can I, keep top wrapper, left navigation, and right space fixed in the position where they are at and just have only my middle content section scroll?

#container {
	width: 1440px;
	/* background-image: url(../graphics/wall.jpg); */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: fixed;
    background-color: #000000;
}

#top-wrapper {
	width: 1080px;
	float: left;
	/* margin: 10px; */
	/* background-image: url(../graphics/transparent.png); */
	margin-bottom: 13px;
	position: fixed;
    background-color: #DF0101;
}

#top {
	background-color: #FFEF0F;
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: 13px;
}

#pagetitle {
	width: 100%;
	float: left;
	background-color: #ffef0f;
	/* background-image: url(../graphics/caution_long.gif); 
	background-repeat: repeat;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #F63;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bolder;
	font-size: 18px; */
	height: 24px;
	clear: both;
	
}

#content-wrapper {
	float: none;
	width:auto
	background-color: #0080FF;
	width: 1080px;
	/* background-image: url(../graphics/transparent.png); */
	margin-top: 200px;
	
}

#left {
	float: left;
	background-color: #8000FF;
	width: 17%;
	margin-right: 10px;
	/* position: fixed; */
}
#content {
	float: right;
	width: 80%;
	background-color: #8000FF;
	overflow: scroll;
	height: 1080px;
}


#right {
	float: right;
	background-color: #01DF01;
	width: 20%;
	/* position: fixed; */
	clear: both;
}
<div id="container">

    <div id="top-wrapper">

        <div id="top">
            top banner
        </div>

        <div id="pagetitle">
            page title banner
        </div>
  
    </div>

    <div align="top" id="right" title="right pane">
        right pane
    </div>

    <div id="content-wrapper">

        <div id="left">
            navigation menu
        </div>
        
        <div id="content">
            main content
        </div>
  
    </div>

<div class="clear"></div>


</div>

Upvotes: 1

Views: 1764

Answers (2)

dekajoo
dekajoo

Reputation: 2102

You should remove the position: fixed from #container. Then don't use float: right for fixed elements but right: 0, it will give you a more comprehensive view of what happen. Doing this (and removing the overflow property) I come to a pretty convincing result where you just have to play with the width and the position of the divs to make it looks good. : )

#container {
    width: 1440px;
    /* background-image: url(../graphics/wall.jpg); */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: #000000;
}

#top-wrapper {
    width: 1080px;
    left: 0;
    top: 0;
    /* margin: 10px; */
    /* background-image: url(../graphics/transparent.png); */
    margin-bottom: 13px;
    position: fixed;
    background-color: #DF0101;
}

#top {
    background-color: #FFEF0F;
    width: 100%;
    float: left;
    clear: both;
    margin-bottom: 13px;
}

#pagetitle {
    width: 100%;
    float: left;
    background-color: #ffef0f;
    /* background-image: url(../graphics/caution_long.gif);
    background-repeat: repeat;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    color: #F63;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bolder;
    font-size: 18px; */
    height: 24px;
    clear: both;

}

#content-wrapper {
    float: none;
    width:auto
    background-color: #0080FF;
    width: 1080px;
    /* background-image: url(../graphics/transparent.png); */
    margin-top: 200px;

}

#left {
    left: 0px;
    background-color: #8000FF;
    width: 17%;
    margin-right: 10px;
    position: fixed;
}
#content {
    float: right;
    width: 80%;
    background-color: #8000FF;
    /*overflow: scroll;*/
    height: 1080px;
}


#right {
    right: 0px;
    background-color: #01DF01;
    width: 20%;
    position: fixed;
    clear: both;
}

Edit : Second Issue - width of content do not fit.

I've use some jQuery to solve this one, it may be possible in css but I'm more familiar with jQuery to be honest.

First the css

/* ***** Reset css ******** */
/* I've added this part since I noticed strange bwhite border due to
 * default css parameter of browser (I use Firefox) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* ************************ */


#container {
    /* width: 1440px; * deleted */
    /* background-image: url(../graphics/wall.jpg); */
    /*margin-top: 0; * deleted */
    /*margin-right: auto; * deleted */
    margin: 0;
    /*margin-bottom: 0px; * deleted */
    /*margin-left: auto; * deleted */
    background-color: #000000;
}

#top-wrapper {
    width: 1080px;
    left: 0;
    top: 0;
    /* margin: 10px; */
    /* background-image: url(../graphics/transparent.png); */
    margin-bottom: 13px;
    position: fixed;
    background-color: #DF0101;
}

#top {
    background-color: #FFEF0F;
    width: 100%;
    float: left;
    clear: both;
    margin-bottom: 13px;
}

#pagetitle {
    width: 100%;
    float: left;
    background-color: #ffef0f;
    /* background-image: url(../graphics/caution_long.gif);
    background-repeat: repeat;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    color: #F63;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bolder;
    font-size: 18px; */
    height: 24px;
    clear: both;

}

#content-wrapper {
    float: none;
    width:auto
    background-color: #0080FF;
    width: 1080px;
    /* background-image: url(../graphics/transparent.png); */
    margin-top: 200px;

}

#left {
    left: 0px;
    background-color: #8000FF;
    width: 200px; /* changed to pixel size */
    margin-right: 10px;
    position: fixed;
}
#content {
    position: relative;
    left: 200px; /* changed to pixel size (this should be equal #left.width !) */
    background-color: #8000FF;
    height: 1080px;
}


#right {
    right: 0px;
    background-color: #01DF01;
    width: 200px; /* changed to pixel size */
    position: fixed;
    clear: both;
}

Not much has been changed, only removing width from #content and changing width to pixel in #left and #right. Plz also note that you need to change the left parameter of #content to the width of right.

The jQuery in the HTML

I've added this part in the <head> of the html. I tried to explain it but if you have any question please ask.

<!-- Import of the JQuery library on the jQuery website (you can upload it and use it localy) -->
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function() {
  // Get the width of the #left and #right divs
  var leftWidth = $('#left').width();
  var rightWidth = $('#right').width();

  function setWidth() {
    // get the width that content should have basically here :
    // width of the window - width of left - width of right
    var widthContent = $(window).width() - leftWidth - rightWidth;

    // Choose here the minimal width of content
    var minContentWidth = 300;

    // set the width of content to min width if necessary
    if (widthContent < minContentWidth) {
        widthContent = minContentWidth;
    }

    // get the content div and set its width
    $('#content').css({
      'width': widthContent + 'px'
    });
  }

  // when the windows is rezised call the function resize
  $(window).on('resize', function() { setWidth(); });
  setHeight();
});
</script>

Upvotes: 0

Ksingh0590
Ksingh0590

Reputation: 11

Check this out, it looks like you are trying to do the same thing. Scrolling only content div, others should be fixed.

Adding "overflow: auto;" to your content-wrapper would do the trick. You will also need a fixed height.

Upvotes: 1

Related Questions