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!

[pandy]

The single icon is very much to the left with the markup and CSS you posted. So probably it's something you didn't post.

I wonder why you have DIV.navleft though and why it's floated left. Seems unnecessary. But maybe it has to do with what isn't there.

[Donal23]

Hmm I'm not sure what you mean. What single icon? There are five icons, and they are in the center. Be aware that the first image is a Photoshop mockup of what I'm shooting for. The actual code output is the second image.

As for navleft, I have "navbar" to create the overall space and I figured I'd have separate elements inside of that space. The icons floated to the left and some other stuff floated right. All I've added so far is the icons though, I stopped there because of the problem with them being in the center and not floating left.

Here, I added "border: 2px solid #F00" to the navbar class and "border: 2px solid #0F0" to the navleft class. As you can see, navbar correctly spans the width of the page so there is certainly room in there for navleft to float left. Just can't figure out why it isn't. I can use position absolute and make it go over there, but I'd rather avoid that.



This post has been edited by Donal23: Jan 23 2017, 09:06 AM

[pandy]

In the HTML you posted there is one. Look at what you posted in a browser and see for yourself it's left aligned.

[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.