lecidious lecidious - 1 month ago 5x
CSS Question

How would get two div tags to align horizontally

Okay so I have two div elements that I want to align vertically, the elements are identified as "NavBar" and "title" I have tried multiple times to align them but nothing seems to work... Any help would be great and the code is below.

Here is the 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>
<link rel='shortcut icon' href='favicon.png' type='image/png'/ >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bobby The Death Mage</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<div class="container">
<div class="NavBar">
<h1>Nav Bar<BR>---------------</h1>
<div class="title">
<h1>Site Title<BR>--------------------------------------------</h1>


If you want to align the 2 divs horizontally, you're closing the </div> of "container" before "title", close it after the "title" div block https://jsfiddle.net/L9n8jf2y/

<div class="container">
  <div class="help">
    <h1>Nav Bar<BR /> --------------- </h1>
  <div class="title">
    <h1>Site Title<BR />--------------------------------------------</h1>