Place divs next to each other in a 100% width parent?

Question

I'm trying to create a simple text slideshow and for that I need to place the elements inside the parent element next to each other so only one child element is in display at a time.

The issue that I have is that both the parent and child elements are 100% width and I NEED to keep it that way due to my design etc.

A working FIDDLE

And this is what I have for the child elements:

.some {
    width:100%;
    height:450px;
    display: inline-block;
}

Could someone please advise on this issue?

.some {
  width: 100%;
  height: 450px;
  display: inline-block;
}

<div align="center" style="width:100% white-space:nowrap; height:500px; overflow:hidden;" id="feedTxt">


  <div class="some">
    <h1>title 1</h1>
    <br>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>



  <div class="some">
    <h1>title 1</h1>
    <br>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>


  <div class="some">
    <h1>title 1</h1>
    <br>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>


  <div class="some">
    <h1>title 1</h1>
    <br>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>


</div>

So you want both elements to occupy 100% of the screen yet remain side-by-side? — smac89, Jul 21 '16 at 19:26

score 2 · Accepted Answer · edited May 23 '17 at 11:58

Learn about CSS flexbox.

For the alignment you want, this is all the CSS you need:

#feedTxt {
    display: flex;
    overflow-x: scroll; /* for the demo */
}

.some {
    flex: 0 0 100%;
    height: 450px;
}

Revised Fiddle

To learn more about flexbox visit:

Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes, use Autoprefixer. More details in this answer.

score 1 · Answer 2 · answered Jul 21 '16 at 19:21

You could try making the child elements absolutely positioned, and just set "display:none;" on the ones that you don't want visible. This method would work in older browsers too:

.some{
width:100%;
height:100%;
position:absolute;
}    
<div style="width:100%;white-space:nowrap;height:500px;overflow:hidden;" id="feedTxt">
<div class="some" style="height:100%;background-color:pink;">
Box 1
</div>
<div class="some" style="height:100%;background-color:greenyellow;">
Box 2
</div>
<div class="some" style="height:100%;background-color:deepskyblue;">
Box 3
</div>
</div>

this is good but the issue is that I wont be able to make a slide show out of the contents. I can show/hide them or fadein/fadeout but wont be able to slide them in/out.... — Jackson, Jul 21 '16 at 19:32

score 0 · Answer 3 · answered Jul 21 '16 at 20:14

$(document).ready(function(){    
var slideCount = 0;
start();

function start(){    
var i;  
var x = document.getElementsByClassName(".some");  
for(i = 0; i < x.length; i++){  
x[i].style.display = "none";  
}  

slideCount++;  
if(slideCount > x.length) {slideCount = 1}  
x[slideCount-1].style.display = "block";  
$(x[slideCount-1]).effect("slide", {direction:"left"});  
setTimeout(start, 5000);    
};   
});


.some{    
      display:none;    
      margin:auto;    
      }

This is using JavaScript / jQueryUI, this will slide each div with the same class in a timed sequence.

Place divs next to each other in a 100% width parent?

3 Answers3