CODEWITHSUNDEEP
htmlinline
Cwtch22
Cwtch22

Reputation: 79

How to make divs appear horizontally?

so I have created 3 divs, each acting as a navigation, however these divs stack vertically, how can I make it so that they stack horizontally? Here's the code;

HTML;

<div class="link">
    <!--nav-1-->        
    <div id="showmenu1" class="font-white">Click Here</div>
        <div class="menu1" id="font-white" style="display: none;">This is all some random text!</div>
    <!--nav-2-->
    <div id="showmenu2" class="font-white">Click Here</div>
        <div class="menu2" id="font-white" style="display: none;">This is all some random text!</div>
    <!--nav-3-->
    <div id="showmenu3" class="font-white">Click Here</div>
        <div class="menu3" id="font-white" style="display: none;">This is all some random text!</div>
</div>

CSS;

.link {
display: inline;
padding: 2px;
letter-spacing: 6px;
text-align: center;
}

Upvotes: 0

Views: 65

Answers (3)

Carl0s1z
Carl0s1z

Reputation: 4723

What about float:left or inline-block. Like in the examples down here.

.link div{float:left;}

DEMO float:left

or

.link div{display:inline-block;}

DEMO inline-block

Upvotes: 2

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

Added this to your CSS

.font-white
{
    display: inline-block;
     float:left;

}

Changed this in your CSS:

.link {
    display: inline-block;
}

Output:

enter image description here

Working Fiddle

Upvotes: 0

Anonymous
Anonymous

Reputation: 12027

Just add display: inline to the div elements:

.link div {
    display: inline;
}

Fiddle: http://jsfiddle.net/ZyN84/

In addition, the display: inline within the .link class is not necessary unless you plan on having the container of the divs aligned with other elements in the same manner:

Fiddle: http://jsfiddle.net/ZyN84/1/

Upvotes: 2

Related Questions