img positioning in header of DW example file

Report · Jul 23, 2018

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.

Report · Jul 23, 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 & Moderator

Report · Jul 24, 2018

.header>img{

float: right

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

}

Report · Jul 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 & Moderator

Report · Jul 24, 2018

O sorry forgot the semicolons;)

img positioning in header of DW example file

1 Correct answer