Reputation: 81

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?

Upvotes: 2

Answers (5)

Philip

Reputation: 4592

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

Upvotes: 0

gulyan

Reputation: 662

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.

Upvotes: 0

Yogu

Reputation: 9445

#NavigationMenu {
    float: left;
}

.SearchBox {
    float: right;
}

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

Upvotes: 3