html - How would get two div tags to align horizontally -
okay have 2 div elements want align vertically, elements identified "navbar" , "title" have tried multiple times align them nothing seems work... great , code below.
here code:
body { background-color: black; } div.navbar { color: blue; background-color: white; text-align: center; max-width: 25%; min-width: 140px; flex: 1; } div.title { color: purple; text-align: center; } div.container { display: flex; }<!doctype html> <html> <head> <link rel='shortcut icon' href='favicon.png' type='image/png'/ > <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>bobby death mage</title> <script src="code.js" type="text/javascript" charset="utf-8"></script> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="navbar"> <h1>nav bar<br>---------------</h1> </div> </div> <div class="title"> <h1>site title<br>--------------------------------------------</h1> </div> </body> </html>
if want align 2 divs horizontally, you're closing </div> of "container" before "title", close after "title" div block https://jsfiddle.net/l9n8jf2y/
<div class="container"> <div class="help"> <h1>nav bar</h1> </div> <div class="title"> <h1>site title</h1> </div> </div> 
Comments
Post a Comment