How to Use CSS to Align an Image in a Header

I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out.

Currently, here is what I have:

https://i.sstatic.net/oRWvR.png https://i.sstatic.net/RYnDp.png

The second picture illustrates what I am trying to achieve. Below is a snippet of 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>
htmlcss

Answer №1

To address your query, the position:absolute property may be what you are seeking. I've made some adjustments to your CSS code in an attempt to resolve your issue. Trust this alteration proves beneficial.

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

Answer №2

One reason for this behavior is due to elements that have the CSS property float, which causes them to be positioned outside of the normal document flow.

To resolve this issue, you can use a technique known as the clearfix method by enclosing the logo within a container. Since the clearfix cannot be directly applied to the img element, it should be placed inside a 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>

Answer №3

Utilizing flexbox instead of the float property can help position the image in a more efficient manner within the document flow. To achieve this, consider using margin-left: auto on the image element as demonstrated below:

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>

Answer №4

You should definitely consider using flexbox for your layout. It's an easy-to-use and responsive solution.

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>

Answer №5

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>

Answer №6

To adjust the positioning of an element, you can utilize the CSS property position: absolute; and then manually position it by using top: %%; and right: %%;, replacing the %% with your desired distance from the top and right.

Additionally, by placing the image inside a parent container such as a div, you can assign the parent class position: relative; to position the image relative to its parent container.

Answer №7

Feel free to utilize this snippet

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centered buttons placed right next to each other

Having trouble getting my buttons centered and aligned side by side on the screen. I've managed to achieve one or the other but not both simultaneously. Currently, the buttons are next to each other but positioned at the top left corner of the screen. ...

htmlcss

Utilize Bootstrap to switch between 'collapse' and 'collapse in' depending on the device being used

I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this? <div ...

jqueryhtmlcsstwitter-bootstrap-3

What is causing the divs to remain stationary instead of floating away with BootStrap?

My divs aren't aligning properly as expected when using the BootStrap Grid System. For example, if I have 4 columns and then another 2 columns, the second div should take up the next 4 columns but instead it's appearing below in the same column r ...

htmlcsstwitter-bootstrap

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

I'm currently working on developing a web application using Framework7. Framework7 offers routing APIs for navigating between HTML pages. It seems that the pages are loaded dynamically through AJAX requests. I am curious if it is possible to preload ...

javascriptjqueryhtmlcsshtml-framework-7

scrape particular data from a table using scrapy

Currently, I am utilizing scrapy to extract content from a website specifically located within a particular <td> tag. The guide provided demonstrates downloading all the information, however, I only require the data from one individual <td>. As ...

pythonhtmlweb-scrapingscrapy

Tips for inserting a footer at the bottom of every page during the conversion process from HTML to PDF

Could use some assistance with converting HTML into a PDF report. In particular, I want the footer to always appear at the bottom of the last page, even if there is minimal content on that page. Any suggestions? I've been utilizing the wkhtmltopdf to ...

javascripthtmlcssangularwkhtmltopdf

Achieving Dynamic Alignment in CSS: How to Responsively Align a Div to the Width of its Parent Using Padding and Margins

My dilemma could not be clearer - I am struggling to properly align 4 divs within a width of 1150px (the maximum width of the content div). When resizing the screen, I want them to adjust accordingly: 4 in a row when possible, then 3 in the center, and so ...

cssresizeresponsive-designcss-float

The process for changing the textContent to X when an image is clicked

How can I create a function that changes the text content to 'X' when an image is clicked? I already have a function that updates the title based on the image dataset, but combining the two functions has been unsuccessful. Can someone help me con ...

javascripthtml

When the state changes, initiate the animation

Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons. At the moment, I have set the data type showActivities to false by default and changed ...

javascriptcssvue.jsanimationvue-data

The combination of absolute positioning and percentage-based height measurements allows for

For more information, go to http://jsfiddle.net/A2Qnx/1/ <div id='w'> <div id='p'> <div id='c'> </div> </div> </div> With absolute positioning enabled, div P has a height ...

htmlcssheightcss-position

Connecting CSS styles and images to my EJS templates on a distant Express server using Node.js (Ubuntu 18.04)

I have been hunting for a solution here extensively, but every attempt has failed. So, here's the issue I'm facing: I have created a basic Express server locally to display a static page until I finish full integration. The structure of my site ...

cssnode.jsexpressejsbad-gateway

Using the CSS property 'clear' creates a significant gap in the layout

Using a div like this to clear space after floats: .clear { clear:both; } However, the formatting is getting messed up with extra space. Any ideas on how to fix it? Appreciate your help! ...

css

The nodes on a 2-dimensional grid overlap each other when the browser window is resized

In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window. I am looking for a solution to automatically resize all nodes based on changes ...

cssreactjs

Animate a jumping figure using jQuery

Is it possible to create an animation of a person jumping from the bottom of the screen to the top, with the scroll bar following them? I have my doubts but would love to know if it can be done. If you want to see what I mean, check out this PDF: http:// ...

jqueryhtmlcssanimation

Ways to retrieve the file name and additional attributes from a hidden input type

Is it possible to access the file name and other attributes of a hidden file when submitting it using the <input type="hidden"> tag? My current project involves drag and drop file functionality on a server using Node.js. If I am able to dynamically ...

javascriptjquerynode.jshtml

The placement of buttons in a responsive web design

Need help with adjusting button positions in mobile mode relative to text. Tried using different position settings like absolute and relative, but buttons are not staying aligned with the text on mobile devices. Can anyone assist? .button { display: b ...

htmlcss

Master br tag in HTML: a complete guide

I am currently struggling with understanding how to correctly use the line break tag in HTML. During a recent class test, we were tasked with identifying issues within an HTML script, and I mistakenly believed that < /br> was incorrect. I am unsure ...

html

Unable to adjust the size of the font within a text field component in Material UI

I'm currently delving into learning Material UI and am faced with the task of enlarging the text field on my webpage. Despite embedding styles along with the field, the height, width, and other properties change except for the size. Here's the sn ...

cssreactjsmaterial-ui

Detect IE 9 and IE 10 with jQuery

My jQuery code works well in Chrome and Mozilla but not in IE. if ($("html").hasClass("ie")) { $(function(){ $('.green-column, .red-column, .grey-column').click(function() { alert($(this).attr("data-type")); ...

jqueryhtmlinternet-explorerbrowser-detection

Place a div element immediately following a table row in the HTML document

Welcome to my hotel and cabin availability page! I've created a PHP query that displays the available hotels and cabins in a table format. However, I want to enhance the user experience by displaying a Google Maps location and some pictures of each ho ...

phpjqueryhtml