Divs display on top of each other in fixed div

Question

I am having issues making items side by side in a fixed div. I thought that I could set the items to relative and they would display side by side, but that doesn't work.

jsfiddle: http://jsfiddle.net/8wkmukv6/

I have this HTML

<div class="tabs">
    <div class="feed-tab"></div>
    <div class="feed-tab"></div>
    <div class="feed-tab"></div>
</div>

And this CSS

.tabs{
    position: fixed;
    bottom: 0;
    right: 10px;
    left: 10px;
    border: solid 1px red;
    float: right;
    height: 1px;
}
.feed-tab{
    width: 100px;
    height: 200px;
    margin-top: -200px;
    background-color: #ffffff;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    position: relative;
    margin-right: 10px;
}

But what is happening, is that that .feed-tab div's are sitting on top of each other. what can I do to make them sit side by side?

Answer 1

First at all you are using height:1px on the container and negative margin-top on child elements. Why I don't know.

But make relative doesn't mean the elements will be side by side instead you need to change the display property or use float :

display:inline-block

Like this http://jsfiddle.net/8wkmukv6/4/

or

float:left // float:right

Like this http://jsfiddle.net/8wkmukv6/3/

Answer 2

CSS: Create a class "horizontal". For every child, display as inline.

.horizontal * {
  display: inline;
}

HTML: Wrap any elements in class "horizontal", they will appear side by side.

<div class="horizontal">
  <b>Bold</b>
  <u>Underline</u>
  <i>Italic</i>
</div>