Skip to main content
G
gunzelguy
Inspiring
July 23, 2018
Answered

img positioning in header of DW example file

  • July 23, 2018
  • 2 replies
  • 767 views

I'm working with the DW HTML One column liquid, centered, header and footer example file.

In the header there is a logo on the far left. My question is probably super simple: how do I move the logo to the far right?

The relevant code is

<div class="container">

  <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a>

    <!-- end .header --></div>

.container {

width: 80%;

max-width: 1260px;

min-width: 780px;/

background: #FFF;

margin: 0 auto;

}

.header {

background: #6F7D94;

}

I'm guessing that the logo is displaying far left because there is no positioning on it but I can't figure out how(and where) to specify where to position the logo in the css.

Thanks for any help.

This topic has been closed for replies.
Correct answer Nancy OShea

Do you want something like this?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.flex-grid { display: flex; }
.col { flex: 1; }
.right {text-align:right}
</style>
</head>
<body>
<header class="flex-grid">
<div class="col">
<h1>My Awesome Website</h1>
</div>
<div class="col right">
<h3>
<img  src="https://dummyimage.com/300x150" alt="logo"></h3>
</div>
</header>
</body>
</html>

2 replies

A
arisa53851427
Known Participant
July 24, 2018

.header>img{

                      float: right

                      margin-right: 10px //*or whatever you want*//

                      }

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 24, 2018

arisa53851427  wrote

.header>img{

                      float: right

                      margin-right: 10px //*or whatever you want*//

                      }

That code won't work.  Do you know why?

Nancy O'Shea— Product User & Community Expert
A
arisa53851427
Known Participant
July 24, 2018

O sorry forgot the semicolons;)

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    July 24, 2018

    Do you want something like this?

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
    .flex-grid { display: flex; }
    .col { flex: 1; }
    .right {text-align:right}
    </style>
    </head>
    <body>
    <header class="flex-grid">
    <div class="col">
    <h1>My Awesome Website</h1>
    </div>
    <div class="col right">
    <h3>
    <img  src="https://dummyimage.com/300x150" alt="logo"></h3>
    </div>
    </header>
    </body>
    </html>
    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices