CODEWITHSUNDEEP
htmlcss
Elroy Dayan
Elroy Dayan

Reputation: 43

3 divs in a row , 1 in middle but have a float left inside the div

Have a question about a Website im building. The Header part of the website contain inside it 3 divs that should be in the same row. 1 in the left side , 1 in the middle of the screen , and 1 in the right side. The Header width is 100%.

#header {
background-color:#352618;
height: 100px;
width:100%;
}

and the three divs inside:

#logo
{
float:left;
width:200px;
height:80px;
margin-top:6px;
margin-left:20px;
}

#Menu {
font-size:17px;
margin: 0 auto;
padding-top:20px;
width:100%; /** before it was 850 px **/
}

#LanguageSelect
{
float:right;
width:120px;
height:80px;
font-size:14px;
padding-top:60px;
padding-right:10px;
}

Ok , now the question is : The menu part is the menu of the header , it's a <li> and <ul> drop down menu. Code:

   <div id="Menu" class="text_blue">
    <ul id="menu_noya">
        <li class="head_item">
            <a href="mine.html?search_engines">Women</a>
                <ul>
                    <li><a href="http://google.com/">Google</a>                         </li>
                    <li><a href="http://yahoo.com/">Yahoo</a>       </li>
                    <li><a href="http://live.com/">Live        Search</a></li>
                </ul>
        </li>
   </ul>
   </div>

And the result is that the Logo is placed OK, the LanguageSelect is OK , but the menu sticks to the left and not in the middle of the screen, why? because in order the make the <li> and <ul> in the same row , I needed to use a float:left so the menu can be in same row.

What can I do in order it to be in the middle , without using float:left?

Here's an example of how it looks in general. http://jsfiddle.net/GEKkf/

Thanks alot for help and read! Elroy.

Upvotes: 2

Views: 126

Answers (3)

John Verco
John Verco

Reputation: 1377

You need to change the li.head_item:hover ul entry in your CSS file to the following:

li.head_item:hover ul { 
position: absolute;
 display: block; 
 width: 142px;
 background-color: #e9e9e9;
}

Upvotes: 0

Danield
Danield

Reputation: 125443

Add the following classes:

FIDDLE

#header {
    text-align: center;
}

#Menu {
    display: inline-block;
    font-size: 17px;
    padding-top: 20px;
}

Also, for another way doing this, see my answer here.

Upvotes: 2

James
James

Reputation: 2033

Put all three divs in float: left; and put them as 33% width (or a tiny amount lower than 33% if you want to)

Then add an html element which has clear:both; after to make sure you push the rest of the page down. You can also use the css :after if you prefer.

Upvotes: 0

Related Questions