how to change the position of these links within div header


Tags: css

Problem :

I trying to come up with a simple css layout which should look like this:

enter image description here

This is my html code for the header and nav bar:

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">Help</a>
    <li><a href="">Contact Us</a>
    <li><a href="">Customers</a> 

</div>

And I'm already doing some styling on the navigation bar, however I'd like to be able to keep the two links within the header right aligned and the logo image left aligned. When I try to edit those links in the header, it all gets messed up because I'm confused about how to differentiate between the navigation list items and header list items. Could someone please help me with the header positioning?



Solution :

In the header, you need to float the h1 left, and the ul right, and then add display: inline to your links (to keep them on the same line).

To target the list items in the header, you can simply use a parent selector, like this: #header li.

Here's what you need:

#header {
    border: 1px solid #ccc;
    overflow: hidden; /* clearfix */
}
#header h1 {
    float: left;
}
#header ul {
    float: right;
}
#header li {
    display: inline;
}

See DEMO.


    CSS Howto..

    Normalize.css how to use it?

    How to determine the display order of
  • in a list with 4 columns?
  • How to make my div's shrink dynamically, and not hide certain content?

    CSS - how to overwrite using CSS?

    How can I programatically show/hide a button that is part of the body template in Meteor?

    How to center text horizontally & vertically within dotted border

    Selected text showing oversized selection area

    How to make a dotted underline link on hover?

    How can I convert an svg-glyph into a path?

    How do I remove a specific bullet point within a ul in CSS?

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    Scroll to next and previous div using scrollTop, how do I accomplish this?

    How to create a CSS only (vertical) drop-down menu?

    how to add a CSS attribute just for specific time via JQuery (revert back to normal after 2 sec)

    How to force div element to keep its contents inside container

    How to make somethings like this in CSS?

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How to style
  • s inside
      as a table with custom height?
  • How browser auto resize website to mobile browse?

    How to remove the dots from custom menu with CSS

    PHP & CSS: How to get hover effect for each row of a table?

    Css - how to add an image outside a text box (on the left side but touching the box)

    How to prepend a number before an HTML H2 with CSS?

    How do I update an div css to display an complete image when section is complete?

    How to add background image to only one page in Jade

    How do I get the color attribute of the returned div?

    CSS/PHP: How to make the next div appear on the side instead

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    How do we add the spot bulging effect in css? [closed]

    How to change the CSS of the active toggle button using pseudo CSS transitions