www.webdeveloper.com
Results 1 to 3 of 3

Thread: How come these divs won't align horizontally?

  1. #1
    Join Date
    Jan 2014
    Posts
    2

    Question How come these divs won't align horizontally?

    I'm trying to create a fullscreen image slider.

    Here's the syntax
    slider_container = what the user sees
    sliding_container = the div which will animate across the X axis to simulate the image movement
    sliding_element = the element within the sliding_container which will contain an image
    http://i57.tinypic.com/kupmx.png

    I can't seem to get the sliding_element(s) to align horizontally within the sliding_container.

    HTML Code:
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<title>CSS3 Image Slider</title>	
    			<style type="text/css">
    				body, html {
    					height: 100%;
    					margin: 0;
    					padding: 0;
    					background-color: #f0f0f0;
    				}
    
    				.slider_container {
    					width: 100%;
    					height: 100%;
    					background-color: rgba(0, 0, 0, 0.3);
    					display: inline-block;
    				}
    
    				.slidable_container {
    					width: 200%;
    					height: 100%;
    					background-color: rgba(0, 0, 0, 0.3);
    				}
    
    				.sliding_element {
    					width: 50%;
    					height: 100%;
    					background-color: rgba(0, 0, 0, 0.3);
    				}
    
    				.slidable_container .sliding_element img {
    					width: 100%;
    					height: 100%;
    				}
    			</style>
    	</head>
    
    	<body>
    
    		<!-- The slider container *What the user will see* -->
    		<div class="slider_container">
    
    			<!-- The container that will be animated -->
    			<div class="slidable_container">
    
    				<!-- The element within the animated container (the image) -->
    				<div class="sliding_element"></div>	
    
    			</div>
    
    		</div>
    
    	</body>
    
    </html>

  2. #2
    Join Date
    May 2014
    Posts
    900
    Inline-block obeys whitespace and as such will insert one space between elements. Since they're all DIV you've got nothing to put things side-by-side... That's why you should be floating the child elements.

    Try this, I used an inset box-shadow to show each of the sub-elements so it's clear where they being and end.

    Code:
    <!DOCTYPE html>
    <html><head>
    
    <title>CSS3 Image Slider</title>	
    
    <style type="text/css">
    
    	body, html, div {
    		margin:0;
    		padding:0;
    	}
    	
    	body,
    	html,
    	.slider_container,
    	.slidable_container,
    	.sliding_element {
    		position:relative;
    		height:100%;
    	}
    	
    	body {
    		background:#F0F0F0;
    	}
    	
    	.slider_container {
    		position:relative;
    		width: 100%;
    	}
    
    	.slidable_container {
    		width:400%; /* also trips layout, so floats are ok in legacy IE */
    	}
    
    	.sliding_element {
    		float:left;
    		width:25%;
    		-webkit-box-shadow:inset 0 0 128px 64px rgba(0,0,0,0.5);
    		-moz-box-shadow:inset 0 0 128px 64px rgba(0,0,0,0.5);
    		box-shadow:inset 0 0 128px 64px rgba(0,0,0,0.5);
    	}
    
    	.sliding_element img {
    		display:block;
    		width: 100%;
    		height: 100%;
    	}
    	
    </style>
    
    </head><body>
    
    <div class="slider_container">
    
    	<div class="slidable_container">
    
    		<div class="sliding_element"></div>	
    		<div class="sliding_element"></div>	
    		<div class="sliding_element"></div>	
    		<div class="sliding_element"></div>	
    
    	<!-- .slidable_container --></div>
    
    <!-- .slider_container --></div>
    
    </body></html>
    Should work in modern browsers, legacy IE might need the last element to have a negative right margin
    Last edited by deathshadow; 07-20-2014 at 06:09 PM.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Jan 2014
    Posts
    2
    Quote Originally Posted by deathshadow View Post
    Inline-block obeys whitespace and as such will insert one space between elements. Since they're all DIV you've got nothing to put things side-by-side... That's why you should be floating the child elements.

    Try this, I used an inset box-shadow to show each of the sub-elements so it's clear where they being and end.

    ....

    Should work in modern browsers, legacy IE might need the last element to have a negative right margin
    Thank you, I actually found a way around this, however, it seems your way is probably a much more viable solution i'll check it out in the morning. Again thanks for the help!
    Last edited by jedaisoul; 07-22-2014 at 02:55 PM. Reason: quote abbreviated

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles