CODEWITHSUNDEEP
htmlcss
Peter
Peter

Reputation: 3

text positioning in header section

is there any solution how to move text around in header section? I have an <h1> tag whith email and I would like to move like 20% from left side of page and 50% form right side but all I can found is text-align:right,left, etc.

I add image so you can see on top of page there is this dark box whith email and view basket. How can I move that text the way I like?

image show text on top of page from left 20% and from right around 40%

Upvotes: 0

Views: 2628

Answers (1)

Karl
Karl

Reputation: 850

There's a couple of ways you can position things like that...

Positioning

You are able to position elements using absolute and relative positioning, as seen in the example below, you can use position: relative for the parent container and position: absolute for the child and then use: top, right, bottom or left and define how far away you want the child element to be from its parent. As seen in my example below.

http://jsfiddle.net/8aL05tey/4/

header.header {
  position: relative;
}

header.header h1 {
  position: absolute;
  left: 20%;
}
<header class="header">
  <h1>
   [email protected]
  </h1>
</header>

Flexbox

You can also responsively position elements with flexbox. Flexbox can be relatively hard to understand if you've never messed around with it, there are plenty of SO questions with explanations in it. You can also read a bit about the properties here.

Floats

Alongside with positioning, you can float divs and other elements left and right using float: left and float: right. You can ready more about floats here. :)

There are plenty of options for what you want to achieve and no real "right" answer, it's about exploring what works for you!

Have a great day!

Upvotes: 1

Related Questions