Copy link to clipboard
Copied
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.
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">
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
.header>img{
float: right
margin-right: 10px //*or whatever you want*//
}
Copy link to clipboard
Copied
arisa53851427 wrote
.header>img{
float: right
margin-right: 10px //*or whatever you want*//
}
That code won't work. Do you know why?
Copy link to clipboard
Copied
O sorry forgot the semicolons;)