Getting 2 divs on the same line

I’m trying to get 2 divs on the same line, I’ve got

<div class="header">
  <div class="clear hideSkiplink">
     <div class="menuDiv">
             <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
                EnableViewState="False" Orientation="Horizontal" 
                StaticSubMenuIndent="10px" BackColor="#E3EAEB"   DynamicHorizontalOffset="2" 
                Font-Names="Verdana" Font-Size="0.8em" ForeColor="#666666">
            </asp:Menu></div>

            <div class="SearchBox">

            </div>
        </div>
    </div>

I wanna get the menu and the search inside the hideSkiplink with the menu to the left and the search to the right. As it is the search is under the menu. I tried changing adding positions for everything on css as I found around this site, but if I get the menu and search in the same line the hideSkiplink disappears, if I set the search to float right, it goes out of the hideSkiplink.

All I have in my css right now is

div.hideSkiplink
{
background-color:#555555;
width:100%;
 }

div.menu
{
padding: 8px 0px 8px 10px;   
}

any ideas what I can do?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

#NavigationMenu {
    float: left;
}

.SearchBox {
    float: right;
}

.MenuDiv {
    overflow: hidden; /* adjusts the height of .MenuDiv to wrap its children */
}

Method 2

Set

display: inline-block;

And then set their widths as you need (as an absolute value or percentages of the parent container)

Live Demo

Method 3

Add float : left; attribute to the div.menu

Method 4

You can play with float:

float: left;
float: right;
clear: both;

This is not always easy to do.

Another option is to use

display: inline-block;

or to use a span.

Method 5

line-height(child-elements) with a combination of the previous answers

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0