CODEWITHSUNDEEP
csscss-float
Ycon
Ycon

Reputation: 1950

Aligning elements horizontally in header

I've just made my first menu header using CSS. I am having trouble aligning them though- I want to align one menu to the right, and the other to the left. Below is an image on how I want it to look:

Example

Here is some of my CSS code:

.main-navigation {
    clear: both;
    margin: 0.5em auto;
    max-width: 2560px;
    min-height: 55px;
    position: relative;
    width: 92%;
}

.navbar {
    background-color: #fff;
    opacity: 0.8;
    margin: 0 auto;
    max-width: 2560px;
    width: 100%;
    position:fixed;
    -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
    -moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
    box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
    z-index:9999;
}

.navbar menu2 {
    float:right;
    }

.navbar img {
    z-index: 1000;
    width:50px;
    height:50px;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
}

My site is here if you want to look at more of the source code.

Upvotes: 1

Views: 86

Answers (2)

Anirudh Modi
Anirudh Modi

Reputation: 1829

    <class="img" style="
    /* float: left; */
">

                <div class="nav-menu" style="
    float: left;
"><ul><li class="page_item page-item-5"><a href="http://yarnball.net.au/cart/">Cart</a></li><li class="page_item page-item-6"><a href="http://yarnball.net.au/checkout/">Checkout</a></li><li class="page_item page-item-7"><a href="http://yarnball.net.au/my-account/">My Account</a></li><li class="page_item page-item-2"><a href="http://yarnball.net.au/sample-page/">Sample Page</a></li><li class="page_item page-item-4 current_page_item"><a href="http://yarnball.net.au/">Shop</a></li><li class="page_item page-item-104"><a href="http://yarnball.net.au/wishlist/">Wishlist</a></li><li class="page_item page-item-105 page_item_has_children"><a href="http://yarnball.net.au/my-lists/">Wishlists</a><ul class="children"><li class="page_item page-item-106"><a href="http://yarnball.net.au/my-lists/create-a-list/">Create a List</a></li><li class="page_item page-item-108"><a href="http://yarnball.net.au/my-lists/find-a-list/">Find a List</a></li><li class="page_item page-item-109"><a href="http://yarnball.net.au/my-lists/edit-my-list/">Manage List</a></li><li class="page_item page-item-107"><a href="http://yarnball.net.au/my-lists/view-a-list/">View a List</a></li></ul></li></ul></div><img src="http://wiki.miranda-ng.org/images/archive/c/c0/20140919163518!WhatsApp_logo.png">

                <ul class="menu2" id="right"style="
    /* box-sizing: border-box; */
    padding: 0px;
"> <a href="http://www.w3schools.com/html/">MOVE ME TO THE right in line with search/menu content</a> | <a href="http://www.w3schools.com/html/">Shop  </a> | <a href="http://www.w3schools.com/html/">Info </a>


                    <form role="search" method="get" class="search-form" action="http://yarnball.net.au/">
                <label>
                    <span class="screen-reader-text">Search for:</span>
                    <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
                </label>
                <input type="submit" class="search-submit" value="Search">
            </form>


                </ul></class="img">



#right
{
float:right;
padding:0px;
}
    .nav-menu
{
float:left;
}
ul
{
padding:0px;
}

you need to give float right to menu2 and the ul comes with a padding of 40px; so its better you either specify that way or 

*
{
padding:0px;
margin:0px;
}

which will remobe all the padding and margin from each and every html element, which is the best practice.

I MUST TELL YOU IF YOU ADD CSS IN *, IT MEANS YOU ARE APPLYING ON EVERYTHING, and currently everything in your website will go crazy, but this is the best practice.

Upvotes: 1

programking
programking

Reputation: 1386

First of all you want to surround that menu with a <div>:

<div class="right">
    <ul class="menu2"> <a href="http://www.w3schools.com/html/">MOVE ME TO THE right in line with search/menu content</a> | <a href="http://www.w3schools.com/html/">Shop  </a> | <a href="http://www.w3schools.com/html/">Info </a>
</div>

Then in your css code you want to use the float style to move it to the right, and then use margin-right so it doesn't collide with your search button :

.right {
  float: right;
  margin-right: 75px;
}

After you are done with that you want to move the main content down a bit, so I you are going to want to add a margin-top style to the page-title class:

.page-title {
  margin-top: 85px;
}

Make sure you change 85px with what you are comfortable with. I just put that there because, in my opinion, that is what looks best. What your new header should look like:

enter image description here

Upvotes: 1

Related Questions