Help with positioning Options

[Donal23]

Hi. I'm revamping the aesthetic of my media managing site. I ran into a problem and I can't figure out what stupid mistake I am making. This is the desired layout:



I started fresh with a blank file. I don't use templates or bootstraps or that kinda thing. I started doing it region by region so I first made the top titlebar and had that right then I moved on to the navbar beneath it. Problem is, I can't get the section with the navigation icons to align itself to the left side of the nav div. Here is my code:

CODE

<div class=titlebar>
  <span>Yuusha ni Narenakatta Ore wa Shibushibu Shuushoku o Ketsui Shimashita</span>
  <div>Monday, January 23 2017<br/>4:43 AM</div>
</div>
<div class=navbar>
  <div class=navleft><img src=images/tempnav.png></div>
</div>

...and this is the CSS:

CODE

BODY {
  margin: 0px;
  padding: 0px;
  background-color: #e5e5ff;
  font-family: Inconsolata,sans-serif;
  font-size: 14pt;
  color: #000;
}
DIV.titlebar {
  width: 100%
  height: 40px;
  min-height: 40px;
  background-color: #aaaaff;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #000;
}
DIV.titlebar SPAN {
  font-family: 'Indie Flower',sans-serif;
  font-size: 24pt;
  float: left;
  margin-left: 10px;
}
DIV.titlebar DIV {
  font-family: Arial,sans-serif;
  font-size: 12pt;
  float: right;
  margin-right: 5px;
  text-align: right;
}
DIV.navbar {
  width: 100%;
  height: 40px;
  background-color: #c0c0ff;
  min-height: 40px;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #000;
}
DIV.navleft {
  float: left;
}
DIV.navright {
  float: right;
}

...and this is what I get:



What am I doing wrong? Thanks!

[Donal23]

You mean tempnav.png? That's all the icons in a single file. Sorry, I should've made that clear. I wasn't making the functionality yet, I was just trying to make a working version of my mockup to get the aesthetics working so I made one image to represent all the icons. I guess yea, it's left aligned by default within the navleft div, but the navleft div itself I thought would be on the far left if I floated it left rather than sitting in the center.

Sorry if I'm being dense and missing something.

EDIT: Ahhh, I figured it out. I got rid of the block above, the titlebar section, and it suddenly worked. I then realized, d'oh, that the icon strip was lining up just past the title text so it hit me that the two divs were running off each other. I put clear:both; in the navleft CSS and voila, now it looks perfect.

Whew. Thanks!

This post has been edited by Donal23: Jan 23 2017, 01:10 PM

[pandy]

Well, whatever it was it was left aligned.
Maybe the larger width of your image had something to do with. I used just a small dummy image.

Testing... Nope. Still left aligned. Oh well. You solved it anyway.