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 14 of 14

Thread: Gaps in divs?

  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts

    Gaps in divs?

    I've already had one issue fixed here today, so figured I'd try for 2...lol!

    Why am I getting gaps in between my divs? Also, is there any way to maintain my rounded [transparent] corner of the header image other than setting the backgrounds of both the header & page-container to "0"??

    http://www.yenko.net/R4/test.html

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Did you try the global style of:

    html, body {
    margin: 0;
    padding: 0;
    }

  • Users who have thanked teedoff for this post:

    chevy_ls_6 (01-24-2011)

  • #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
    Have a look at this chevy_ls_6,
    Changes highlighted in red -
    Code:
    #page-container {
    	width: 960px;
    	margin: 0 auto;
    	position: relative;
    background: #ff0;
    }
    
    #header {
    	height: 164px;
    	background: 0;
    }
    
    #under {
    	height: 164px;
    	width: 960px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 200;
    }
    #over {
    	height: 164px;
    	width: 480px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	z-index: 1;
    }
    
    #topnav {
        width:100%;
        background:red;
        font-size:93%;
    /*position: relative;
    	top: -12px;   */
        line-height:normal;
    	z-index: 220;
    }
    #topnav ul {margin: 0;}
    #sidenav {
    	float:left;
        width: 240px;
    /*background: yellow;*/
    }

    Study that a bit and look at where the yellow background color comes from. That will work as long as your #content is taller than your #sidenav. Here is a demo of that same method - 2 column equal-hieght layout.
    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

  • #4
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Have a look at this chevy_ls_6,
    Changes highlighted in red -
    Code:
    #page-container {
    	width: 960px;
    	margin: 0 auto;
    	position: relative;
    background: #ff0;
    }
    
    #header {
    	height: 164px;
    	background: 0;
    }
    
    #under {
    	height: 164px;
    	width: 960px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 200;
    }
    #over {
    	height: 164px;
    	width: 480px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	z-index: 1;
    }
    
    #topnav {
        width:100%;
        background:red;
        font-size:93%;
    /*position: relative;
    	top: -12px;   */
        line-height:normal;
    	z-index: 220;
    }
    #topnav ul {margin: 0;}
    #sidenav {
    	float:left;
        width: 240px;
    /*background: yellow;*/
    }

    Study that a bit and look at where the yellow background color comes from. That will work as long as your #content is taller than your #sidenav. Here is a demo of that same method - 2 column equal-hieght layout.
    Many thanks!

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Ok, so with that done, why won't the sidenav <div> fill down to evenly with the content <div>, all the way to the footer <div>? It seems to simply be filling just far enough down to contain the content within that <div>?

    http://www.yenko.net/R4/test.html

    [Edit: some quick reading reveals that this is how it's supposed to work, being as a floated div will only be as long as it's content. Workaround time...!]
    Last edited by chevy_ls_6; 12-11-2010 at 10:03 PM.

  • #6
    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 chevy_ls_6 View Post
    Workaround time...!]
    This demo shows how you can make the left column as long as the right. Works well when you know the content will always be taller than the other column.
    simple 2-column layout

    This is a solution I came up with that will be equal height no matter which column has more content.
    equal height 2 column layout
    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

  • #7
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    This demo shows how you can make the left column as long as the right. Works well when you know the content will always be taller than the other column.

    This is a solution I came up with that will be equal height no matter which column has more content.
    equal height 2 column layout
    That's certainly a simple, yet effective way to do it! Question though, and I'm still learning, but doesn't that method take away some ability to adjust for screen width, being as those columns are a fixed width? I was planning on changing everything to "%" based widths, and doing something with my header image, to account for different screen sizes, but...? Or maybe [quite possibly!] I'm missing something??

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Take a look at a fluid faux column layout
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by abduraooft View Post
    Take a look at a fluid faux column layout
    Well now, isn't that something!

  • #10
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    I'm slowing gaining on it...!

    http://www.yenko.net/R4/test.html

    Thanks again, y'all...

  • #11
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    The gap is back between my footer & body container...what am I missing here?

  • #12
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Ok, it's the image that is forcing the gap...sooooo?

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Do you have margin: 0; padding: 0; on the img tag in your css?

  • #14
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Apparently it was a block/inline problem...I changed it to span and float, and we're back in business! Let's hope it stays...lol!

    Thanks for looking, though, teedoff!!


  •  

    Posting Permissions

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