Correct way to position elements using CSS

Question

Hi I want to position my navigation next to my site name in the header, however its proven to be difficult and I have had to use position:absoutle and margins but I have to go into the minus numbers to get this to appear correctly.

I was wondering if there was an easier way to make these appear side by side?

Click here to view the JSFiddle!

Or view my code below:

index.html

<header>
<h1>iManage</h1>
 <nav>
    <ul class="maina">
        <li><a href="Home">Home</a></li>
        <li><a href="Projects">Projects</a></li>
        <li><a href="Settings">Settings</a></li>
    </ul>
</nav>
  </header>

style.css

header {
 width:auto;
height:50px;
background-color:#374348;
 }

header > h1 {
font-size:16px;
font-weight:bold;
text-align:left;
color:#FFF;
padding:10px;   
}


.maina > li  {
display:inline; 
list-style:none;
}

header > nav {
text-align:center;
width:300px;
height:auto;
border:medium #999;
 position:absoulte;
top:0;
margin: -50px 0px 0px 60px;
}

score 4 · Accepted Answer · edited May 23 '17 at 12:21

Well, this is the correct way to do so...

Explanation: You need to float your h1 to the left, same goes for nav element as well, now what float will do? It will float your element to the left here, which will create an empty space to the right of the floated element, which will make some space for your nav to shift up, and than am using .clear:after to self clear the parent element, you can use overflow: hidden; too instead of .clear:after(cuz IE will spoil your game here)...

You can also read this answer of mine which will explain you a concept for clearing your floating elements using clear: both; and why you need to clear them.

Demo

header {
    width:auto; /* You don't need this too */
    height:50px;
    background-color:#374348;
}

header > h1 {
    font-size:16px;
    font-weight:bold;
    float: left;
    color:#FFF;
    padding:10px;   
}


.maina > li  {
    display:inline; 
    list-style:none;
}

header > nav {
    width:300px;
    height:auto;
    border:medium #999;
    float: left;
    margin: 10px;
}

.clear:after {
    content: "";
    display: table;
    clear: both;
}

Tips: Generally you would like to have margin and padding on your menu items, I would like to suggest you to use display: inline-block; instead of block, also you can get rid of > if you really don't find a need to use that.

Last but not the least, you are using header which is HTML5 element, so make sure you are using HTML5 Reset stylesheet, which will declare other elements like footer, aside, nav as display: block; say for example HTML5 Doctor Stylesheet Reset

thanks that's perfect! will accept the answer in 7 mins won't let me do it right now but +1 in the meantime for a great answer @Mr.Alien — user0129e021939232, Aug 28 '13 at 13:51

score 0 · Answer 2 · answered Aug 28 '13 at 13:46

0

you can use float:left; to get this easier, learn about this here: http://www.w3schools.com/css/css_float.asp

answered Aug 28 '13 at 13:46

Adnan K.

109
4

better use the official source: http://www.w3.org/TR/CSS2/visuren.html#propdef-float ;I dislike w3schools coz at first glance it looks so official whilst it is indeed not ;) – DrCopyPaste Aug 28 '13 at 15:07

score 0 · Answer 3 · answered Aug 28 '13 at 13:46

0

You can set both the 'h1' and the 'nav' to display: inline-block.

answered Aug 28 '13 at 13:46

Tomzan

2,808
14
25

score 0 · Answer 4 · answered Aug 28 '13 at 13:49

You have two options, firstly you can set both the H1 and Nav elements to float:left, but remember to clear:both on the element following the header tag. Remove the Position:absolute, the top:0 and the Margin and you should be good to go.

Let me know how you get on. AJ

Correct way to position elements using CSS

4 Answers4