100% resizable divs floating to the left inside the div container

Question

Is it possible to have a div container with X child divs, each of which is 100% changed in the browser? I know that this can be done with a single background, but not with a number of divs ... This is what I intend to do (a slide show that slides left / right):

HTML:

<div id="slideshowContent"> <div id="slideshowImage_01" class="slideshowImage_container"></div> <div id="slideshowImage_02" class="slideshowImage_container"></div> <div id="slideshowImage_03" class="slideshowImage_container"></div> <div id="slideshowImage_04" class="slideshowImage_container"></div> </div> <!-- End of id="slideshowContent" --> 

... and CSS:

 #slideshowContainer { z-index: 0; width: 11520px; height: 1080px; position: relative; } .slideshowImage { width: 1920px; height: 1080px; float: left; } 

Thanx.

Pedro

EDIT 1: I forgot to mention that each individual div contains an image.

EDIT 2: added my own updated FIDDLE .

Answer 1

Here's the full working version: http://jsfiddle.net/y9zcf/7/

Centering is done using CSS, javascript is just the start of a slide show.

HTML:

 <div id="slideshowWrapper"> <div id="slideshowContent"> <div id="slideshowImage_01" class="slideshowImage_container active"></div> <div id="slideshowImage_02" class="slideshowImage_container"></div> <div id="slideshowImage_03" class="slideshowImage_container"></div> <div id="slideshowImage_04" class="slideshowImage_container"></div> </div> </div> 

CSS

 body, html { height: 100%; margin: 0; } #slideshowWrapper { overflow: hidden; width: 100%; height: 100%; } #slideshowContent { width: 400%; // 100% * number of slides height: 100%; position: relative; } #slideshowContent .slideshowImage_container { width: 25%; // 100% / number of slides height: 100%; float: left; } 

JS:

 function slide() { var container = $('#slideshowContent'), nextDiv = container.find('.active').next('div'), slides = container.find('div'), next = nextDiv.length ? nextDiv : slides.first(); slides.removeClass('active'); next.addClass('active'); $('#slideshowContent').animate({ 'left': '-' + next.index() * next.width() + 'px' }, 2000, function () { $(this).css({ 'left': '-' + next.index() * 100 + '%' }); }); } setInterval(function () { slide(); }, 5000); 

This is 100% size and #slideshowWrapper can be set to any width / height, and the div inside the inside will work fine. Setting CSS to a percentage value after animation means that after the transition all the fields will be changed.

Answer 2

The only way I can think is to use javascript

CSS

 #SlideShow { width:100%; overflow-x:hidden; position: relative; } #slideshowContent { z-index: 0; width: 11520px; height: 1080px; position:absolute; left:0px; top:0px; } .slideshowImage_container img { max-width:100%; } 

Js

 window.slideWidth = 0; jQuery(document).ready(function(){ window.onresize = funciton() { var window.slideWidth = jQUery("#SlideShow").width(); jQuery("#slideshowContent slideshowImage_container").css("width",window.slideWidth+"px"); jQuery("#slideshowContent").css("left","0px"); //or adjust the left to the current slide show image since they are now different lengths and the slideshow will be off. } window.resize(); }); 

And configure your slide methods to use window.slideWidth as a moving amount. And just slide #slideshowContent left or right.

HTML

 <div id="SlideShow"> <div id="slideshowContent"> <div id="slideshowImage_01" class="slideshowImage_container"></div> <div id="slideshowImage_02" class="slideshowImage_container"></div> <div id="slideshowImage_03" class="slideshowImage_container"></div> <div id="slideshowImage_04" class="slideshowImage_container"></div> </div> </div> 

Answer 3

It seems you have determined the width you want to use, so I suggest using the maximum width and 100% width to determine if this fixes the problem.

 #slideshowContainer { z-index: 0; width: 100%; max-width: 1520px; position: relative; } .slideshowImage { width: 100%; max-width: 1920px; float: left; } 

If you go out of your height, he should calculate it automatically. If you don’t feel comfortable leaving the height, you can set the height as well as the width ...

 height: auto; max-height: 1080px; 

Hope this helps!

Answer 4

Maybe you would be interested in a horizontal CSS base without positioning or swimming.

 body, html { height:100%; padding:0; margin:0; } #slideshowWrapper { overflow: hidden; width: 100%; height:100%; } #slideshowWrapper:hover { } #slideshowContent { height:100%; width:100%; text-indent:0; display:inline-block; white-space:nowrap; } .slideshowImage_container { height:100%; width:100%; display:inline-block; white-space:normal; text-indent:normal; text-align:center; } #slideshowImage_01 { background-color: #A0D0A8; } #slideshowImage_02 { background-color: #009FE3; } #slideshowImage_03 { background-color: #FCC99A; } #slideshowImage_04 { background-color: #D8B0CB; } 

http://jsfiddle.net/GCyrillus/PfbnW/1/

With CSS animations as optional:
(just for show, js is more solid) is not very flexible, it needs to be installed every time you add or remove a container.

 #slideshowWrapper { animation: slidemeAnyDir 30s infinite; animation-play-state:running; } #slideshowWrapper:hover { animation-play-state:paused; } @keyframes slidemeAnyDir { 0%, 15%, 100% {text-indent:0;} 17%, 32%, 84%, 98% {text-indent:-100%;} 34%, 49%, 68%, 82% {text-indent:-200%;} 51%, 66%% {text-indent:-300%;} } 

Why text indent? because it responds well to the direction in which the document is displayed on the screen. It will slide on the sides, this direction is set on the parents or by default.