css - Parent height does not contain absolutely positioned children -

i want have "copyright" <div> located @ bottom of site. when try put 2 <div>s (id="div0" , id="copyright") inside container <div> doesn't work.

it's confusing me since thought <div> naturally block element, between div0 , copyright naturally have line-break , copyright located beside div0!

i don't know have done wrong. use html & css.

here my demo.

the problem have similar jqueryui slider: absolutely positioned element & parent container height in container id="div0" doe not grow contain child elements. can see if right click → inspect <div id="dev0"> in chrome , see height = 0px.

position:absolute takes element out of normal flow, means not leave gap element should normally be.

the copyright <div> rendered @ top because previous <div> has no height, since doesn't contain of images (they out of normal flow).

one (quick) way solve add height <div id="dev0">.

you might think using different position value work position:relative does leave gap element should normally be. however, cannot use in example normal position of images inline next each other, still left same container height problem.

an alternative approach float 3 images left , right. has same issue since floated element out of normal flow, there many css ways configure parent element correctly contain floated children, example css clear property.

in following example, have opted overflow:hidden (see http://colinaarts.com/articles/the-magic-of-overflow-hidden/) make parent correctly contain children - see demo.

css

i removed lot of duplication , opted visibility:hidden , visibility:visible instead of altering z-index.

body {     background-color: #5c5c3d; }  #main {     position: relative;     width: 1366px;     margin: 0 auto;     background-color: #292929;     overflow: hidden; }  #leftcolumn {     float:left; }  #rightcolumn {     float: right; }  #leftcolumn, #rightcolumn {     padding:20px 10px 0 10px; }  #leftcolumn img, #rightcolumn img {     display:block;     margin-bottom:20px; }  #img1, #img2, #img3, #img4, #img5, #img6 {     width: 253px;     height: 190px; }  #imgcenter1, #imgcenter2, #imgcenter3, #imgcenter4, #imgcenter5, #imgcenter6 {     position: absolute;     top: 20px;     left: 278px;     width: 810px;     height: 610px;     visibility: hidden; }  #img1:hover ~ #imgcenter1, #img2:hover ~ #imgcenter2, #img3:hover ~ #imgcenter3, #img4:hover ~ #imgcenter4, #img5:hover ~ #imgcenter5, #img6:hover ~ #imgcenter6 {     visibility: visible; }  #copyright{     position: relative;     margin:0 auto;     max-width: 1000px;     border: 2px solid white;     padding-top: 15px;     padding-bottom: 15px;     color:white;     background-color: #5c5c3d;     font-family: tahoma;     font-size: 0.8em; } 

html

<div id="main">     <div id="leftcolumn">         <img id="img1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/pixar_animation_studios_2.jpg/800px-pixar_animation_studios_2.jpg"/>         <img id="img2" src="http://www.jjtoy.com/wallpaper/original/doc_martin___pixar_cars_by_grangerdesign.jpg"/>         <img id="img3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/rowdy_mcqueen___pixar_cars_by_grangerdesign.jpg"/>         <img id="imgcenter1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/pixar_animation_studios_2.jpg/800px-pixar_animation_studios_2.jpg">         <img id="imgcenter2" src="http://www.jjtoy.com/wallpaper/original/doc_martin___pixar_cars_by_grangerdesign.jpg">         <img id="imgcenter3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/rowdy_mcqueen___pixar_cars_by_grangerdesign.jpg">     </div>     <div id="rightcolumn">         <img id="img4" src="http://www.dan-dare.org/freefun/images/cartoonsmoviestv/monstersincforthebirdswallpaper800.jpg"/>         <img id="img5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg"/>         <img id="img6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/wall_e_jr____pixar___ibook_by_ifab.jpg"/>         <img id="imgcenter4" src="http://www.dan-dare.org/freefun/images/cartoonsmoviestv/monstersincforthebirdswallpaper800.jpg">         <img id="imgcenter5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg">         <img id="imgcenter6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/wall_e_jr____pixar___ibook_by_ifab.jpg">     </div> </div> <div id="copyright">     <center>css 1st homework</center>     <center>&#169;2013 ts7<sup>tm</sup> newbiesvn team. rights reserved.</center> </div> 

also, <center> deprecated i'd investigate css way center text if have time.