[URGENT] Divs not working :/

[mclmatty]

So, im working on this site, i havent uploaded it to my host yet so here it is on dropbox http://dl.dropbox.com/u/27979708/NCS/index.html
It has a few floating divs at the bottom, i put an outline on the divs so you can clearly see them

my problem is that they are not containing the text properly (the text is going outside my divs) feel free to view the page source if you have too ... its peeing me off to hell at the moment, here is my code for the divs

<div id="content">

    <div id="left">
        <p>bla bla bla wrujgbodsifbgodsuirbgaidusrbgairbgoauisrbgaoisurgbaosrgbaosurigbaosruibgsaoruigb
</p>
    </div>
    
    <div id="right">
        <p>blah blah blah 3rjgbowdefisgnldijsfhgjdsfkjdfsbgjbfkjbskfsfgkhjsdfbghabsfkgbaskdgbakshgjahsbgha
sbfhvasfgbashfgbashfbghasbghasbfg</p>
    </div>

</div>

so on the site you can see that the divs are not containing my text, please help!!!

Here is my CSS for that certain part, if you need it!

#content{
    background:black;
    width:1024px;
    height:300px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:auto;
    margin-top:4px;
    display:block;
    opacity:0.8;
    border:2px solid #FFFFFF;
}

#left{
    background:black;
    margin-left:2px;
    width:338px;
    height:200px;
    margin-right:2px;
    margin-bottom:2px;
    margin-top:3px;
    float:left;
    border:2px solid #FFFFFF;
}

#right{
    background:black;
    margin-left:2px;
    width:670px;
    height:200px;
    margin-right:2px;
    margin-bottom:2px;
    margin-top:3px;
    float:left;
    border:2px solid #FFFFFF;
}

[teedoff]

A div element's natural behavior is to expand vertically to contain whatever is in that div element. Unless of course a set height is set for that div element...hint hint..lol

Side note: You are using floats, which is great! But by the small amount of code you have shown, I dont see how or whether you are clearing your floats.

add overflow: auto; to your content div.

[Excavator]

Hello mclmatty,
"rjgbowdefisgnldijsfhgjdsfkjdfsbgjbfkjbskfsfgkhjsdfbghabsfkgbaskdgbakshgjahsbghasbfhvasfgbashfgbashf bghasbghasbfg" is an awfully long word. If there were some spaces in there it might act more like actual text. As it is, there is nowhere for it to break to the next line so it runs outside it's container.

teed has a good suggestion there, you do need to clear your floats. See this explanation of how overflow: auto; clears your floats.

[mclmatty]

Originally Posted by teedoff

A div element's natural behavior is to expand vertically to contain whatever is in that div element. Unless of course a set height is set for that div element...hint hint..lol

Side note: You are using floats, which is great! But by the small amount of code you have shown, I dont see how or whether you are clearing your floats.

add overflow: auto; to your content div.

Hi thanks, I'm am using a set height for my content div of 300px and the height of the columns is 200px, prior to setting those i did have the div auto expanding like i do on my mums business website ( http://www.viromaservices.com ) which is great, its less work for me.

I have heard of clearing floats before, and i know i am not using that so can you tell me how to do that?

I also added the overflow

thanks for your help!

[teedoff]

Originally Posted by Excavator

Hello mclmatty,
"rjgbowdefisgnldijsfhgjdsfkjdfsbgjbfkjbskfsfgkhjsdfbghabsfkgbaskdgbakshgjahsbghasbfhvasfgbashfgbashf bghasbghasbfg" is an awfully long word. If there were some spaces in there it might act more like actual text. As it is, there is nowhere for it to break to the next line so it runs outside it's container.

teed has a good suggestion there, you do need to clear your floats. See this explanation of how overflow: auto; clears your floats.

lol I didnt even look at his text..sheesh

[mclmatty]

Originally Posted by Excavator

Hello mclmatty,
"rjgbowdefisgnldijsfhgjdsfkjdfsbgjbfkjbskfsfgkhjsdfbghabsfkgbaskdgbakshgjahsbghasbfhvasfgbashfgbashf bghasbghasbfg" is an awfully long word. If there were some spaces in there it might act more like actual text. As it is, there is nowhere for it to break to the next line so it runs outside it's container.

teed has a good suggestion there, you do need to clear your floats. See this explanation of how overflow: auto; clears your floats.

Lol i didnt think of it that way, yea ill try add some spacing and see what happens, that was just placeholder keyboard spam on the site to see it it was working

*tests*

YES! due to my stupid human error and your great notice of that fact that my placeholder spam lacked spaces, it now works the way i want!

[Excavator]

Originally Posted by mclmatty

Hi thanks, I'm am using a set height for my content div of 300px

Oops, if you set a height for the container, you do not need to clear the floats. There is no need for overflow: auto; to be there unless you are going to need a scroll bar to control overflow ... in other words, if the content is more than the 300px height of the container.

[mclmatty]

Thank you all for your help! Much appreciated!

[Excavator]

Originally Posted by mclmatty

that was just placeholder keyboard spam

Here is my text placeholder spam - as a snippet I can insert with a dbbl click:

            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>