3 columns inside a div tag

[Entiranz]

Hi im having some trouble with a website im making. Inside the main content area i want 3 columns, two for text and one for a javascript based slideshow i made. The slideshow is complete, but the other two columns are having trouble at the moment. They end up below the main content area, not inside it. Ive looked over the code, making sure that they are all the right size and located where they are supposed to be, but cant find any problems with it. I hope you guys can help.

 

The HTML code that specifies the main content area:

<div id="Innehall">
            <h2> Här under ligger bildspelet där alla bilder jag har lagt upp finns.</h2>
            <div id="Vansterkolumn">
            </div>
            <div id="Bildspelet">
            <div id="topbar">
            </div>
            <div id="Bild">
            <img src="Bildspels Bilder/Stolen New.jpg" name="Bilden" border="0" width="375" height="325"/>
            </div>
            <div id="bottenbar">
            <div id="buttonpositioning">
            </div>
            <div id="buttons">
            <a id="Bback" onmousedown="bildprev()"><img src="Bildspel Previous.png" /></a>
            <a id="Breset" onmousedown="bildreset()"><img src="Bildspel Reset.png" /></a>
            <a id="Bnext" onmousedown="bildnext()"><img src="Bildspel Next.png" /></a>
            </div>
            </div>
            </div>
            <div id="Hogerkolumn">
            <h4>Länk</h4>
            <br />
            <p>Här under så finns det en länk till min Skydrive, där man kan se alla mina arbeten i rätt storlek.</p>
            <br />
            <a href="https://skydrive.live.com/?lc=1053#cid=066974471AB2B7A4&id=66974471AB2B7A4!128">Min Skydrive.</a>
            </div>
            </div>

 

The CSS code that specifies the main content area:

div#Innehall
{
    width: 830px;
    height: 500px;
    margin: auto;
    text-align: left;
    background-image: url('Innehall Bakgrunds Textur.png');
    background-repeat: no-repeat;
    border: 1px solid black;
}
div#Innehall h2
{
    text-align: center;
}
div#Innehall h4
{
    text-align: center;
}
div#Bildspelet
{
    width: 400px;
    height: 400px;
    margin: auto;
    background-image: url('Bildspels Bakgrund.png');
    background-repeat: no-repeat;
}
div#topbar
{
    width: 400px;
    height: 25px;
    margin: auto;
}
div#Bild
{
    width: 375px;
    height: 325px;
    margin: auto;
}
div#bottenbar
{
    width: 400px;
    height: 50px;
    margin: auto;
}
div#buttonpositioning
{
    width: 400px;
    height: 15px;
    margin: auto;
}
div#buttons
{
    width: 135px;
    height: 20px;
    margin: auto;
}
div#buttons a:hover
{
    cursor: pointer;
}
#Bback
{
    width: 45px;
    height: 20px;
    display: block;
    float: left;
}
#Breset
{
    width: 45px;
    height: 20px;
    display: block;
    float: left;
}
#Bnext
{
    width: 45px;
    height: 20px;
    display: block;
    float: left;
}
div#Vansterkolumn
{
    height: 400px;
    width: 200px;
    float: left;
    text-align: left;
    margin: auto;
}
div#Hogerkolumn
{
    height: 400px;
    width: 200px;
    float: right;
    text-align: left;
    margin: auto;
}

 

Let me know if you need the rest of the code.

 

Entiranz.

[Entiranz]

Nevermind i managed to solve it. I added a float: left; attribute to the div containing the slideshow. Rookie mistake. Marking this as solved.