Position Absolute not showing all content

Hey Guys,

Got couple quick questions first would be the left navigation on my site…


  1. When you scroll the blue doesn’t go all way to the bottom, how can I resolve this issue when you scroll so that the blue background continues to the bottom?

  2. If you look at the profile, the content under About gets chopped off. I’m using Buddypress so kind of difficult to organize things so on .field_5 I used position: absolute and top: 0 and right: 0 but if the content is more then then other side it gets cut off, how can I resolve this?



Your problem with the blue bar on the left is related to the height of the <body> element. If you set the body height to 1400px then the bar goes to the bottom. The min-height CSS value is set to 100% and is correctly identifying the bottom of the body area. Perhaps your problem 2 is similarly related. I was unable to see it.


Thank you AllanP but I know there is a way to even out the left blue bar and the other columns. Everything I’ve tried just is not working out.

The second problem is an overflow issue with position: absolute in the About section on the profiles if theres more text it just gets hidden and chopped off and the div around doesnt expand down.

Got the other issue solved but still need the equal colum issue solved and going to have a sidebar column as well on the right which will need to have the pattern I put in there go to the bottom as well.



I tried doing the faux/pseudo column technique to display the background color all the way down for the left sidebar but it didn’t seem to achieve anything, I think I may have done something wrong.

As well I will want the right sidebar a different color so that will need to go down to the bottom as well.

What am I missing in order for this to work so the blue continues all the way down?

Here is the link…




#1 I have gone ahead and merged the threads since they were essentially the same issue.

#2 I could not drill deep enough into the OPs code/files to give an individualized solution still I would offer this tidbit:

a) If you are are using an AP’ed element (or pseudo element) as the faux bg, remember to take into account its nearest RP’ed ancestor. FOR EXAMPLE: if you maybe expecting top:0; bottom:0 ; on a descendant element to cover the height of the BODY tag, which which CAN ONLY HAPPEN IF no ancestors have position:relative.

b) IF your columns are SOLID COLORS and no other effect is immediately needed AND the width is not based on %s, consider using BORDER.

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
						h1, .left, .right,.fut{color:#fff;}
						h1, .main, .fut , .left,.right,.container{ box-sizing: border-box;}
						h1, .main, .fut , .left,.right { padding:.5em}
						h1,.fut {background: #555;margin:0;padding:10px 0 ; margin:0 auto;   }
							text-align: center;
						.container, h1, .fut {width: 60%; min-width: 800px;  }
						  h1, .fut { margin:0 auto;}
 							text-align: left;
							border-left:120px solid blue;
							border-right:240px solid green;
 						.left{float:left; margin-left:-120px; width: 120px;}
 						.right{float:right; margin-right:-240px;width: 240px; }
		<h1>3 quick equal heights columns</h1>
		<div class='container'>
		 	<div class='left'>am a wraper for the left colum content.  </div>
			<div class='right'>am a wraper for the right colum content </div>
			<div class='main'>am a wraper for the main content. all column heights will be equal. try me. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
 		 <div class='fut'>just  a footer</div>

hope that helps