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..

    css - how to hide href link nested inside a div?

    How to create the timetabling with div properly?

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    How to get inner and outer width to a single element?

    How to make a simple timer image slideshow using HTML and CSS

    How to make a titled box with css?

    How to hide repeated content from search engines with CSS?

    How to set background-image to take remaining section of the page in semantic-ui

    How do I bottom-align bars in a CSS vertical bar chart?

    how to Add sub menu to dropdown menu

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?

    CSS: How do I centre an element relative to its parent while right-aligning its sibling?

    How to draw a line from the middle of the page to the right side?

    How do I change the function of a button when the window size changes?

    How do I organise divs that are nested inside each other?

    How to use Jekyll baseurl in css files

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    How to remove dropdown active color in bootstrap 3.0?

    How to find the screen width and apply it to a particular css

    How to apply direction css attribute in list elements

    css how to get rounded corners on button.

    Javascript slideshow that gradually zooms on image [closed]

    how to make the file input field wrap?

    How to make the width property to work as auto in css

    How can I get placeholder text to shrink to fit within its text input element and show its entire value? [duplicate]

    How do check the Css properties for an element when pressed in Google Chrome Developer Tools

    How to apply External CSS to Html Helper Class Elements?

    How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?