Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    DIV losing height

    Hello, I have a container DIV for a few IMGs.
    I expect the DIV to auto-wrap the IMGs.
    I gave no-height to the DIV, but IMGs have height.

    the DIV actually gets no height..

    HTML
    Code:
    <div class="main_big_wrap">
    	<img src="pics/1.jpg" class="main_pic_left" alt="">
    	<img src="pics/2.jpg" class="main_pic_center" alt="">
    	<img src="pics/3.jpg" class="main_pic_right" alt="">
    </div><!-- main_big_wrap -->
    CSS
    Code:
     .main_big_wrap {
     	width: 500px;
     	height: 300px;
     	margin: 0 auto;
     	position: relative;
     	border: 1px solid #000;
     }
    .main_big_wrap img {
    	height: 400px;
    	width: 300px;
    	position: absolute;
    	-webkit-transition:opacity 0.5s;
    	 transition:opacity 0.5s;
    }
    Thank you.
    Last edited by nitzanb; 02-14-2013 at 08:30 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Yeah, well, you should only use absolute positioning if you know exactly what you do. What’s the point of this, actually? The images will be layered on top of each other anyway?

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by VIPStephan View Post
    Yeah, well, you should only use absolute positioning if you know exactly what you do. What’s the point of this, actually? The images will be layered on top of each other anyway?
    Perhaps the unique classes give them individual positions elsewhere in the markup?

    To the OP: Please give us your full source code (or better still, a link to your test page) for better help.

    Right now we can only guess as to whether or not what you are trying to do is even possible. One might assume that you should really be using floats on your images, but then that only applies if you want your images in a flat row. If you are doing something more collage-style with your images then the float method goes right out of the window (along with any hope of getting your div to automatically assume the correct height to contain the images).

    So give us some more information and we can give you some better advice.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Alright guys here's the code (Just started it today)
    The images are on top of eachother (not exactly), and when I hover they come to the front using z-index:

    (p.s any advice about the code is welcome)

    Code:
    <body>
    	<div class="wrapper">
    		<div class="header"></div><!-- header -->
    		<div class="main_left"></div><!-- main_left -->
    		<div class="main">
    			<div class="main_big_wrap">
    				<img src="pics/1.jpg" class="main_pic_left" alt="">
    				<img src="pics/2.jpg" class="main_pic_center" alt="">
    				<img src="pics/3.jpg" class="main_pic_right" alt="">
    			</div><!-- main_big_wrap -->
    		</div><!-- main -->
    		<div class="main_right"></div><!-- main_right -->
    		<div style="clear:both;"></div>
    		<div class="footer"></div><!-- footer -->
    	</div>
    </body>
    
    
    
    /*resets*/
    * { padding: 0; margin: 0; }
    body {
    	text-align:center;
    	font-family: arial;
    }
    
    /*wrapper*/
    .wrapper {
    	width: 960px;
    	margin: 25px auto;
     }
     /*header*/
     .header {
     	width: 960px;
     	height: 50px;
     	background-color: grey;
     }
    
     /*main*/
    .main_right,.main_left {
    	height: 700px;
    	float:left;
    }
    .main_right,.main_left {
    	width: 100px;
     	background-color: grey;
    }
     .main {
     	width: 720px;
     	height: 660px;
     	padding: 20px;
     	float:left;
     	
     }
     /*main_big_wrap*/
    
     .main_big_wrap {
     	width: 500px;
     	height: 300px;
     	margin: 0 auto;
     	position: relative;
     	border: 1px solid #000;
     }
    .main_big_wrap img {
    	height: 400px;
    	width: 300px;
    	position: absolute;
    	-webkit-transition:opacity 0.5s;
    	 transition:opacity 0.5s;
    }
    .main_big_wrap img:hover {
    	z-index:11;
    	opacity:1;
    }
    .main_pic_left {
    	top:0;
    	left:0;
    	opacity:0.5;
    }
    .main_pic_center { 
    	z-index: 10;
    	top:0;
    	left:100px;
    	box-shadow: 0px 20px 50px grey;
    }
    .main_pic_right {
    	top:0;
    	left:200px;
    	opacity:0.5;
    }
    
     /*footer*/
     .footer {
     	width: 960px;
     	height: 50px;
     	background-color: black;
     }

  • #5
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Rowsdower, any advice?

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    No need to bump your thread so soon (see forum rules and guidelines).

    Since your desired approach truly does require absolute positioning you won't have the option to get the container div to automatically set itself to the correct height with just HTML and CSS...unless you do something hacky.

    Absolute positioning essentially "breaks" the document flow for the element it is applied to. So the parent element no longer knows or "cares" what size the absolute-positioned child is.

    The only (extremely hacky) way I can think of to overcome this with pure HTML/CSS is to basically duplicate all of your images inside the div and have the duplicate versions use the default (static) positioning with visibility:hidden; or opacity:0;. Doing that, your container div will stretch to fit the tallest image without actually showing the duplicate entries. The user will still only download the image once, but you will be wasting markup and potentially making your page look like it's repeating itself when a search engine crawls your page for content. If you're not so worried about those drawbacks then you can feel free to do the dirty deed.

    Otherwise, you will need to use javascript to read each image's dimensions and apply the largest height value to the parent div. That is much less hacky, but it requires javascript on page load and it might take longer to actually apply the size to the div.

    Here is an example of the hack method:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Image Test</title>
    <script type="text/javascript">
    </script>
    <style type="text/css">
    *{margin:0;padding:0;}
    img{border:0;}
    body{padding:10px;font-family:verdana;font-size:12px;}
    h1{font-size:20px;font-weight:bold;margin-top:50px;margin-bottom:10px;}
    .main_big_wrap{position:relative;width:500px;margin:0px auto;padding:10px;background-color:rgba(0,0,0,0.5);}
    .main_big_wrap img{position:absolute;z-index:1;width:300px;top:10px;opacity:0.5;-moz-transition:opacity 0.5s;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
    .main_big_wrap img:first-child{left:10px;z-index:3;}
    .main_big_wrap img:nth-child(2){left:110px;z-index:2;}
    .main_big_wrap img:nth-child(3){left:210px;}
    .main_big_wrap img:hover{z-index:4;opacity:1;}
    .main_big_wrap img.hidden{visibility:hidden;position:static;margin-left:-9999px;}
    </style>
    </head>
    <body>
    <h1>Here is an example:</h1>
    <div class="main_big_wrap">
    <img src="pics/1.jpg" alt="" />
    <img src="pics/2.jpg" alt="" />
    <img src="pics/3.jpg" alt="" />
    <img class="hidden" src="pics/1.jpg" alt="" />
    <img class="hidden" src="pics/2.jpg" alt="" />
    <img class="hidden" src="pics/3.jpg" alt="" />
    </div>
    </body>
    </html>
    And here is an example of the javascript method:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Image Test</title>
    <script type="text/javascript">
    var set_height = function(){
    	var target_class = "main_big_wrap";
    	var target,all_divs,all_images,greatest_height=0;
    	var go = function(){
    		all_divs = document.getElementsByTagName('div');
    		for(i=0;i<all_divs.length;i++){
    			if(all_divs[i].className){
    				if(all_divs[i].className===target_class){
    					target=all_divs[i];
    					all_images=target.getElementsByTagName('img');
    					for(j=0;j<all_images.length;j++){
    						if(all_images[j].height>greatest_height){
    							greatest_height=all_images[j].height;
    						}
    					}
    					break;
    				}
    			}
    		}
    		target.style.height=greatest_height+"px";
    	};
    	return{
    		go:go
    	};
    }();
    </script>
    <style type="text/css">
    *{margin:0;padding:0;}
    img{border:0;}
    body{padding:10px;font-family:verdana;font-size:12px;}
    h1{font-size:20px;font-weight:bold;margin-top:50px;margin-bottom:10px;}
    .main_big_wrap{position:relative;width:500px;margin:0px auto;padding:10px;background-color:rgba(0,0,0,0.5);}
    .main_big_wrap img{position:absolute;z-index:1;width:300px;top:10px;opacity:0.5;-moz-transition:opacity 0.5s;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
    .main_big_wrap img:first-child{left:10px;z-index:3;}
    .main_big_wrap img:nth-child(2){left:110px;z-index:2;}
    .main_big_wrap img:nth-child(3){left:210px;}
    .main_big_wrap img:hover{z-index:4;opacity:1;}
    </style>
    </head>
    <body>
    <h1>Here is an example:</h1>
    <div class="main_big_wrap">
    <img src="pics/1.jpg" alt="" />
    <img src="pics/2.jpg" alt="" />
    <img src="pics/3.jpg" alt="" />
    </div>
    <script type="text/javascript">set_height.go();</script>
    </body>
    </html>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    nitzanb (02-14-2013)

  • #7
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You helped me alot,
    Thank you very much for the your kind replies.

    I guess the best way will be to pre-decide the height of the div, since Im creating the site, I dont have to make it 'guess' the height.

    Again, thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •