www.webdeveloper.com
Results 1 to 11 of 11

Thread: Expanding div vertically to accommodate content

  1. #1
    Join Date
    Nov 2013
    Posts
    17

    Expanding div vertically to accommodate content

    I have basically 3 divs. Top horizontal for title etc. And two vertical ones. Float left and float right. On the left side I input data in the form and it is shown on the right side. But when there is more posts div doesn't grow to accommodate all posts?


    Code:
    header{
      	position:fixed;
      	top:0px;
      	height:15%;
      	left:0px;
      	right:0px;
      	background-color:#333;
      	color:#FFF;
      	z-index:10;
     	opacity:0.6;
     }
     #left{
     	position:absolute;
     	top:15%;
     	bottom:0px;
     	width:50%;
     	height:100%;
     	left:0px;
     	background-color:#900;
     	color:#FFF;
     	z-index:8;
     	overflow:hidden;
     	clear:both;
     }
     #right{
     	position:absolute;
     	top:15%;
     	bottom:0px;
     	width:50%;
     	height:100%;
     	right:0px;
     	background-color:#999;
     	color:#FFF;
     	z-index:8;
     	overflow:hidden;
     	clear:both;
     }

  2. #2
    Join Date
    Jan 2014
    Posts
    4
    Have you tried removing the height?

  3. #3
    Join Date
    Nov 2013
    Posts
    17

    Unhappy

    Quote Originally Posted by Rickjb39 View Post
    Have you tried removing the height?
    Yes. I tried to put it to 100% or auto or to remove it all together. When I remove it or put it on auto it wont scroll. If I put it to 100% it just scrolls little bit,and that's it. I guess it scrolls since it's 15% from top so it scrolls 15% up and down.

  4. #4
    Join Date
    Oct 2013
    Posts
    545
    Have you tried min-height:100%; ?

  5. #5
    Join Date
    Nov 2013
    Posts
    17
    Quote Originally Posted by Kevin2 View Post
    Have you tried min-height:100%; ?
    Same thing as b4. It just scrolls 15% up-down. Don't know WTF is problem here! Bellow is the css code.

    HTML Code:
    /* CSS Document */
    body{
    	background-color:#383838;
    }
    header{
    	position:fixed;
    	top:0px;
    	height:15%;
    	left:0px;
    	right:0px;
    	background-color:#282828;
    	color:#FFF;
    	z-index:10;
    	
    }
    #left{
    	position:fixed;
    	top:15%;
    	bottom:0px;
    	width:50%;
    	height:100%;
    	left:0px;
    	background-color:#900;
    	color:#FFF;
    	z-index:8;
    	overflow:hidden;
    	clear:both;
    }
    #right{
    	position:absolute;
    	top:15%;
    	bottom:0px;
    	width:50%;
    	min-height:100%;
    	right:0px;
    	background-color:#383838;
    	color:#FFF;
    	z-index:8;
    	overflow:hidden;
    	clear:both;
    }
    #formaobjavi{
    	position:absolute;
    	left:20%;
    	top: 10px;
    	height:auto;
    	width:250px;
    	border-color:#fff;
    	border-width:1px;
    	border-style:solid;
    	padding:8px;
    }
    #formaobrisi{
    	position:absolute;
    	left:20%;
    	top: 180px;
    	height:auto;
    	width:250px;
    	border-color:#fff;
    	border-width:1px;
    	border-style:solid;
    	padding:8px;
    }
    #formaizmjeni{
    	position:absolute;
    	left:20%;
    	top: 285px;
    	height:auto;
    	width:250px;
    	border-color:#fff;
    	border-width:1px;
    	border-style:solid;
    	padding:8px;
    }
    article{
    	position:absolute;
    	left:10%;
    	top: 10px;
    	height:auto;
    	width:400px;
    	border-color:#fff;
    	border-width:1px;
    	border-style:solid;
    	padding:8px;
    }

  6. #6
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    177
    A page element with relative positioning gives you the control to absolutely position children elements inside of it.

    Can't see enough of your code to know for sure, however it could a positioning problem.

  7. #7
    Join Date
    Oct 2013
    Posts
    545
    Quote Originally Posted by kralcx View Post
    A page element with relative positioning gives you the control to absolutely position children elements inside of it.
    Code:
    html{
    	min-height:100%;
    	position:relative;
    }
    ??

  8. #8
    Join Date
    Jan 2014
    Location
    Boston, Massachusetts
    Posts
    66
    try overflow-y: scroll in the right div along with html min-height:100%. Let me know if it works.

  9. #9
    Join Date
    Mar 2012
    Posts
    1,729
    For the left div, you have:

    a) Used position: absolute and bottom:0 so it is using all the available height anyway. So there is nowhere to expand into.

    b) Set overflow: hidden. That tells it NOT to put up a scroll bar when the content exceeds the available space. So it doesn't.

    c) Set too many parameters. E.g. If you set top and bottom, it is pointless also setting height. You should only set two out of these three, depending upon how you want the div to respond to different display heights.

    d) If you want to set top to 15%, it is inappropriate to set height to 100%! Set it to 85%. Or, if you want the transparent header to overlap the left div, set top: 0 and height 100% (or bottom: 0).

  10. #10
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    45
    the simple solution to this problem is...

    Put '<div style="clear:both;"></div>' after the 'div #right'

    <div>
    <header></header>
    <div id="left"></div>
    <div id="right"></div>
    <div style="clear:both;"></div> <!-- The master piece -->
    </div>

    Hope to be helpfull

  11. #11
    Join Date
    Mar 2012
    Posts
    1,729
    clear:both does not work with position:absolute.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles