Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    [URGENT] Divs not working :/

    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

    Code:
    <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!
    Code:
    #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;
    }

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Last edited by teedoff; 11-29-2011 at 10:50 PM.
    Teed

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mclmatty (11-29-2011)

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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!

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Excavator View Post
    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
    Teed

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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!

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by mclmatty View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you all for your help! Much appreciated!

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by mclmatty View Post
    that was just placeholder keyboard spam
    Here is my text placeholder spam - as a snippet I can insert with a dbbl click:
    Code:
                <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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •