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

    Making one DIV fit inside another DIV

    I have a (left) column in a "liquid" template page that extends below what should be the bottom of the page. I'm not sure how to make it fit.

    http://flahotproperties.com

    Suggestions? Solutions?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Yeah, this is happening because you positioned your left column absolutely. This is taking it out of the natural flow of elements and it has no influence whatsoever on other elements on that level in the DOM tree. Use floats to get your columns side by side and clear that float (as you’ve done already in the footer).

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In that Section DW8 gives me choices of Absolute, Fixed, relative and Static. All but Absolute result in the page being scrambled, so I guess I'm not getting it yet. I didn't "do" the footer, this is a reworked template. I'm extremely green at this.

  • #4
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Just replace these 2 styles:
    Code:
    #leftColumn {
    	width: 169px;
    	position: absolute;
    	left: 28px;
    	top: 212px;
    	height: 921px;
    		}
    #rightColumn {
    		width: 176px;
    		position: absolute;
    		right: 27px;
    		}
    With:
    Code:
    #leftColumn {
    	width: 169px;
    	float:left;
    	height: 921px;
    		}
    #rightColumn {
    		width: 176px;
    		float: right;
    		}
    That'll fix the right and left columns (though the right doesn't appear broken). A good thing to remember is that absolute positioning is almost never recommend for the very reason VIPStephan said.
    Last edited by Majoracle; 01-27-2008 at 06:50 AM.

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now I see it. No position at all. That works great.

    Thanks!

    My next question is how do I stop my #innerwrapper (center content white area) from shrinking shorter than the left and right columns on a wide screen display?
    Last edited by harper74; 01-27-2008 at 06:26 PM.

  • #6
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Simple. Use the clearfix technique.

    Add this too your CSS:
    Code:
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    .clearfix {display: inline-block;}
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    Then add the class to your innerWrapper div:
    Code:
    <div id="innerWrapper" class="clearfix">
    This makes it clear the right and left floating columns. If you're curious about how it works, look over this: http://www.positioniseverything.net/easyclearing.html

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's perfect! Thank you, thank you!

    It's interesting that it doesn't appear correctly in DW8 design view, but it works just fine in the view browser.

  • #8
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not quite perfect --- It's a mess in IE-7.

    It's ok in IE6, Netscape, even Opera, Safari and Camino.

  • #9
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Try adding class="clearfix" to the "wrapper" div too. Not 100&#37; on if it'll fix it, but it seems like the most probable cause. IE in general is a huge pain in the butt.
    Last edited by Majoracle; 01-28-2008 at 05:14 AM.

  • #10
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I've seen the 'content: ".";', but I'm not sure what it means. Do you have the short version on it?

  • #11
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Class ="clearfix" did the trick! Thanks!


  •  

    Posting Permissions

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