Help with positioning divs inside divs

**Julie Fox** · 11-11-2011, 07:55 PM

I am having some serious issues understanding the whole "position:" attribute and how and when to use it when positioning div layers. I am attempting a 100% CSS website and I just can't seem to get my divs positioned correctly ...

I took a look at this thread for some advice and changed a few of my divs to p's, but I still can't get it to do what I want.

Basically, I have a "main" div with auto height so that it stretches with the content inside. Inside that "main" div, I have other divs to hold the content, and no matter what I do, I can't get them to have auto height on their own - I have to give them a specific pixel height.

I have "main" containing "mcm_main", and I want "mcm_main" to have auto-height to hold everything inside of it, whilst positioning the p's inside "mcm_main" where I want them inside of the containing div. I've tried experimenting with the z-index but I still can't get them all correct ... I'm probably using that wrong, too.

Here's my code:

Code:

html, body {
	background-color:#cacac8;
	margin: 0px;
	padding: 0px;
	height: 100%;
	font-family: "Verdana", Tahoma, sans-serif;
	font-size: 100%;
	color: #003050;
}

.main {
	z-index: 1;
	height: auto;
	width: 950px;
	padding: 10px;
	margin-top: -25px;
	margin-bottom: 15px;
} 

.mcm_main {
	background-color: #faf9f5;
	height: auto;
	width: 850px;
	padding: 10px;
	margin-top: 20px;
	font-size: 0.75em;
	text-align: justify;
	position: relative;
        z-index: 1;
}
	
.mcm_dm {
        position: absolute;
	background: #FF0;
	width: 265px;
	left: 113px;
	text-align: center;
	z-index: 1;	
}
	
.mcm_email {
        position: absolute;
	background: #FF0;
	width: 265px;
        right: 113px;
	text-align: center;
	z-index: 1;	
}

.mcm_print {
	position: absolute;
	background: #FF0;
	width: 265px;
	top: 375px;
	left: 25px;
	text-align: center;
	z-index: 1;	
}

.mcm_web {
	position: absolute;
	background: #FF0;
	width: 265px;
	top: 375px;
	left: 303px;
	text-align: center;
	z-index: 1;	
}

.mcm_tv {
	position: absolute;
	background: #FF0;
	width: 265px;
	top: 375px;
	right: 25px;
	text-align: center;
	z-index: 1;	
}

And here is the page code:

Code:

<div class="main">

<div class="mcm_main">
<p class="mcm_dm">
<img src="images/mcm_dm_1.png">
</p>

<p class="mcm_email">
<img src="images/mcm_email_1.png">
</p>

<p class="mcm_print">
<img src="images/mcm_print_1.png">
</p>

<p class="mcm_web">
<img src="images/mcm_web_1.png">
</p>

<p class="mcm_tv">
<img src="images/mcm_tv_1.png">
</p>
</div>

</div>

I may be over-complicating this as I'm known to do, but any help would be greatly appreciated ... I've attached a jpg to show what I'm trying to do positioning-wise so it's more understandable. I just want them to automatically make the containing div "mcm_main" as tall as the content.

Thanks for any help in advance!

**auntnini** · 11-11-2011, 11:01 PM

Without studying your code, what jumped out was position: ABSOLUTE; which takes element out of normal HTML flow so elements following do not know it is there. See for example: http://www.w3schools.com/cssref/pr_class_position.asp

Static: Elements render in order, as they appear in the document flow. This is default.
Absolute: Element is positioned relative to its first positioned (not static) ancestor element.
Fixed: Element is positioned relative to the browser window.
Relative: Element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.
Inherit: The value of the position property is inherited from the parent element.

and http://www.w3schools.com/css/css_positioning.asp

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>: Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Z-index can be assigned to positioned elements (absolute, relative, fixed). You might want to make your container/wrapper position: relative, and increment the z-index by 100's (highest number on top of lower numbers).

Experimenting with your code and HTML markup, replacing position: ABSOLUTE with position :RELATIVE just led to disaster. Then I tried a simplier approach (probably should have styled the .mcm_main p ( margin: 10px auto; } to center instead of using <p align="center">). Background-color and border added for empahsis only.

<style type="text/css">
html, body { text-align:center; /* for IE */
background-color:#cacac8; margin: 0px; padding: 0px; height: 100%;
font-family: "Verdana", Tahoma, sans-serif; font-size: 100%; color: #003050;
}
.main { width: 950px; padding: 10px; margin-top: -25px; margin-bottom: 15px;
margin-right:auto; margin-left: auto; /* auto right/left to center */
display: block; background-color:red;
}
.mcm_main { border:double #00FF66 thick; display: block;
margin: 20px auto; /* auto right/left to center */
background-color: #faf9f5; width: 850px; padding: 10px; font-size: 0.75em; text-align: justify;
position: relative; z-index: 100;
}
.mcm_main img { background: #FF0; padding: 10px; margin: 10px;
</style>

<body>
<div class="main">
<div class="mcm_main">
<br>
<p align="center">
<img src="CATS/Default-Cat.png" width="168" height="194">
<img src="CATS/Default-Cat.png" width="168" height="194">
</p>
<br>
<p align="center">
<img src="CATS/Default-Cat.png" width="168" height="194">
<img src="CATS/Default-Cat.png" width="168" height="194">
<img src="CATS/Default-Cat.png" width="168" height="194">
</p>
<br>
</div>
</div>
</body>

**Julie Fox** · 11-11-2011, 11:33 PM

Ah, okay. I understand a bit better now. I guess I missed where it said positioning something absolute pulled it out of the normal flow of things.

I see what you did to change the code, and it makes sense for the p's if I only had images to worry about. However, I still have unanswered questions - how would I set up nested divs inside the containing div as far as positioning goes? For example, if I used your code and embedded another div inside the container that appears in the bottom-right with more text and images that needs to be aligned? I have studied the CSS Positioning page so much and I still am not sure as to how to do this. The only option I can figure is if I just relatively position everything ...

Also, all of the p's I had in my original code were divs and I thought maybe it'd be easier for them to be p's .. was that the right decision?

**auntnini** · 11-13-2011, 01:45 AM

'Two ways to create CSS2 layout: floats and positioning." CSS3 offers some new possibilities.

I tried some stuff you can view at http://webdocdo.tripod.com/junk/layout2.html (or see screen shots attached). This is not recommended, but just an experiment trying to visualize what you might be talking about.

Code:

<!DOCTYPE HTML>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Layout Junk</title>
  
<style type="text/css">
  html, body { text-align:center; /* for IE */
              background-color:#cacac8; margin: 0px; padding: 0px; 
              font-family: "Verdana", Tahoma, sans-serif;
              font-size: 100%; color: #003050; }

/*use ID # for one-of-a-kind unique layout elements on page */

  #wrap { color: black; margin: 20px auto; padding: 20px; 
       width: 95%; max-width:1000px; min-width: 300px;  
       position: relative;  background-color: rgba(255, 255,255, 0.25);  
       border: #0FF groove thick; z-index:300; }

  #main { width: 95%; max-width:950px; min-width: 250px;  position: relative;
        padding: 10px;  margin: 20px auto; display: block; 
        background-color:red; border: #90F double thick; } 

  #topBox { border:double #00FF66 thick; display: block; margin: 20px auto;
            background-color: #F0F;  width: 95%; max-width:860px; min-width: 200px;
            position: relative; padding: 10px; font-size: 2em; text-align: center; } 

  .mcm_main { border:double #00FF66 thick; display: block; margin: 20px auto; 
              background-color: #faf9f5; width: 95%; max-width:860px; min-width: 200px;
              position: relative; padding: 10px; font-size: 0.75em; text-align: center;
              z-index: 400;  }
  
  .mcm_main img { background: #FF0; padding: 5px; margin: 5px; height: auto; 
                 width: 25%; max-width: 168px; min-width: 25px; display: inline-block; }
  .cntr { margin: 25px auto; }

  .right { float: right; padding: 5px; margin: 5px; width: 80%; max-width: 300px; min-width: 25px;  
           border: #0C9  ridge thick; background:#FFCC00;  /*clear:left;*/  }

  .left { float: left; padding: 5px; margin: 5px;  width: 80%; max-width: 300px; min-width: 25px; 
           border: #9C3 inset thick; background:#FFCC00;  /*clear:right;*/  }

   br { clear:both; }
  </style>
</head>

<body>
  <div id="wrap">
    <div id="main">
      <div id="topBox"><h3>Header Text</h3></div><!--closeTOPBOX-->
        <div class="mcm_main">
             <div class="left">  <h1>Some text or something else to float LEFT.</h1>
             </div><!--closeLEFT-->
  <br>
             <div class="cntr">
                <img src="CATS/Default-Cat.png"> <img src="CATS/Default-Cat.png">
             </div><!--closeCENTER-->
  <br>
             <div class="cntr"> <img src="CATS/Default-Cat.png">
                 <img src="CATS/Default-Cat.png"> <img src="CATS/Default-Cat.png">
             </div><!--closeCENTER-->
  <br>
             <div class="left"> <h1>Some text or something else to float LEFT.</h1>
             </div><!--closeLEFT-->
             <div class="right"> <h1>Some text or something else to float RIGHT.</h1>
                  <img src="CATS/Default-Cat.png"  alt="cat"> 
             </div><!--closeLEFT-->
        </div><!--closeMCM-->
      </div><!--closeMAIN-->
   </div><!--closeWARAP-->
  </body>
  </html>

Here are some more links:
http://webdesign.about.com/od/css/a/aa102102a.htm and http://webdesign.about.com/library/weekly/mpreviss.htm [old but good about float and position for layout] ; http://www.maxdesign.com.au/articles/css-layouts/ ; http://designshack.net/articles/css/...ee-css-layouts [lists various sources] ; http://webdesign.about.com/od/css/a/aa102102a.htm [old but good] ;
http://www.netmagazine.com/features/future-css-layouts [blow-your-mind new stuff] ;
http://css-tricks.com/downloads/ [can subscribe to email Newsletter] ;
http://speckyboy.com/2010/12/03/codi...html5-and-css/ ; http://kmsm.ca/2010/an-almost-comple...olumn-layouts/ [new columns]

This might be closer to your thinking. You are usually told to set either top or bottom and right or left of positioned element, but you can set more than two sides [overflow content scrolls].
http://blog.stevensanderson.com/2011...ake-it-easier/

"You know that if you set position: absolute on an element, then you can make it appear at a specified distance from the top, left, right, or bottom from its [positioned] parent element. Well, it turns out that you can specify both top and bottom, or both left and right, and then it will dock against both edges and always resize to match its parent’s dimensions."

**coothead** · 11-13-2011, 11:10 AM

Hi there Julie Fox,

try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
html, body {
    font-family:verdana,tahoma,sans_serif;
    font-size:100%;
    color:#003050;
    background-color:#cacac8;
 }
#container {
    width:950px;
    margin:auto;
 }
#header {
    height:236px;
    padding:10px;
    margin-bottom:10px;
    background-color:#62615f;
 }
#content {
    padding:39px 0;
    background-color:#62615f;
    overflow:hidden;
 }
img {
    display:block;
    width:265px;
    height:265px;
    background-color:#cacac8;
 }
#mcm_dm {
    float:left;
    margin:0 0 39px 140px;
 }
#mcm_email {
    float:right;
    margin-right:140px;
 }
#content_bottom {
    clear:both;
 }
#mcm_print {
    float:left;
    margin-left:39px;
 }
#mcm_tv {
    float:right;
    margin-right:39px;
 }
#mcm_web {
    margin:auto;
 }
</style>

</head>
<body>

<div id="container">

<div id="header">header</div>

<div id="content">

 <img id="mcm_dm" src="images/mcm_dm_1.png" alt="mcm_dm">
 <img id="mcm_email" src="images/mcm_email_1.png" alt="mcm_email">

<div id="content_bottom">
  <img id="mcm_print" src="images/mcm_print_1.png" alt="mcm_print">
  <img id="mcm_tv" src="images/mcm_tv_1.png" alt="mcm_tv">
  <img id="mcm_web" src="images/mcm_web_1.png" alt="mcm_web">
</div><!-- end #content_bottom -->

</div><!-- end #content -->

</div><!-- end #container -->

</body>
</html>

coothead

**Julie Fox** · 11-14-2011, 08:16 PM

Thank you both SO much for your help! I'm figuring it out from taking elements from both of your sample code, I really appreciate it!! The only difference was that I had to have text inside the separate 'p' tags, so I just turned them back into divs since it didn't make any difference (and the space from the 'p' tag was bothering me) .. so here's my new problem:

I put three separate divs stacked on top of each other, for each row of elements. They're all supposed to auto-height to the content inside, but only two do and I have NO idea why it's doing this .. and even though they are auto-heighting the way I want them to, the right float doesn't stay inside the div! The code from what I can tell is the exact same for each div and it's containing divs, and I'm so stumped!

Here's the new code. I only have 3 separate 'mcm_divs' to have different colors so you can see what's going on more clearly, they're going to be reduced to the same one once this issue is fixed.

Code:

.mcm_main {
	background-color: #f00;
	height: auto;
	width: 850px;
	padding: 10px;
	margin-top: 20px;
	font-size: 0.75em;
	text-align: justify;
}

#mcm_divs {
	background-color: #ff0;
	width: 830px;
	height: auto;
	clear: both;
	padding: 10px;
}

#mcm_divs2 {
	background-color: #0f0;
	width: 830px;
	height: auto;
	clear: both;
	padding: 10px;
}

#mcm_divs3 {
	background-color: #00f;
	width: 830px;
	height: auto;
	clear: both;
	padding: 10px;
}
	
#mcm_dm {
	background-color: green;
    width: 265px;
    float: left;
}

#mcm_email {
	background-color: green;
    width: 265px;
    float: right;
}

#mcm_print {
	background-color: green;
    width: 265px;
    float: left; 
}
 
#mcm_web {
	background-color: green;
    width: 265px;
    margin-left: auto;
    margin-right: auto;
}

#mcm_radio {
	background-color: green;
	width: 265px;
	float: right;
}

#mcm_pos {
	background-color: green;
	width: 265px;
	float: left;
}

#mcm_pack {
	background-color: green;
	width: 265px;
    margin-left: auto;
    margin-right: auto;
}

#mcm_tv {
	background-color: green;
    width: 265px;
    float: right;
}

<div class="mcm_main">

<div id="mcm_divs">
<div id="mcm_dm"><img src="images/mcm_dm_1.png">
<br>Text text text text text text text text text text text text text.
</div>

<div id="mcm_email"><img src="images/mcm_email_1.png">
<br>Text text text text text text text text text text text text text.
</div>
</div>

<div id="mcm_divs2">
<div id="mcm_print"><img src="images/mcm_print_1.png">
<br>Text text text text text text text text text text text text text.
</div>

<div id="mcm_web"><img src="images/mcm_email_1.png">
<br>Text text text text text text text text text text text text text.
</div>

<div id="mcm_radio"><img src="images/mcm_radio_1.png">
<br>Text text text text text text text text text text text text text.
</div>
</div>

<div id="mcm_divs3">
<div id="mcm_pos"><img src="images/mcm_pos_1.png">
<br>Text text text text text text text text text text text text text.
</div>

<div id="mcm_pack"><img src="images/mcm_pos_1.png">
<br>Text text text text text text text text text text text text text.
</div>

<div id="mcm_tv"><img src="images/mcm_tv_1.png">
<br>Text text text text text text text text text text text text text.
</div>
</div>

</div>

And here's a screenshot of what it's doing:

I don't understand one, why the "float: right" div doesn't stay inside it's containing div, and why the top two "float: left" and "float: right" divs completely break out of the div. Obviously the code works fine for the "float: left" divs in the middle and bottom divs, and the "margin-left/right: auto" divs work fine ... so why aren't the "float: right" divs behaving?

What am I doing wrong?

This is making my head hurt! Just when I thought I had it all figured out from your explanations ...

**auntnini** · 11-15-2011, 03:51 AM

I can't locate it now, but a recent discussion about CSS FLOAT property listed several info links. A floated element is partially taken out of HTML flow so it may extend below parent element's bottom edge. Some fixes for "collapsing parent" container of floated elements is to float the parent too and/or give parent overflow: auto; or overflow: hidden; property.

HTML markup should be "semantic" so you should have <p> ... </p> tags for paragraphs of text. Maybe you could eliminate some of the <DIV>s.

Centering an element (margin right and left "auto") doesn't work correctly with floated elements at its sides.

For three columns -- as suggested in http://webdesign.about.com/od/css/a/aa102102a.htm or http://webdesign.about.com/library/weekly/mpreviss.htm -- the overall width could first be divided into two <Div>s one floated left and other right; then within larger <Div> have two more <Div>s one floated left and another right. Percentage widths seem easiest to divide an area. I haven't explored the new CSS3 columns feature, but you could try having three paragraphs of equal length each with 25%-30% width and sufficient padding/margin and all float: left (see experiment at http://jacquimorgan.com/columns.html).

Code:

 p.columnthirds { width:29%; float:left; padding-left:1%; border-left:1px solid orange; margin-right:1%; }
p.firstcolumn { padding-left:0; border-left:0}

Below is my "fixed" version of your code. Other people might offer better solutions.

Code:

<!DOCTYPE HTML>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <style type="text/css">

    img { float: left; padding: 8px;  }
    p { text-align: justify; padding: 6px; color: white; }
   .mcm_main { background-color: #f00; width: 850px; padding: 10px;    margin-top: 20px;
               font-size: 0.75em; }

   #mcm_divs { background-color: #ff0; width: 830px; clear: both; padding: 10px; 
               overflow:auto;  }

   /*#mcm_divs img { float: left; padding: 8px;  }
     #mcm_divs p { text-align: left; padding: 6px; }*/

   #mcm_divs2 { background-color: #0f0; width: 830px; padding: 10px;
                overflow:auto; }

   #mcm_divs3 { background-color: #00f; width: 830px; padding: 10px; 
                overflow:auto; }

   #mcm_dm { background-color: green; width: 265px; float: left;  }

   #mcm_email { background-color: green; width: 265px; float: right;  }

   #mcm_print { background-color: green; width: 265px; float: left;  
                margin-right: 20px; }

   #mcm_web { background-color: green; width: 265px; float: left;  }

   #mcm_radio { background-color: green;  width: 265px; float: right;  }

   #mcm_pos { background-color: green; width: 265px; float: left;
              margin-right: 20px; }

   #mcm_pack { background-color: green; width: 265px; float: left; 
               /*margin-left: auto; margin-right: auto;*/  }

  #mcm_tv { background-color: green; width: 265px; float: right; }

  </style>
</head>
<body>
  <div class="mcm_main">
      
    <div id="mcm_divs">
       <div id="mcm_dm"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
          <p>Text text text text text text text text text text text text text.</p>
       </div>
       <div id="mcm_email"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
          <p>Text text text text text text text text text text text text text.</p>
       </div>
    </div><!--close mcm_divs-->

    <div id="mcm_divs2">
        <div id="mcm_print"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
           <p>Text text text text text text text text text text text text text.</p>
        </div>
        <div id="mcm_web"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
           <p>Text text text text text text text text text text text text text.</p>
        </div>
        <div id="mcm_radio"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
          <p>Text text text text text text text text text text text text text.</p>
       </div>
     </div><!--closeMCM-DIVS2-->
  
    <div id="mcm_divs3">
        <div id="mcm_pos"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
           <p>Text text text text text text text text text text text text text.</p>
         </div>
        <div id="mcm_pack"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
           <p>Text text text text text text text text text text text text text.</p>
        </div>
        <div id="mcm_tv"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
           <p>Text text text text text text text text text text text text text.</p>
        </div><!--closeMCM-DIVS2-->
    </div><!--closemcm_divs3-->
  
 </div><!--close mcm_main-->
</body>
</html>

**auntnini** · 11-15-2011, 10:50 PM

Simplify! Use #ID style rules only for elements that are UNIQUE to a page (in your code, #main -- although it could well be a .bigBox class repeated for header, main content, and footer sections). Think about a CSS stylesheet for the entire site, all the pages of which should be consistent in overall layout, navigation, color. All your float boxes (with the exception of one .floatRight) were the same and should have had one .class style rule applied to all. The same (with the exception of background-color) applies to the .horizDiv class rule. Remember you can apply several space-separated class rules to the same element. See the markup, where <div class="horizDiv yellow"> was individualized with .class color rules.

Code:

 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<style type="text/css">
#main { background-color: #f00; width: 850px; padding: 10px; margin-top: 20px; font-size: 0.75em; }
#main img { float: left; padding: 8px; } #main p { text-align: justify; padding: 6px; color: white; }

.horizDiv { width: 830px; clear: both; padding: 5px; overflow:auto; }
.floatLeft { background-color: green; width: 260px; float: left; margin: 8px; 
display: inline-block; }
 /* add  display: inline-block;  to fix IE float margin bug */
.floatRight { background-color: green; width: 260px; float: right; margin: 8px;   
display: inline-block;}
.yellow { background:yellow; }
.blue { background:blue; }
.orange { background:orange; }
</style>

</head>

<body>
<div id="main">

<div class="horizDiv yellow"> 
<div class="floatLeft"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
<p>Text text text text text text text text text text text text text.</p>
</div>
<div class="floatRight"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
<p>Text text text text text text text text text text text text text.</p>
</div>
</div><!--closehorizDiv-->
<div class="horizDiv blue"> 

<div class="floatLeft"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
<p>Text text text text text text text text text text text text text.</p>
</div>
<div class="floatLeft"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
<p>Text text text text text text text text text text text text text.</p>
</div>
<div class="floatLeft"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
<p>Text text text text text text text text text text text text text.</p>
</div>
</div><!--closehorizDiv-->
<div class="horizDiv orange"> 
<div class="floatLeft"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
<p>Text text text text text text text text text text text text text.</p>
</div>
<div class="floatLeft"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
<p>Text text text text text text text text text text text text text.</p>
</div>
<div class="floatLeft"><img src="ellen712004T.jpg" alt="ellen"><br> <br>
<p>Text text text text text text text text text text text text text.</p>
</div>
</div><!--closeHORIZDIV-->

</div><!--closeMain-->
</body>
</html>

**Julie Fox** · 12-01-2011, 09:48 PM

First off, I'd like to apologize for only just now getting to the replies to this post - my internet went down and I was unable to access this forum for quite some time.

Secondly, I have attempted to mimic the code that you wrote, auntnini, and it works wonderfully for what I'm trying to do. I will study it a bit more, and try to figure all this out so I won't have issues in the future. Thank you so much for all your help, you have seriously been a very big help on all this!