CODEWITHSUNDEEP
htmlcsscss-float
user0129e021939232
user0129e021939232

Reputation: 6355

Correct way to position elements using CSS

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;
}

Upvotes: 2

Views: 207

Answers (4)

Mr. Alien
Mr. Alien

Reputation: 157284

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

Upvotes: 4

Aj Lewis
Aj Lewis

Reputation: 1

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

Upvotes: 0

Tomzan
Tomzan

Reputation: 2818

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

Upvotes: 0

Adnan K.
Adnan K.

Reputation: 109

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

Upvotes: 0

Related Questions