1

This fiddle shows my problem.

The output include only 2 yellow boxes, but there could be more. I want the boxes to display horizontally, not vertically as they now display. I have attempted to use display: inline-block to accomplish my goal, but to no avail. How can I get the boxes to display horizontally?

zerowords
  • 2,915
  • 4
  • 29
  • 44
  • Do you want the elements to be next to each other in the center of the page OR under each other in the center of the page? – The Codesee May 20 '16 at 22:19

4 Answers4

1

I was able to horiontally center the elements by adding float: left; to .sticky and removing display: inline-block:

.sticky {
   float: left;
}
The Codesee
  • 3,714
  • 5
  • 38
  • 78
1

Use display:inline-block for the div with class="element" and remove <div class="reminders"> that you put just before the second <div class="element"

frank
  • 389
  • 1
  • 13
  • I think this is a very good idea because it appears that div "reminders" is not needed. I suspect your answer would produce the same desirable results that @Erik suggested, too. – zerowords May 21 '16 at 12:21
1

If you don't want to remove elements or make them float, add display: inline-block to both parents: .reminders, .element {display: inline-block}

Erik
  • 316
  • 1
  • 6
  • That has the advantage that the boxes are centered like the title area, instead of the boxes starting on the left margin. I like that. – zerowords May 20 '16 at 23:00
0

add float: left to .sticky (and some margin left or/and right):

https://jsfiddle.net/Lcrysuzy/

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • advantages of inline-block over float: http://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css – Erik May 20 '16 at 22:38