1

I've seen this question a lot, but no solutions are working for me.
I've tried float: left,
I've tried float with position:absolute, and with position: fixed,
I've tried different display: inline, and display: inline-block
I do not want to make them a list, need to keep as divs

and I've tried essentially all combinations of the above.

I'm ultimately trying to implement jInverScroll and am having issues. If you inspect element on the website: http://www.pixxelfactory.net/jInvertScroll/ you'll see that the divs in the "front scroll" class all have specific "left:XXXpx" values.

How do I get the divs on my page to orient like that without specifying pixel values?

EDIT: Due to popular demand, here is a jsFiddle. How do I get the colored squares in this to line up left to right? https://jsfiddle.net/mj9bs3sq/ currently they all have this css:

#eleOne{
height: 300px;
width: 300px;
background-color:blue;
float:left;
top:0;
}
singmotor
  • 3,930
  • 12
  • 45
  • 79
  • Add the multiple examples you tried, otherwise it's really hard to help. – Dekel Jan 05 '17 at 02:15
  • jInverScroll uses pixel values to "scroll" the elements. How do you propose it should scroll the divs without pixel values? – Phaze Phusion Jan 05 '17 at 02:17
  • jInverScroll gets the pixel values of the elements on you page with Javascript after the page has loaded. I don't see why that means I need to pre-declare the 'left:' orientation of the things on my page beforehand with CSS. – singmotor Jan 05 '17 at 02:19
  • 1
    @Acoustic77 add some codes – ADH - THE TECHIE GUY Jan 05 '17 at 02:23
  • @DreamHunter I'm trying to do exactly what's on the jInvertScroll website link that I posted, w/o the "left:XXXpx" properties. So inspecting element on that page gives the simplified version of what I have. – singmotor Jan 05 '17 at 02:30
  • Do I understand correctly: You are referring to the pixels values defined in the css: .intro{ left: 500px } .description{ left: 1500px } .documentation{ left: 2450px } If so, would using multiples of the "vw" unit work for you? Example: .intro{ left: 40vw } – Phaze Phusion Jan 05 '17 at 02:40

1 Answers1

1

Ok I found a really elegant solution to this using the "flex" property. Found here in Michael_B answer: How to align 3 divs (left/center/right) inside another div?

Here's the css:

#frontScroll{
  display:flex;
}
#frontScroll > div {
  height: 300px;
  width: 300px;
  top:0;
}

And here's a fiddle of it in action: https://jsfiddle.net/mj9bs3sq/1/

Community
  • 1
  • 1
singmotor
  • 3,930
  • 12
  • 45
  • 79