Jackson Jackson - 4 months ago 10
HTML Question

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

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>




Answer

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:


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.