CODEWITHSUNDEEP
csshtml
Marco Petersen
Marco Petersen

Reputation: 331

Ideal way of indenting things left and right on the same "line"?

So I have two things in a header, namely an image in a h1 and a nav. Here's a simplified version of the HTML:

<header>
  <h1><img src="../img/logo.png"></a></h1>
  <nav>
    <ul>
      <li>blahblah</li>
    </ul>
  </nav>
</header>

I want to make the h1 element go to the left and the nav go to the right. I simply gave the header a width and absolutely positioned both h1 and nav like so:

header {height: 120px;}
h1 {position:absolute; left: 0;top:0;}
nav {position:absolute; right:0; top:0;}

It works, but I find it somewhat inelegant. Is there any other nicer way to do it?

Upvotes: 1

Views: 61

Answers (3)

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

Float property of CSS allows you to float the element to right or left but if you are looking to indent the element then you may need to use

text-indent: 10px;

you may add this in a class and add this class to elements wherever you need the Indentation

Upvotes: 0

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

usually you just float the elements in their respective corners, such as 

header { overflow:auto; }
header h1 { float: left; }
header nav { float: right; }

overflow is used in order for header to retains a height around the elements, but it can be removed in some cases.

Upvotes: 1

Kolby
Kolby

Reputation: 2865

Yes, you should be able to just float them left and right without the positioning.

header {
   height: 120px;
}
h1 {
   float: left;
}
nav {
   float: right;
}

Upvotes: 2

Related Questions