14 Replies - 15568 Views - Last Post: 15 July 2011 - 11:44 AM

#1 eZACKe   User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,278
  • Joined: 01-June 09

My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 09:54 PM

I'm trying to create a float based 2-column layout and it's just not working.

I have a wrapper div which should hold everything and be centered in the screen. It has a background to create a "faux-column" because I can't just set the height of a column.

I also have a banner div which will be at the top of wrapper. A nav div which I want on the left, and a main div which I want on the right.

The main div has something other divs in it which should just be stacked.

Here's the HTML code I have (no head because it's brought in else where with PHP and that's working correctly):
<body id="profile">
<div id="wrapper">
	<!--display the appleBoard - no HTML needed-->
	<div id="banner">
	</div>
	
	<!--main content goes here-->
	<div id="main">
		<div id="menuline">
			{{MENU_LINE}}
		</div>
		<div id="content">
			This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.
		</div>
		
	</div>

	<!--sidebar goes here-->
	<div id="sidebar">
		This is the side bar and this is what it is all about! I once told you I was going to do this and this is what I'm going to do I say!
	</div>
	
</div>
</body>
</html>



And here's the CSS:
/* reset browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
ol { 
  margin-left: 1.4em; 
  list-style: decimal; 
}
ul { 
  margin-left: 1.4em; 
  list-style:square; 
}
img {
  border: 0;
}
/* end reset browser styles */

/* wrapper styles */
#wrapper {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border-right: 2px solid #000000;
	border-left: 2px solid #000000;
	background: url(bg_test10.png) repeat-y;
}

#banner {
	width: 1000px;
	background: url(appleBoard4.png) no-repeat;
	height: 138px;
	margin-left: auto;
	margin-right: auto;
}

#main {
	float: right;
	width: 800px;
	background-color: #53777A;
}

#sidebar {
	float: left;
	width: 198px;
	background-color: #D95B43;
	border-right: 2px solid #542437;
	border-top: 40px solid #542437;
}

#menuline {
	height: 40px;
	background-color: #542437;
}

#content {
	width: 750px;
	margin-left: auto;
	margin-right: auto;
}




The problem is, the wrapper div is not growing with my columns on the inside of it.

When I use firebug to highlight the wrapper div it's actually only showing it around the banner div.

I'll insert a picture to show what I mean:
Posted Image

If the wrapper tag were growing with divs inside of it, the left column would have the red going down the left of it.

I can't seem to figure out what the problem is. I did a tutorial of something just like this only hours ago and it worked fine. Now, when I want to do it myself, of course it doesn't work.

Thanks for the help!

Is This A Good Question/Topic? 0
  • +

Replies To: My Outer Div is not expanding with my inner div

#2 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 10:10 PM

Put this in #sidebar, see if it helps:
height: 100%;



#content might need it too, then you should be able to adjust the overall height in the #wrapper CSS element, while having #sidebar and #content take up all the space that is assigned to #wrapper.

This post has been edited by e_i_pi: 13 July 2011 - 10:10 PM

Was This Post Helpful? 0
  • +
  • -

#3 eZACKe   User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,278
  • Joined: 01-June 09

Re: My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 10:14 PM

Nope that unfortunately didn't do anything.

I think the main problem is if you look at the picture of firebug, it's like #wrapper is not even containing #sidebar and #main. It's only going around #banner. I don't get why that is the case.

If #wrapper were containing both those divs correctly, it would just be as tall as the div with the most content. Which is exactly what I need.

This post has been edited by eZACKe: 13 July 2011 - 10:15 PM

Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 10:20 PM

Hmm strange. Check it in IE too if you dare lol. Gee Microsoft make a mess of things. I'll look into it and get back to you
Was This Post Helpful? 0
  • +
  • -

#5 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 10:21 PM

In order to use height, your container must know what to base that height off of. Therefore, do this first:

html, body
{
    height:100%;
}



Then any tag inside of those will be able to base their percentage height off of the container's.

I agree with e_i_pi...but you need to set the html and body height first.

What I have:
Attached Image

This post has been edited by souptoy: 13 July 2011 - 10:23 PM

Was This Post Helpful? 0
  • +
  • -

#6 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 10:24 PM

Put height: 100% on #content, #sidebar, and #wrapper. It looks fine in FF then. If you want to adjust the overall height, change height in #wrapper to a px value, or position it relative and use top and bottom attributes.
Was This Post Helpful? 0
  • +
  • -

#7 eZACKe   User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,278
  • Joined: 01-June 09

Re: My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 10:28 PM

The thing is, I can't set heights. The content in all of these areas will be dynamic. That is why I am using the #wrapper div. So that it will grow with the divs inside of it and be however tall the tallest one is no matter what the height.

But I can't get it to grow with it.

View Poste_i_pi, on 14 July 2011 - 01:24 AM, said:

Put height: 100% on #content, #sidebar, and #wrapper. It looks fine in FF then. If you want to adjust the overall height, change height in #wrapper to a px value, or position it relative and use top and bottom attributes.


Could you take a picture of what you see. I don't see it looking fine.
Was This Post Helpful? 0
  • +
  • -

#8 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 10:32 PM

I think part of your problem is that your left nav is outside your main window which could cause some issues unless you anticipate it being that way.

With regards to your growing content: you're going to have to set your height. However, you can set your content height to a minimum height, say 500px and then also set min-height to the same. As long as you container the content within the div it should grow.
Was This Post Helpful? 0
  • +
  • -

#9 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: My Outer Div is not expanding with my inner div

Posted 13 July 2011 - 10:33 PM

I've gotta go pick up some groceries, so I won't be back for an hour or so, but here's the code I've been using to test with:
Spoiler

...and here's the screenshot...

Attached image(s)

  • Attached Image

This post has been edited by e_i_pi: 13 July 2011 - 10:34 PM

Was This Post Helpful? 0
  • +
  • -

#10 BiffBaffBoff   User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: My Outer Div is not expanding with my inner div

Posted 14 July 2011 - 02:04 AM

To me it looks like a float issue, set overflow: auto on your wrapper div. That should fix it without needing to set a height on your wrapper.

Alternatively, you can apply a CSS class called clearfix to your wrapper div. Then at the bottom of your CSS, put the following code:

.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}


This is probably the best known clearfix out there to help the parent container of floated elements clear their floats properly.

This post has been edited by BiffBaffBoff: 14 July 2011 - 02:07 AM

Was This Post Helpful? 3
  • +
  • -

#11 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: My Outer Div is not expanding with my inner div

Posted 15 July 2011 - 09:02 AM

View PostBiffBaffBoff, on 14 July 2011 - 02:04 AM, said:

To me it looks like a float issue, set overflow: auto on your wrapper div. That should fix it without needing to set a height on your wrapper.

Alternatively, you can apply a CSS class called clearfix to your wrapper div. Then at the bottom of your CSS, put the following code:

.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}


This is probably the best known clearfix out there to help the parent container of floated elements clear their floats properly.


+1 for the solution; I have a slight problem with it (clearfix) not validating against the W3C CSS Validation Service however, the overflow fixed my example. For some reason overflow completely skipped my mind. Good stuff :D
Was This Post Helpful? 0
  • +
  • -

#12 BiffBaffBoff   User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: My Outer Div is not expanding with my inner div

Posted 15 July 2011 - 09:09 AM

I wouldn't worry about it not validating. Validation should be used as a guide and it can be useful for beginners. But as long as you know what you're doing and know what your code should be doing then that's fine. This article is quite a good read: http://net.tutsplus....oesnt-validate/
Was This Post Helpful? 1
  • +
  • -

#13 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: My Outer Div is not expanding with my inner div

Posted 15 July 2011 - 09:32 AM

Agreed. I find validation useful for help with older IE installs more than anything else. With newer browsers, it's typically a non-issue.

Hence

Quote

I have a slight problem with it (clearfix) not validating against the W3C CSS Validation Service


Good stuff and welcome to Dream In Code!
Was This Post Helpful? 0
  • +
  • -

#14 digitalsoularts   User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 44
  • Joined: 10-May 11

Re: My Outer Div is not expanding with my inner div

Posted 15 July 2011 - 10:03 AM

Can someone explain this .clearfix css to me, I allways put it before closing the wrappaer of my floated divs but I set the css only on " clear:both ". What am I missing here , why is this extra code needed?
Was This Post Helpful? 0
  • +
  • -

#15 BiffBaffBoff   User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: My Outer Div is not expanding with my inner div

Posted 15 July 2011 - 11:44 AM

It's just basically there to cater for all of the popular browsers + if you have several floated elements it can cause some weird and wonderful behaviour...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1