Question

I’m making a website and trying to create a login box. I have a website with two boxes of content, and I want to add a third “login box”.

However, I can’t seem to do this, because it appears above (when I have the current width of the container) or above (when I increase the width of the container to accommodate for the increase of space because of the box).

Also, margins don’t seem to be affecting the newly created box either.

Here is what I want it to look like: https://i.stack.imgur.com/Kmm1g.jpg

And here is the current website: http://www.winterlb.com/

So my question is, what is the easiest way to accomplish this? Thanks.

Answer 1

You can put your login box and your nav box in the same div. Float this div and the main content div like so:

HTML:

<div id="navBar">
 <div id="loginBox">
   ...
 </div>
 <div id="navBox">
   ...
 </div>
</div>

<div id="mainContent">
  ...
</div>

CSS:

div#navBar {
  float: left;
  width: 200px;
}

div#mainContent {
  float: left;
  width: 600px;
}