The uncooperating div

cl0ne · 09-27-2012, 11:56 PM

Hello folks,

I'm having a hard time trying to figure this out. Maybe I'm asking too much from this CSS layout?

First thing's first: I'm creating a webpage which is exactly the same layout as the one I created for this demonstration. The one I'm working on is not live yet. The problem of course was recreated in the demo version.

Here's the HTML & CSS first:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#mainWrapper {
	width: 1200px;
	height: 2500px;
	background-color: #CFF;
	margin-left: auto;
	margin-right: auto;
}
#mainNav {
	height: 150px;
	background-color: #CFC;
}
#wrapper {
	height: auto;
	width: 1200px;
	background-color: #99F;
}

#wrapper:after{
	display:block;
	content:" ";
	clear:both;
}
#wrapper #sidebar {
	width: 250px;
	background-color: #600;
	float: left;
	margin-left: 35px;
}
#wrapper #sidebar #top {
	height: 150px;
	background-color: #69C;
}
#wrapper #sidebar #body {
	background-color: #CC9;
	height: 100%;
}
#wrapper #sidebar #bottom {
	height: 100px;
	width: 100%;
	background-color: #396;
}
#wrapper #header {
	height: 160px;
	width: 880px;
	float: right;
	background-color: #960;
	margin-right: 35px;
}
#wrapper #rightSideDiv {
	width: 645px;
	height: 560px;
	float: right;
	margin-right: 35px;
	margin-top: 20px;
	background-color: #36C;
	display: table;
}
#wrapper #leftSideDiv {
	height: 560px;
	margin-top: 20px;
	float: right;
	background-color: #990;
	width: 215px;
	margin-right: 18px;
}
#wrapper #otherContent {
	height: 100%;
	width: 880px;
	margin-top: 20px;
	margin-right: 35px;
	float: right;
	background-color: #FFF;
}
#wrapper #otherContent #div1 {
	height: 616px;
	width: 880px;
	background-color: #C60;
}
#wrapper #otherContent #div2 {
	height: 283px;
	width: 880px;
	margin-top: 20px;
	background-color: #C90;
}
#wrapper #otherContent #div3 {
	height: 283px;
	width: 880px;
	margin-top: 20px;
	background-color: #CC0;
}
#wrapper #otherContent #div4 {
	height: 283px;
	width: 880px;
	margin-top: 20px;
	background-color: #CF0;
}
#wrapper #otherContent #div5 {
	height: 283px;
	width: 880px;
	margin-top: 20px;
	background-color: #CF9;
}
#footer {
	height: 150px;
	width: 100%;
	clear: both;
	background-color: #999;
}
</style>
</head>

<body>
<div id="mainWrapper">mainWrapper
  <div id="mainNav">mainNav</div>
  <div id="wrapper">wrapper
  
    <div id="sidebar">sidebar
      <div id="top">top</div>
      <div id="body">body</div>
      <div id="bottom">bottom</div>
    </div>
    
    <div id="header">header</div>
    <div id="rightSideDiv">rightSideDiv</div>
    <div id="leftSideDiv">leftSiteDiv</div>
    
    <div id="otherContent">
      <div id="div1">div1</div>
      <div id="div2">div2</div>
      <div id="div3">div3</div>
      <div id="div4">div4</div>
      <div id="div5">div5</div>
    </div>
    
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>

Basically, the entire layout seems to work except for one div that just won't function the way I want it to. The div I'm referring to is the "sidebar" div. This div has three additional divs within it, as you can see. The div within the "sidebar" div that I'm mainly concerned with is the "body" div. What should happen is that the entire sidebar should expand to fit the vertical space below it (meaning, it should expand with the parent div "wrapper"). It should do this dynamically when I add new content to the "wrapper" div. The wrapper div also expands dynamically. But here's the catch: the sidebar itself should not expand due to its own property. Rather, the sidebar should expand when the "body" div expands. So in essence, the body div is the one that should have the property of "height: 100%" or whatever, but that is exactly the problem: No matter the property I add to the "sidebar" div or the "body" div, the parent div (sidebar) will not budge. I don't know what is holding it back but I have a feeling it has to do with all the floats involved in this layout.

I made this layout too complicated for myself and I just don't know what to do to fix it. I have spent hours.

Any help will be appreciated.

Thanks

fireplace_tea · 09-28-2012, 05:09 AM

Hi Clone,

The first thing I notice is you made your CSS more complex then it needs to be. The neat thing about using the ID selector is that you can access it directly. For example, in your coding you have:
#wrapper #sidebar #top{
height: 150px;
background-color: #69C;
}

You don't need to go through the wrapper and sidebar first. You can more easily access the id "top" by just doing this:
#top{
height: 150px;
background-color: #69C;
}

I believe height is a property not often used because it tends to not always behave well. To do what you are looking for try using pixels only, not using any percentages for height. I'm still looking at your coding.

transybao · 09-28-2012, 05:16 AM

You need to check this out

Quote:

...
#wrapper:after{
display:block;
content:" ";
clear:both;
}...
#wrapper #rightSideDiv {
width: 645px;
height: 560px;
float: right;
margin-right: 35px;
margin-top: 20px;
background-color: #36C;
display: table;
}....

cl0ne · 09-28-2012, 06:06 AM

Thank you, Fireplace_tea and transybao, for your replies. I really appreciate it!

Fireplace_tea, thank you for the advice. I actually did know that except the reason I organize my CSS that way is so that I can easily trace the child elements through the parent elements. I just work a little differently. Thank you again for the advice though.

transybao, can you please explain as to what you see in this code? The #wrapper:after code is actually present in my original page. The reason that is there is because the "wrapper" div's background image was not displaying for whatever reason. I searched online and someone else was having the same problem. A person suggested that following code and as soon as I applied that, the background image came up immediately, though nothing happened to the layout. I honestly don't know why or how it works but it worked great for me. Is there something that is alarming to you in that specific code?

Thanks

fireplace_tea · 09-28-2012, 06:24 AM

Hi Clone,

The height property is not an inheritable property. Meaning that the sidebar div will not expand to fit it's parent div height, because it can not inherit it's parent's height property. The below I got from w3schools.com website:

The height property sets the height of an element.
Note: The height property does not include padding, borders, or margins!
Default value: auto
Inherited: no
Version: CSS1
JavaScript syntax: object.style.height="50px"

I also redid your CSS and HTML layout for your page. It's less complex and gets the job done. I made the max width 960px, which you can change.
Here is the HTML:

Code:

<body>
  <div id="navigation">home | about | contact us</div>
    
    <div id="sidebar">sidebar
		<div id="top">top</div>
		<div id="body">body<br />hi<br />hi<br /></div>
		<div id="bottom">bottom</div>
    </div>
    
    <div id="mainbody">
		<div id="header">header</div>
		<div id="rightSideDiv">rightSideDiv</div>
		<div id="leftSideDiv">leftSideDiv</div>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
	</div>    
    
  <div id="footer">footer</div>

</body>

CSS:

Code:

body{
	width: 960px;
	background-color: yellow;
	margin: 0 auto;
	padding: 0;
}

#navigation{
	background-color: blue;
	height: 25px;
	padding: 4px;
}



#sidebar {
	width: 250px;
	background-color: #600;
	padding: 4px;
	float: left;
}
#top {
	background-color: #69C;
	padding: 4px;
}
#body {
	background-color: #CC9;
	padding: 4px;
}
#bottom {
	background-color: #396;
	padding: 4px;
}



#mainbody{
	width: 702px;
	background-color: white;
	float: left;
}
#header {
	height: 100px;
	background-color: #960;
	padding: 4px;
}
#leftSideDiv {
	height: 100px;
	width: 336px;
	float: left;
	background-color: #990;
	padding: 4px;
}
#rightSideDiv {
	height: 100px;
	width: 350px;
	float: left;
	background-color: #36C;
	padding: 4px;
}
#div1 {
	height: 100px;
	background-color: #C60;
	padding: 4px;
	clear: both;
}
#div2 {
	height: 100px;
	margin-top: 20px;
	padding: 4px;
	background-color: #C90;
}

#footer {
	height: 75px;
	clear: both;
	background-color: #999;
	padding: 4px;
}

cl0ne · 09-28-2012, 07:43 PM

Thanks again for the reply and the code.

You said the height property is not inheritable but in the CSS you made the height of the sidebar as "inherit". Will this property do?

So aside from the inherit property and using percentages, there is no other way to make the child div expand to the height of the parent div?

Thanks

fireplace_tea · 09-28-2012, 08:02 PM

Quote:

Originally Posted by cl0ne

Thanks again for the reply and the code.

You said the height property is not inheritable but in the CSS you made the height of the sidebar as "inherit". Will this property do?

So aside from the inherit property and using percentages, there is no other way to make the child div expand to the height of the parent div?

Thanks

Oopppsss...I meant to take the height: inherit out. Sorry about that. I was just seeing if it works and it doesn't. I'll edit that entry.

If inheritance is not allowed, maybe you could do it with JavaScript, but I haven't tried.

fireplace_tea · 09-28-2012, 09:19 PM

Using the coding I gave you in an earlier reply, the following JavaScript code does what you need.

First, set the body and sidebar heights to auto in the css file:

Code:

body{
	width: 960px;
	height: auto;
	background-color: yellow;
	margin: 0 auto;
	padding: 0;
}

#sidebar {
	width: 250px;
	height: auto;
	background-color: #600;
	padding: 4px;
	float: left;
}

Second, put the following Javascript in it's own file. The JavaScript code:

Code:

var a = document.body.style.height = "600px";
var b = document.getElementById('sidebar');
var c = b.style.height = a;

The first line of javascript code sets the height of the body (the parent of sidebar). I just set it to 600px for the example.
The second line of javascript code gets the sidebar id and puts it in the variable b.
The third line of code sets the sidebar height to equal the body height.

Third, link the JavaScript file in your html file as such:

Code:

<div id="footer">footer</div>

<script src="testing1.js" type="text/javascript"></script>

</body>
</html>

Enjoy!
Julie

cl0ne · 09-30-2012, 08:17 AM

Thanks again for the wonderful reply.

I don't know a thing about javascript so my mind never went that way. It's definitely a great alternative.

Having said that, I wanted to clarify a bit more of what I'm trying to achieve so that you can offer a better solution through javascript or even CSS (not that your solution is not good). I just need to clarify some things.

For better illustration, I'm using jsfiddle so that you can see exactly where I'm having the issue.

Here's the link: http://jsfiddle.net/7jqj2/

What I'm trying to do I don't think applies to the "body" tag. Most of the divs, as you may have noticed are within the "wrapper" div. The "wrapper" div in turn is within the "mainWrapper". At this point, I'm thinking the "body" tag cannot really affect the adjustment I'm trying to make.

If you look at the layout in jsfiddle, you can see that the wrapper is fairly long. This is mainly because of the content within the wrapper. But the sidebar, as you can see is pretty much a set size and has a lot of vertical space below. What i want is for the sidebar to fill that space. BUT the sidebar div itself should not be the one with any given expansion property (i.e. height 100%, min-height, etc). The "body" div within the sidebar is actually the one that will have all the content. This body div is the one that needs to expand until the entire sidebar hits the "footer" div at the bottom and stops. At that point, if I fill the body div with content it should just keep expanding with the wrapper div.

Really, all the focus here is on the relationship between the wrapper, the sidebar and the body div.

Please let me know what you make of this.

Thanks!
I really appreciate your effort!

Sammy12 · 09-30-2012, 11:43 AM

Quote:

Originally Posted by fireplace_tea

The first thing I notice is you made your CSS more complex then it needs to be.

+1. It's also inefficient: http://css-tricks.com/efficiently-rendering-css/

Quote:

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive — especially if the selector is in the Tag or Universal Category.

-----------------------

Quote:

Originally Posted by fireplace_tea

I believe height is a property not often used because it tends to not always behave well. To do what you are looking for try using pixels only, not using any percentages for height.

-1.

-----------------------

Code:

#wrapper:after{
	display:block; /* supposed to be display: table; */
	content:" ";
	clear:both;
}

This is known as the microclearfix by Nicholas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/

-----------------------

Quote:

Originally Posted by cl0ne

The "body" div within the sidebar is actually the one that will have all the content. This body div is the one that needs to expand until the entire sidebar hits the "footer" div at the bottom and stops. At that point, if I fill the body div with content it should just keep expanding with the wrapper div.

Technically that is not possible to do in CSS. The height of the parent is "artificial." You can't take 100% of any artificial height. It is actually possible, but I wouldn't say it's a correct method and involves some pretty frowned upon stuff.

Here are two layouts. The first changes the height of the middle as the height of the main column increases. The other changes the height of the main column as the height of the side bar increases. You cannot have both of them contributing to the height if they incease. You can only accomplish this with JavaScript by detecting the height of the parent and applying it to the children.

Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
			body { margin: 40px; font: 13px/1.5 arial, sans-serif; }
			#side-panel   { background: #f1f1f1; }
				.header   { background: #eee; }
				.content  { background: #999; }
				.footer   { background: #bbb; }
			#main-content { background: #666; color: #fff; }
		</style>
	</head>
	<body>
		<style>
			#container1 {
				position: relative;
				width: 980px;
				margin: 0 auto;
			}
			
			#container1 #side-panel {
				position: absolute; left: 0;
				width: 300px;
				height: 100%;
			}
				#container1 .container:after {
					position: relative;
				}
				#container1 .container > div {
					position: absolute;
					width: 100%;
				}
			#container1 #side-panel .header {
				height: 50px;
			}
			#container1 #side-panel .content {
				top: 50px; bottom: 50px;
			}
			#container1 #side-panel .footer {
				bottom: 0;
				height: 50px;
			}
			
			#container1 #main-content {
				margin-left: 300px;
			}
		</style>
		<div id="container1">
			<div id="side-panel" class="container">
				<div class="header"></div>
				<div class="content">
					<img src="http://tinyurl.com/8b2gv5s" height="100px">
				</div>
				<div class="footer"></div>
			</div>
			<div id="main-content">
				<div style="height: 300px;">Height of the middle of the side-panel adjust with this height. Works in IE7.</div>
			</div>
		</div>
		<br>
		<br>
		<br>
		<style>
			#container2 {
				position: relative;
				width: 980px;
				margin: 0 auto;
			}
			
			#container2 #main-content {
				position: absolute; right: 0;
				width: 680px;
				height: 100%;
			}
			#container2 #side-panel {
				margin-right: 680px;
			}
			
			#container2 #side-panel .header {
				height: 50px;
			}
			
			#container2 #side-panel .footer {
				height: 50px;
			}
		</style>
		<div id="container2">
			<div id="main-content">
				Height of this main column adjusts depending on the side panel. Works in IE7.
			</div>
			<div id="side-panel" class="container">
				<div class="header"></div>
				<div class="content">
					<img src="http://tinyurl.com/8b2gv5s" height="100px" style="display: block;">
				</div>
				<div class="footer"></div>
			</div>
		</div>
	</body>
</html>

fireplace_tea · 09-30-2012, 04:12 PM

Check out this post. Sammy12 explains a couple of ways to do what you want with CSS using clear and simple examples. I learned something new.

http://www.codingforums.com/showthread.php?t=274640

cl0ne · 10-01-2012, 09:34 AM

Sammy12, thank you for your informative input.

I went over my code again and after giving much thought to where the content will go, realized that there is no need for a symbiotic relationship between the "wrapper" div and the "sidebar" div. Really, the only thing that matters is that the sidebar div's height should match that of the wrapper div.

Being the wrapper div, it holds all the content, which includes the sidebar.
So if anything is going to expand due to more content, it's going to be that wrapper div. The sidebar is supposed to just hold some navigation items so it will most likely not get filled up. But the reason I'm so insistent on having the entire sidebar match the height of its parent div (wrapper) dynamically is because there is going to be a background image on the "body" div. I think this is where I'm maybe asking for too much?

The sidebar div has three divs within it: top, body, bottom. I'm distributing the same background image over these three divs. The top and bottom divs will only have a small portion of the top and bottom of the image, respectively. But the body div will hold the rest of the image (the middle portion) and this image will have a tremendous height (like 6000 pixels). So essentially, when the wrapper div grows over time or even shrinks, the sidebar div should increase/decrease in size proportionally. But the kicker is that the expansion should happen through the body div but must affect the sidebar (naturally since the sidebar div is the parent div).

My limited knowledge cannot comprehend how this can happen and I'm sorry if this is too much trouble for you guys. I'm guessing only javascript can make this happen, though I'm not even sure if javascript will be welcome in the environment this is intended for. This will be used for eBay.

Do you guys think I should just change my layout?

I really love what I'm trying to do but if it's not going to work, it's not going to work.

fireplace_tea, maybe your javascript code, with a little bit of modification, is what I'll need to do?

Maybe Sammy12 can help in this regard?

Thank you for such a big help!

jamaks · 10-02-2012, 12:43 AM

Hi, this should give you a few ideas. You are not able to get your sidebar body in one go but I can give you it in two.

Code:

<style type="text/css">
#frame{width:1200px;margin:auto;overflow:hidden;}
#mainNav{width:1200px;height:150px;background-color:#CFC;}
.wrapper{width:1200px;overflow:hidden;}
#header{float:right;clear:right;width:915px;height:160px;background:#960;}
#sidebar-top{float:left;clear:left;width:285px;height:160px;background:#69C;}
.righthold{float:right;clear:right;width:915px;overflow:hidden;}
#left{float:left;clear:left;width:245px;overflow:auto;padding-bottom:100em;margin-bottom:-100em;background:#990;}
#right{float:right;clear:right;width:670px;height:560px;overflow:hidden;background:#36C;}
#sidebar-body1{float:left;clear:left;width:285px;overflow:auto;padding-bottom:100em;margin-bottom:-100em;background:#CC9;}
#sidebar-body2{float:left;clear:left;width:285px;overflow:auto;padding-bottom:100em;margin-bottom:-100em;background:#CC9;}
#sidebar-bottom{float:left;clear:left;width:285px;overflow:auto;padding-bottom:100em;margin-bottom:-100em;background:#396;}
#other1{width:100%;height:616px;background:#C60;overflow:hidden;}
#other2{width:100%;height:283px;background:#C90;overflow:hidden;}
#other3{width:100%;height:283px;background:#CC0;overflow:hidden;}
#other4{width:100%;height:283px;background:#CF0;overflow:hidden;}
#other5{width:100%;height:283px;background:#CF9;overflow:hidden;}
#footer{height:150px;width:1200px;background:#999;overflow:hidden;}
</style>

Code:

<body>
<div id="frame">
	<div id="mainNav"><p>mainNav</p></div>
	<div class="wrapper">
		<div id="header"><p>Header</p></div>
		<div id="sidebar-top"><p>Sidebar Top</p></div>
	</div>
	<div class="wrapper">
		<div class="righthold">
			<div id="left"><p>Left Side Div</p></div>
			<div id="right"><p>Right Side Div</p></div>
		</div>
		<div id="sidebar-body1"><p>Side Bar Body</p></div>
	</div>
	<div class="wrapper">
		<div class="righthold">
			<div id="other1"><p>Div One</p></div>
			<div id="other2"><p>Div Two</p></div>
			<div id="other3"><p>Div Three</p></div>
			<div id="other4"><p>Div Four</p></div>
		</div>
		<div id="sidebar-body2"><p>Side Bar Body Continued</p></div>
	</div>
	<div class="wrapper">
		<div class="righthold">
			<div id="other5"><p>Div Five</p></div>
		</div>
		<div id="sidebar-bottom"><p>Side Bar Bottom</p></div>
	</div>
	<div id="footer"></p>footer</p></div>
</div>
</body>
</html>

I have taken the liberty of renaming some of the elements to make the coding easier to rebuild and done away with your margins. The top part of sidebar body is controlled by the height of div id right and as long as you are placing at least this ammount of content the second part should act as you require. Have fun with it. Jim

cl0ne · 10-02-2012, 08:29 AM

Thank you jamaks for taking the time out to help.

I tried your code out and found something that was not quite right. When I put the cursor in front the text in the sidebar and began to hit "enter"(creating paragraphs), the divs to the right, starting from "Div One" all started going down, leaving white space above it.

Could this be cause of the clear property?

Also, will this layout not work with a single column of the sidebar instead of having two sidebars combined?

Thanks

fireplace_tea · 10-02-2012, 08:35 AM

Ahhh...for eBay. I don't have any experience with eBay...sorry.