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:

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

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

javascriptjqueryhtmlcss

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Can anyone assist with solving an issue I am facing with a timer and a pause button? I need the pause button to be disabled once clicked, until a popup appears, then it should become enabled again. My code snippet is provided below: HTML: <button md-i ...

javascripthtmlangulartypescript

Input the chosen icon list values into a designated box

As a beginner in the world of Javascript, I am venturing into creating a password generator that involves using icons. The concept is simple - by clicking on any number of icons from a list, the corresponding hex code will be displayed in an input box. The ...

javascriptjqueryhtml

What is the reason for the disparity between CSS box-sizing content-box and border-box?

Consider the following example where I only changed the CSS box-sizing property from content-box to border-box. The resulting output difference is significant. Give this code a try: .box1 { width: 300px; height: 100px; border: 1px solid blue; pa ...

htmlcss

Python allows for the color coding of numbers using a method that is comparable to the conditional

Looking for a Python module or workaround to color code numbers from 0 to 100, transitioning from red to green. I want to visually represent a score by changing the font color based on the number without starting from scratch. Considering creating a dictio ...

pythonhtmlcssnumbersconditional-formatting

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: Here is what I have been able to achieve: In the second picture, the divs are shown separately. My goal is to display the incoming data in a single popup like in the first picture, but I am having trouble a ...

javascripthtmlcssreactjs

What is the reason for needing a page reload in Javascript or JQuery?

I'm curious why Javascript or jQuery require a page reload before applying certain effects. CSS updates in real-time, as demonstrated by the following example: This changes dynamically without needing to refresh the page @media all and (max-width:7 ...

javascriptjquerycssmedia-queriesreal-time

Implementing Node.js with browser cache and handling 304 responses

I am currently in the process of creating a single page application with a standard HTML layout as shown below: <html> <head> <title>...</title> <link rel="stylesheet" media="all" type="text/css" href="css/main.css"> ...

javascripthtmlnode.jshttphttp-headers

CSS: "Cutting-edge" design. In what way?

I am seeking to replicate a design similar to that of Fantastical's website (https://flexibits.com/fantastical), where the edge of a screenshot extends beyond the page boundary. As the user resizes the window, more of the screenshot becomes visible. A ...

jqueryhtmlcssresponsive

How to target the DIV elements that have at least one unordered list (UL) inside using CSS selector or JavaScript

Imagine a hierarchy structured like this: <div class="first_level"> <div class="second_level_1"> <div class="third_level_1"> <div class="fourth_level_1"> <ul><li></li><li></li></ ...

htmlcsscss-selectors

"Create a Single-Page Bootstrap Website with a Responsive Design showcasing PHP Code within the Contact Form

Working on the final touches of a single-page responsive website project for a client. Utilizing a Bootstrap contact form located at the bottom of the HTML document. The PHP code is unexpectedly displaying in the text fields of the contact form. I've ...

phphtml

"Padding has not been recognized as a valid input value

I'm struggling with getting padding to be accepted by the browser when I style a card using Material-UI. const useStyles = makeStyles((theme) => ({ cardGrid: { padding: '20px auto' }, })) Unfortunately, the browser is not recogni ...

htmlcssreactjs

create a gentle appearance for an element

I am looking to replicate the visual appearance of each page on this particular website: There is something about the lighting that I really admire. I have attempted to recreate the animation, but I have been unsuccessful in my attempts. Any assistance wo ...

cssanimation

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

I need to display 2 adjacent boxes with dynamic content rendered using Angular. The Container should have the same height as Box1. The height of Box2 may vary due to its dynamic nature, but it should never be taller than Box1. If it does become higher, a s ...

htmlcssdynamicheight

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

Tips for switching images in a grid using jQuery

I have implemented an image grid using flexbox on a website I am developing. The grid consists of 8 boxes, and my goal is to randomly select one box every 2 seconds and assign it one of 12 random images. My strategy involves creating an array containing UR ...

javascriptjqueryhtml

The Twitter widget is not staying in sync with the rest of the page when scrolling on

Twitter provides a widget that is widely used by many people. Below is the code provided by Twitter: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', ...

htmlcssinternet-explorerscroll

Switch the navbar background color from see-through to black

On my website, I have set up a navbar navigation that transitions between a transparent background and a black background as the user scrolls down. However, I would like the black background to be present at all times for the navbar. I built the website us ...

htmlcssbootstrap-4

Having difficulty specifying numerical entries only

I have been attempting to create an input field that only accepts numbers, but for some reason it still allows letters to be entered. Why is this happening? <input type="number" pattern="[0-9]" ...

javascriptangularjshtml

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

I'm currently working on the login form. Below is my view in CodeIgnitor: <div id="login-form"> <?php echo heading('Login', 2); echo form_open('login/login_user'); echo form_input('email', set_value ...

javascriptjqueryhtmlcss