How can I line up my html elements in an element? - html

Question

I have a navigation bar with hyperlinks to other pages. I decided to use different divisions for each hyperlink because I couldn't get them to spread out. When I execute this on my browser, two of the hyperlinks(both the right ones) are slightly below the other ones. I don't know if that is because of my mac or if it's an error in the code. Could someone please tell me how I can make sure all hyperlinks are evenly lied up in 2 lines?
.navbar {
padding: 15px;
font-size: 28pt;
background-color: #F64C72;
position: relative;
top: 20px;
text-align: center;
margin: auto;
font-size: 17pt;
}
.connectp1 {
text-align: left;
}
.connectp2 {
text-align: center;
}
.connectp3 {
text-align: right;
}
.connectp4 {
text-align: left;
}
.connectp5 {
text-align: center;
}
.connectp6 {
text-align: right;
}
<div class="navbar">
<div>
<div class="connectp1">
First Peoples
</div>
<div class="connectp2">
Natives And Newcomers
</div>
<div class="connectp3">
Provincial Centre
</div>
</div>
<div>
<div class="connectp4">
Industrializing City
</div>
<div class="connectp5">
Wars And Crises
</div>
<div class="connectp6">
The Modern Metropolis
</div>
</div>
</div>

Answer 1

You don't need extra layers to spread out. Inline elements like <a> are better for this kind of menus, so just keep it simple. The code bellow will split in two lines only if required.
.navbar {
padding: 15px;
background-color: #F64C72;
text-align: center;
font-size: 17px;
}
.menu {
display: inline-block;
margin: 10px auto;
white-space: nowrap;
}
nav a {
display: inline-block;
padding: 5px;
white-space: normal;
vertical-align: top;
}
<nav class="navbar">
<div class="menu">
First Peoples
Natives And Newcomers
Provincial Centre
</div>
<div class="menu">
Industrializing City
Wars And Crises
The Modern Metropolis
</div>
</nav>
However I recommend you considering some improvements in your design to help the menu look more tidy.

Answer 2

This looks like a perfect opportunity to use flexbox setting justify-content. We can just work with a div to hold all the nav and then a div for each row then the links directly.
flexbox handles the distribution of the a elements in our instance, while setting justify-content: space-between determines how the a elements are spaced.
.navbar {
padding: 15px;
font-size: 28pt;
background-color: #F64C72;
position: relative;
top: 20px;
text-align: center;
margin: auto;
font-size: 17pt;
}
.navbar > div {
display:flex;
justify-content: space-between;
}
<div class="navbar">
<div>
First Peoples
Natives And Newcomers
Provincial Centre
</div>
<div>
Industrializing City
Wars And Crises
The Modern Metropolis
</div>
</div>
With IE 10 you will need to prefix with -ms- and it won't work at all with older versions of IE if you need to support IE 9 and earlier. See: https://css-tricks.com/almanac/properties/j/justify-content/

Answer 3

You would be much better off using unordered lists (ul) with list items (<li>), and then displaying the lists as table rows/table cells as in the snippet below, and vertically aligning to top. Btw, your current css includes duplication, there is no need to created 2 different classes to text-align to the right (e.g)
Feel free to adjust the snippet ( I reduced the huge font size! - so that the adjustments could be seen in the snippet)
* {
margin: 0px;
padding: 0px;
}
nav {
margin: auto;
top: 20px;
padding: 20px;
font-size: 13pt;
background-color: #F64C72;
text-align: center;
}
nav ul {
margin: 0px;
list-style-type: none;
vertical-align: top;
display: table-row;
}
ul li {
display:table-cell;
}
ul li a {
text-decoration: none;
}
<nav>
<ul>
<li>First Peoples </li>
<li>Natives And Newcomers</li>
<li>
Provincial Centre
</li>
</ul>
<ul>
<li class="">Industrializing City
</li>
<li class="">
Wars And Crises
</li>
<li class="">
The Modern Metropolis
</li>
</ul>
</nav>

Answer 4

Use HTML5 semantic elements when possible. In your case, the nav element is the proper tool for the job. MDN shows:
nav {
border-bottom: 1px solid black;
}
.crumbs ol {
list-style-type: none;
padding-left: 0;
}
.crumb {
display: inline-block;
}
<nav class="crumbs">
<ol>
<li class="crumb">Acme</li>
<li class="crumb">Foo</li>
<li class="crumb">Bar</li>
</ol>
</nav>
<h1>Jump Bike 3000</h1>
<p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>

Answer 5

<div> elements are block-level elements, so take up 100% of the width of a 'row' by default. While you can correct this by simply changing their display to inline-block, I would recommend replacing them with <span> tags instead (which are inline-block by default):
.navbar {
padding: 15px;
font-size: 28pt;
background-color: #F64C72;
position: relative;
top: 20px;
text-align: center;
margin: auto;
font-size: 17pt;
}
.connectp1 {
text-align: left;
}
.connectp2 {
text-align: center;
}
.connectp3 {
text-align: right;
}
.connectp4 {
text-align: left;
}
.connectp5 {
text-align: center;
}
.connectp6 {
text-align: right;
}
<div class="navbar">
<div>
<span class="connectp1">
First Peoples
</span>
<span class="connectp2">
Natives And Newcomers
</span>
<span class="connectp3">
Provincial Centre
</span>
</div>
<div>
<span class="connectp4">
Industrializing City
</span>
<span class="connectp5">
Wars And Crises
</span>
<span class="connectp6">
The Modern Metropolis
</span>
</div>
</div>
Note that you're also likely looking for float: left and float: right
rather than text-align: left and text-align: right, in order to separate out your elements. There's no float: center, though this isn't needed. You can also combine your selectors in this regard to save space, as can be seen in the following:
.navbar {
padding: 15px;
font-size: 28pt;
background-color: #F64C72;
position: relative;
top: 20px;
text-align: center;
margin: auto;
font-size: 17pt;
}
.connectp1, .connectp4 {
float: left;
}
.connectp3, .connectp6 {
float: right;
}
<div class="navbar">
<div>
<span class="connectp1">
First Peoples
</span>
<span class="connectp2">
Natives And Newcomers
</span>
<span class="connectp3">
Provincial Centre
</span>
</div>
<div>
<span class="connectp4">
Industrializing City
</span>
<span class="connectp5">
Wars And Crises
</span>
<span class="connectp6">
The Modern Metropolis
</span>
</div>
</div>