Make a div container between two columns

Here is my code http://jsfiddle.net/BxQ8n/2/`

body
{
    background:url('http://i42.tinypic.com/2e5pbbc.jpg');
    margin: 0;
    padding: 0;
    color: white;
}

div.container
{
    border: 1px solid white;
    width: 800px;
    margin: auto;
}

div.container img#logo
{
    border: 1px solid yellow;
    height: 200px;
    width: 800px;
}

div.container div.top20
{
    border: 1px solid green;
    width: 200px;
    height: 400px;
}

div.container div.menu
{
    border: 1px solid blue;
    height: 50px;
    width: 796px;
}

div.container div#login
{
    border: 1px solid orange;
    width: 200px;
    height: 150px;
    float: right;
    clear: right;
}

div.container div#search
{
    border: 1px solid purple;
    width: 200px;
    height: 80px;
    float: right;
    clear: right;
}

input
{
    width: 180px; margin: 0.5em 0 0 0.55em;
}

input.btn
{
    margin: 0.5em 0 0 0.4em;
    width: 190px;
    font-family: Arial, Helvetica, sans-serif;
    color: #555555;
    font-weight: bold;
}

div.container div#other
{
    border: 1px solid cyan;
    width: 200px;
    height: 570px;
    float: right;
    clear: right;
}

Here is the full screen result http://jsfiddle.net/BxQ8n/2/embedded/result/

What I want need is:

  1. create another div that will be between my two columns
  2. Eliminate the space between logo and menu

Answers


To get the logo to display properly, wrap the image in a div and set a definite height. For a 3 column layout, you will need to create 3 divs, div1, div2 and div3. All these divs will require float:left with widths that will add up to the container width.

Here's the fixed fiddle: http://jsfiddle.net/7zqhb/4/

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

#middle{
 float: left;
 width: 400px;
}

#right{
    float: left;
    width: 200px;
}

It's not clean and semantic by any means but you get the point i think.


Puts them in there own container so something like this

<div id="Containerleft">
  <div id="top 20 songs"></div>
  <div id="top 20 artists"></div>
</div>
<div id="Containermiddle">
  <div id="content"></div>
</div>
<div id="Containerright">
  <div id="login"></div>
  <div id="other"></div>
</div>

Float all to the left and this should solve your problem This also set the width to fit the main container so if your main container was 100 make your left container 20, middle 60 and right 20 pixels.

Hope this makes sense


Make sure you float:left your div's, it is in my opinion the easiest way to build up a website. After that you can give your div's a different Height & Width.

<div id="Containter">
    <div id="LeftPart">
      <div id="T20Songs">top 20 songs</div>
      <div id="T20Artists">top 20 artists</div>
    </div>
    <div id="MiddlePart">
      <div id="MainContent">MainContent</div>
    </div>
    <div id="RightPart">
      <div id="Login">Login</div>
      <div id="Other">Other</div>
    </div>
</div>

Css:

    Containter {
     width:900px;
    }
    LeftPart {
     float:left;
     width:200px;
    }

    MiddlePart {
     float:left;
     width:500px
    }

    RightPart {
     float:left;
     width:200px;
    }

Pay attention to the Width & Height of your main container


Need Your Help

Flex: time how long HTTPService takes to load?

flex actionscript-3 debugging httpservice

I am loading some XML with HTTPService in Flex. It is taking longer than I would like to load. So I want to do some trouble shooting, but in order to tell what is making a difference I need to be a...

netsh http add urlacl work like a local DNS?

http dns iis-express netsh

I'm using netsh http add urlacl url=http://devsite1:80/ user=everyone as mentioned at http://www.hanselman.com/blog/WorkingWithSSLAtDevelopmentTimeIsEasierWithIISExpress.aspx to work with 80 and 44...