Question

I have two div blocks, one with tabs, one regular one. Here is the html:

<div id = "container"></div>
<div>
<ul class="tabs">
        <li><a href="#tab1">My Quests</a></li>
        <li><a href="#tab2">Friends</a></li>
        <li><a href="#tab3">Find</a></li>
    </ul>

    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <!--Content-->
        </div>
        <div id="tab2" class="tab_content">
           <!--Content-->
        </div>
        <div id="tab3" class="tab_content">
           <!--Content-->
        </div>
    </div>
</div>

I wanted to place these side by side, with space between them.

https://i.stack.imgur.com/QPv2I.png
![]dsd1

Answer 1

You can use float or inline-block for this type of functionality.

css:

.tabs, .tab_container{
 float:left;
}

may be you have to read these articles also:

http://css-tricks.com/795-all-about-floats/

http://css-tricks.com/37-the-how-and-why-of-clearing-floats/

Edit:

as per the below comment write this:

.tabs, .tab_container{
     display:inline-block;
     white-space:normal;
    }

& give white-space to its parent

.parent{white-space:nowrap}

Html :

<div class="parent">
    <ul class="tabs">
        <li><a href="#tab1">My Quests</a></li>
        <li><a href="#tab2">Friends</a></li>
        <li><a href="#tab3">Find</a></li>
    </ul>

    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <!--Content-->
        </div>
        <div id="tab2" class="tab_content">
           <!--Content-->
        </div>
        <div id="tab3" class="tab_content">
           <!--Content-->
        </div>
    </div>
</div>