Jump to content
Stef's Coding Community
habgyp

Collapsing DIV

Recommended Posts

I have encountered a perplexing phenomenon on a site I'm working on that I have not run into prior.

 

To start, I've created a simple template with one main DIV (ID="container") that I've centered through left/right margin values of auto. The "container" DIV is then divided into four DIV's stacked on top of each other. These ID's are as follows: "header", "menu", "body" & "footer". Pretty straight-forward stuff and all the basic formatting works just peachy. Even when I put some content (headers, paragraphs, links, images, etc.), everything still seems to work as one would expect. I have several nested DIV's within the ones above (ie within the "menu" DIV, each link is in a "nav" DIV).

 

The problem occurs when I add "float:left" to any of my ID's or CLASSES in my style-sheet. The browser then collapses the containing DIV & kicks the nested DIV's outside. Strangely, I can set a height to the CLASS or ID and it will pull the nested DIV back inside (assuming the height parameter is large enough to contain the content in the nested DIV).

 

My understanding is that an element (block level, for instance such as a DIV) *should* stretch (vertically) to accommodate content unless set to a specific value. The behavior I'm experiencing seems similar to what you would encounter if you forgot to close DIV tag somewhere and it kicked the content out of its containing element. In my case this is *NOT* what is happening... the html code is error-free; the problem doesn't happen until the float:left CSS is added to the ID or CLASS.

 

I am seriously perplexed. Anyone have a clue what I am doing wrong?

Share this post


Link to post
Share on other sites

Actually, when you float something, you remove it from its normal path. Think of it like a balloon (your floated div or class) floating above a table (its containing div) to the table/div, it's like there is nothing there.

To 'fix' this problem, you need to add a 'clear: both; to the following div - in this case, your footer.

 

this tutorial may help: http://how-to-build-websites.com/2011/creating-a-basic-2-column-center-aligned-fixed-width-layout-with-css/

Share this post


Link to post
Share on other sites

One other thing I often do: If you have a containing div that is getting collapsed, adding "overflow:hidden" usually fixes that.

 

I'd say that works about 90% of the time -- the only time it doesn't work is if you have an element within that div that is relatively or absolutely positioned outside the container, and using overflow:hidden would hide that element.

Share this post


Link to post
Share on other sites

Thanks for the response, Andrea!

 

Unfortunately, "clearing" the floats is not the problem. I was aware that was necessary and already had it in place. Here's the code and links to two different versions so you can see what I'm experiencing:

 

EXAMPLE #1

http://habitualgypsy.com/test/template_ex1.htm

This is how the spage looks with the the basic layout. There are the 4 links to photo-albums that I would like to have two per row. The style sheet is as follows:

 

@charset "UTF-8";

 

/* CSS Document */

 

* {

margin:0px;

padding:0px;

}

 

 

#container {

position:relative;

width:742px;

margin-top:10px;

margin-right:auto;

margin-bottom:10px;

margin-left:auto;

border-width:1px;

border-style:solid;

border-color:#000000;

background-color:#228b22;

}

 

 

#header {

background-color:#9acd32;

height:76px;

border-top-width:0px;

border-right-width:0px;

border-bottom-width:1px;

border-left-width:0px;

border-style:solid;

border-color:#000000;

}

 

#logo {

float:left;

width:100px;

}

 

 

#menu {

clear:both;

background-color:purple;

}

 

 

#content {

clear:both;

border-top-width:1px;

border-right-width:0px;

border-bottom-width:1px;

border-left-width:0px;

border-style:solid;

border-color:#000000;

background-color:#ffffff;

background-image:url('frog_silhouette.png');

background-repeat:no-repeat;

background-position:center;

}

 

#footer {

clear:both;

background-color:#9acd32;

}

 

.nav {

float:left;

color:#9acd32;

background-color:#228b22;

}

 

.album {

padding:10px;

}

 

 

body {

background-color:#006400;

}

 

h1 {

color:#228b22;

padding-top:5px;

padding-right:5px;

padding-bottom:0px;

padding-left:5px;

font-family:Georgia,Times New Roman,Times,Serif;

font-size:40px;

font-style:bold;

text-align:left;

}

 

h2 {

color:#228b22;

padding-top:5px;

padding-right:5px;

padding-bottom:0px;

padding-left:5px;

font-family:Georgia,Times New Roman,Times,Serif;

font-size:26px;

font-style:bold;

text-align:left;

}

 

h3 {

color: #228b22;

font-family:Georgia,Times New Roman,Times,Serif;

font-size:19px;

padding-bottom:5px;

padding-left:5px;

text-align:left;

}

 

h4 {

color:#228b22;

padding-top:2px;

padding-right:2px;

padding-bottom:4px;

padding-left:8px;

font-family:Georgia,Times New Roman,Times,Serif;

font-size:12px;

font-style:bold;

text-align:left;

}

 

p {

color: #000000;

font-family: Geneva, Tahoma, Verdana, Sans-serif;

padding-top:0px;

padding-right:10px;

padding-bottom:10px;

padding-left:10px;

}

 

 

img {

border-color:#228b22;

border-style:solid;

border-width:1;

}

 

a:link {

color:#9acd32;

font-family:Georgia,Times New Roman,Times,Serif;

text-decoration:none;

text-align:left;

}

 

a:visited {

color:#9acd32;

font-family:Georgia,Times New Roman,Times,Serif;

text-decoration:none;

text-align:left;

}

 

a:active {

color:#ffff00;

font-family:Georgia,Times New Roman,Times,Serif;

text-decoration:none;

text-align:left;

}

 

a:hover {

color:#ffff00;

font-family:Georgia,Times New Roman,Times,Serif;

text-decoration:none;

text-align:left;

}

 

EXAMPLE #2

http://habitualgypsy.com/test/template_ex2.htm

The html is exactly the same. The only changes to the CSS in the style-sheet are as follows:

 

.album {

float:left;

padding:10px;

}

 

h3 {

color:purple;

font-family:Georgia,Times New Roman,Times,Serif;

font-size:19px;

padding-bottom:5px;

padding-left:5px;

text-align:left;

}

 

img {

border-color:purple;

border-style:solid;

border-width:1;

}

The only reason I changed the CSS on h3 & img was so that you could see the text & image border when it broke out of the DIV with the white background.

 

I'm am very perplexed...

Share this post


Link to post
Share on other sites

One other thing I often do: If you have a containing div that is getting collapsed, adding "overflow:hidden" usually fixes that.

 

I'd say that works about 90% of the time -- the only time it doesn't work is if you have an element within that div that is relatively or absolutely positioned outside the container, and using overflow:hidden would hide that element.

 

Thanks, Ben. As you can see from my style-sheet, I don't have anything in absolute or relative except the "container" ID - which everything else is inside of.

 

I must confess I am unaware of overflow:hidden. What is exactly is it supposed to do?

Share this post


Link to post
Share on other sites

In this case, setting an overflow property allows that container div to properly enclose floated elements.

 

Thanks, Ben! That did it.

 

I guess I'm still unclear on why this is necessary. I don't get why there is overflow in the first place. It seems to me, from a logical standpoint, that if something is contained in an element it should stay in the element by default. Now I understand that 'floating' an element takes it out of the normal flow but it still seems to me that it should remain constrained to its parent element (in this case, another DIV).

 

I would think the most useful way for 'float' to work would be to change block level elements so they functioned like inline (ie text, etc). I guess my ignorance is showing here, because that's probably not what it's designed to do - and/or there's something else that is designed to do that...

Share this post


Link to post
Share on other sites

I just looked over your code and recreated the page. I left comments on all the changes I made.

 

Thanks, Andrea! Your changes/comments were very helpful. Much appreciated!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...