1

Hello what I am trying to do is to position an image on the top right corner of my page. In particular in the header. I really cannot figure it out even with the help I have found on stack and the internet in general.

What I have right now is this: What I have right now is this (pic1), what I would like to have is on picture 2:

What I would like to have is this:

The second picture shows what I would like to have. Here is my code:

header {
  margin-top: 10px;
  font-family: verdana;
  line-height: 2em;
  background-color: rgb(187, 204, 232);
}

header img {
  max-width: 100%;
  float: right;
  width: 100px;
  height: 100px;
  margin-top: -50px
}
<body>
  <header>
    <h1>CSS in Action</h1>
    <img id="logoImage" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg">
  </header>
  <nav>
    <ul>
      <li>Topic 1</li>
      <li>Topic 2</li>
      <li>Topic 3</li>
      <li>Topic 4</li>
    </ul>
  </nav>
  <div class="content">
    <section>
      <h1>Topic 1</h1>
      <img src="pic1.jpg">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        <strong>Lorem ipsum</strong> dolor sit <a href="http://www.aau.at" target="_blank">amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam <a href="erat.html" target="_blank">erat</a>.
      </p>
    </section>

    <section>
      <h1>Topic 2</h1>
      <img src="pic2.jpg"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <strong>nonumy</strong> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
        sit <a href="http://www.aau.at" target="_blank">amet</a>.
      </p>
    </section>

    <section>
      <h1>Topic 3</h1>
      <img src="pic3.jpg"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </section>
  </div>
  <footer>
    <ul>
      <li>Impressum</li>
      <li>Legal</li>
      <li>Contact</li>
    </ul>
  </footer>
fen1x
  • 5,616
  • 6
  • 28
  • 39
Djabone
  • 424
  • 4
  • 17
  • It seems like you're looking for `clearfix`. [This answer](https://stackoverflow.com/questions/8554043/what-is-a-clearfix/8554054#8554054) might help you. – fen1x Oct 20 '19 at 16:28

7 Answers7

2

This is because elements with float property are outside of the normal document flow.

You should use so-called clearfix to wrap the logo in the header. It can't be applied directly to the img element, so you should put in the div container first:

.clearfix::before,
.clearfix::after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
<div class="clearfix">
  <img id="logoImage" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg">
</div>
Alireza Sabahi
  • 647
  • 1
  • 12
  • 35
Nina Lisitsinskaya
  • 1,818
  • 11
  • 18
2

I think what you are looking for is the position:absolute property. I've changed your CSS code a little bit. Hope this solves your issue.

header{
    margin: 0;
    padding: 0;
    font-family: verdana;
    line-height: 2em;
    background-color:rgb(187,204,232);
    height: 150px;
}

    header img {
       height: 100px;
       width: 60px;
       position: absolute;
       top: 10px;
       right: 10px;
    }
craft9861
  • 204
  • 2
  • 8
  • I applied it to see what it does. It does do the work but unfortunately the logo doesn't exactly fit the header as it should. I went with the flexbox and it did the work. Thanks for helping craft :) – Djabone Oct 20 '19 at 16:43
1

The float property takes the image out of the normal flow of the document, so remove that and use flexbox instead to position it. I gave the image a margin-left: auto to do this: 

header {
  margin-top: 10px;
  font-family: verdana;
  line-height: 2em;
  background-color: rgb(187, 204, 232);
  display: flex;
}

header img {
  max-width: 100%;
  width: 100px;
  height: 100px;
  margin-left: auto;
}
<header>
  <h1>CSS in Action</h1>
  <img id="logoImage" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg">
</header>
<nav>
  <ul>
    <li>Topic 1</li>
    <li>Topic 2</li>
    <li>Topic 3</li>
    <li>Topic 4</li>
  </ul>
</nav>
symlink
  • 11,984
  • 7
  • 29
  • 50
1

You could use position: absolute; and then position it manually using top: %%; and right: %%; substituting the %% for your desired position away from the right and top.

Edit: If you place the image within a parent object like a div, you can give the parent class position: relative; and the image will be positioned relative to the parent object.

Skouzini
  • 143
  • 1
  • 10
1

You can use flexbox. It is really simple to use and responsive.

header {
  margin-top: 10px;
  font-family: verdana;
  line-height: 2em;
  background-color: rgb(187, 204, 232);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

header img {
  max-width: 100%;
  width: 100px;
  height: 100px;
}
<body>
  <header>
    <h1>CSS in Action</h1>
    <img id="logoImage" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg">
  </header>
  <nav>
    <ul>
      <li>Topic 1</li>
      <li>Topic 2</li>
      <li>Topic 3</li>
      <li>Topic 4</li>
    </ul>
  </nav>
  <div class="content">
    <section>
      <h1>Topic 1</h1>
      <img src="pic1.jpg">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        <strong>Lorem ipsum</strong> dolor sit <a href="http://www.aau.at" target="_blank">amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam <a href="erat.html" target="_blank">erat</a>.
      </p>
    </section>

    <section>
      <h1>Topic 2</h1>
      <img src="pic2.jpg"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <strong>nonumy</strong> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
        sit <a href="http://www.aau.at" target="_blank">amet</a>.
      </p>
    </section>

    <section>
      <h1>Topic 3</h1>
      <img src="pic3.jpg"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </section>
  </div>
  <footer>
    <ul>
      <li>Impressum</li>
      <li>Legal</li>
      <li>Contact</li>
    </ul>
  </footer>
daenerysTarg
  • 352
  • 4
  • 12
1

header{
    margin-top: 10px;
    font-family: verdana;
    line-height: 2em;
    background-color:rgb(187,204,232);
    display:block;
    position:relative;
    float:left;
    width:100%;
    }

    header > h1 > img {
    max-width:100%;
    float: right;
    width: 100px;
    height: 100px;
    margin-top: -20px;
    margin-bottom:10px;
    }
    header > h1{
    position:relative;
    display: block;
    padding:10px;
    }
    nav > ul{
    list-style-type: none;
    padding:0px;
    display: table;
    }
    nav > ul > li{
    float: left;
    padding: 5px;
    line-height: 10px
    }
    nav{
    display:table;
    width:100%;
    background-color: blue;
    color: #fff;
    }
<head>
    <title>
    CSS in Action</title>

</head>
<body>
<header>
    <h1>CSS in Action <img id="logoImage" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg"></h1>
    
</header>
<nav>
    <ul>
        <li>Topic 1</li>
        <li>Topic 2</li>
        <li>Topic 3</li>
        <li>Topic 4</li>
    </ul>
</nav>
<div class="content">
<section>
    <h1>Topic 1</h1>
    <img src="pic1.jpg">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  sed diam voluptua.
    <p>
    <strong>Lorem ipsum</strong> dolor sit <a href="http://www.aau.at" target="_blank">amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam <a href="erat.html" target="_blank">erat</a>.
    </p>
</section>

<section>
    <h1>Topic 2</h1>
    <img src="pic2.jpg"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <strong>nonumy</strong> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit <a href="http://www.aau.at" target="_blank">amet</a>.
    </p>
</section>

<section>
    <h1>Topic 3</h1>
    <img src="pic3.jpg"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    </p>
</section>
</div>
<footer>
    <ul>
        <li>Impressum</li>
        <li>Legal</li>
        <li>Contact</li>
    </ul>
</footer>

</body>
ariferol01
  • 221
  • 4
  • 13
0

You can use this code

body {
  margin: 0;
}

header {
  font-family: verdana;
  background-color: rgb(187, 204, 232);
  width: 100%;
  float: left;
}

header h1 {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  padding: 25px 25px 55px 25px;
  float: left;
}

header img {
  max-width: 100%;
  float: right;
  width: 100px;
  height: 90px;
  margin-top: 18px;
}

nav ul {
  margin: 0 0 30px 0;
  padding: 10px;
  background-color: #264de4;
  width: 100%;
  float: left;
}

nav ul li {
  margin: 0;
  padding: 0 15px;
  list-style-type: none;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: #000;
}

nav ul li.active {
  color: #f00;
}
<header>
  <h1>CSS in Action</h1>
  <img id="logoImage" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg">
</header>
<nav>
  <ul>
    <li>Topic 1</li>
    <li class="active">Topic 2</li>
    <li>Topic 3</li>
    <li>Topic 4</li>
  </ul>
</nav>
<div class="content">
  <section>
    <h1>Topic 1</h1>
    <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>
      <strong>Lorem ipsum</strong> dolor sit <a href="http://www.aau.at" target="_blank">amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam <a href="erat.html" target="_blank">erat</a>.
    </p>
  </section>
  <section>
    <h1>Topic 2</h1>
    <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <strong>nonumy</strong> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit <a href="http://www.aau.at" target="_blank">amet</a>.
    </p>
  </section>
  <section>
    <h1>Topic 3</h1>
    <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </section>
</div>
<footer>
  <ul>
    <li>Impressum</li>
    <li>Legal</li>
    <li>Contact</li>
  </ul>
</footer>
Piyush Teraiya
  • 739
  • 4
  • 7
  • Hello thanks for helping. Why isn't the Background of Topic 1, topic 2, topic 3, topic 4, the same length as of the Header? Or should I say why does not the header cover the whole page width? – Djabone Oct 21 '19 at 21:28
  • Hi check me change - @Djabone – Piyush Teraiya Oct 22 '19 at 05:30
  • it's still the same if you look at the right. The header background is shorter than the topic's one... – Djabone Oct 22 '19 at 16:18