CODEWITHSUNDEEP
htmlcss
Jackson
Jackson

Reputation: 820

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>

Upvotes: 1

Views: 232

Answers (3)

Mycodescript UK
Mycodescript UK

Reputation: 1

$(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.

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371213

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.

Upvotes: 2

user3163495
user3163495

Reputation: 3547

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>

Upvotes: 1

Related Questions