Multi-boxed layout in CSS using DIVs_问答_开发者

开发者 https://www.devze.com 2023-04-09 12:39 出处：网络

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\".

相关专题：css

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开发者_StackOverflow中文版 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: http://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.

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;
}

Add the 'third box' inside your 'sidebar' and add another div to wrap your original sidebar content.

Style the approriate login div and navigation div. Float them left if needed.

Here's a sample html of what the structure should look like http://pastebin.com/3hLmGzRZ

You will never accomplish this properly without a doctype. You are in quirks mode. Add this to your first line and then see where we are: <!DOCTYPE html>