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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div not growing?

    So my mum got me to make her a website and I'm having an issue with the way a div is behaving... Not sure how to go about it...

    I have a paragraph inside a div, but when the paragraph gets bigger and longer, the div's height does not grow...

    Here is what the site looks like now...

    Words On Wax

    but this is what it looks like when the paragraph gets bigger (I just made the font size bigger)

    Words On Wax

    Any help would be appreciated!! Cheers, Brad!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there bradeebo,

    I would suggest that you replace this...
    Code:
    
    div.main_background
    {
    	background-image:url(../images/main.png);
    	backgroud-repeat:repeat-x;
    	min-width:960px;
    	width:100%;
    	min-height:470px;
    }
    ...with this...
    Code:
    
    
    div.main_background
    {
            background-color:#0d7382;
    	min-width:960px;
    	width:100%;
    	min-height:460px;
            border-bottom:10px solid #0b5966;
            overflow:hidden;
    }
    


    coothead

  • #3
    New Coder
    Join Date
    Mar 2005
    Location
    Croatia
    Posts
    20
    Thanks
    1
    Thanked 1 Time in 1 Post
    It is because your inner division is floating inside the parent division and you do not have a clear instruction. Use <div class="clear"></div> right before closing tag of main_info class.

    <div class="main_info">
    <img src="images/candle.png" class="candle" alt="candle">
    <div class="info">
    <h2 class="title">Words on Wax - By Lisa Martin</h2>
    <p class="white_font">
    blabla
    </p>
    </div>
    <div class="clear"></div>
    </div>


    In css add:

    .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}

    That will expand the height of your parent division with the background as well. As a side effect, your background will repeat as well, so use the solution coothead provided
    Hit me up for cheap but quality html/css conversions/rebuilds. Ok, let me see what you've got

  • #4
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    400
    Thanks
    2
    Thanked 30 Times in 30 Posts
    you need to set the overflow to either hidden (as already suggested), which will chop off the content, or use overflow-y:scroll to get a scrollbar so the content canbe scrolled when it does not fit.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #5
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah I was going to change from the background image to colour last night but I got lazy! Thanks a bunch guys! You're all amazing!

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there bradeebo,

    Yeah I was going to ............... but but I got lazy!
    Wrong attitude.

    And definitely no way to treat your mother.

    Your page already has sloppy coding errors because of this attitude....


    So get your act together, stub out those spliffs, and show your mother the respect that she deserves.


    coothead


  •  

    Posting Permissions

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