Inspiring

Answered

img positioning in header of DW example file

Forum|Forum|8 years ago
July 23, 2018
4 replies
781 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>

.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 is closed to new replies. Start a new post to keep the conversation going.

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>

A

arisa53851427

Known Participant

.header>img{

float: right

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

}

Nancy OShea

Community Expert

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

O sorry forgot the semicolons;)

Nancy OShea

Correct answer

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.