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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post

    Small gap between sidebars and footer

    Hi.

    I just upgraded my XHTML home page to HTML5. I've got pretty much all the quirks worked out .. except for a small gap between the blue-green sidebars and the footer.

    The gap wasnt there before, so I know it can be eliminated. I'm just not sure how. I've tried playing with padding, but that doesnt seem to do anything.

    The sidebars are marked-up as the new <aside> element, and the center section is marked-up with/as a <section> element.

    Code:
    .liquidElasticHybrid #sidebar1 {
    	float: left;
    	width: 12em;
    	background: #699;
    	padding: 0;
    }
    .liquidElasticHybrid #sidebar2 {
    	float: right;
    	width: 12em;
    	background: #699;
    	padding: 0;
    }
    I use a bit a jQuery to bring those columns down.

    http://radified.com/index.rad

    It's not a big deal, stylistically, but how might I eliminate that gap?

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I reduced the height of the 'mainContent' by 8px and it reduced the gap. But I believe the height is calculated by your JS/jQuery, so you might need to amend the code.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    andrew,

    how did you reduce the height of maincontent?

    i do not know js well enough to perform such tweaks.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I amended it directly in the inline style="height:somenumber-8;", but you can't do that easily as your page uses JS to adjust the heights for the columns. Try amending your function as indicated:
    Code:
            <script>
                function equalHeight(group) {
                   tallest = 0;
                   group.each(function() {
                      thisHeight = $(this).height();
                      if(thisHeight > tallest) {
                         tallest = thisHeight;
                      }
                   });
                   group.height(tallest - 8);
                }
                $(document).ready(function() {
                   equalHeight($(".column"));
                });
            </script>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    Hmm.

    I mod'ed the script, but nothing changed. No big deal. Thanks for trying.

  • #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
    Hello again PonchoX,
    I did not get to spend much time on this before...
    That mystery gap is caused by the default 16px top/bottom margin on your ul inside #mainNav at the top of section#mainContent.

    To illustrate, make your CSS look like this -
    Code:
    nav#mainNav ul {
    	text-align: center;
    	border-bottom: 2px #699 solid;	
    margin: 0;
    }
    You can see that zeroing out the margin makes that gap go away. I think for that to work better you should have a look at how collapsing margins work. That way you'll be able to keep that top/bottom margin.


    #mainContent {overflow: auto;} makes the columns and #footer meet but your box model issues give you both X and Y scrollbars that I'm sure you'd rather not have.

    The border method of curing collapsing margins might work better for you. Try adding #mainContent {border-top: 1px solid #000;} to your CSS.
    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
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    Yes! That did it!

    It makes sense .. now that you've pointed it out, seeing how only currently-recognized elements have pre-styled margins & paddings .. not the new HTML5 elements I've been trying to tweak.

    And there's the 8-pixels (half of 16) identified by Andrew.

    Glad I returned to this entry. I'd almost abandoned hope of finding a solution.

    Again, my sincere thanks. I admire your skills.

    I see what you are saying about the top-border. I coded a 6-px top border to #mainContent and it re-introduces the gap at the bottom of the sidebars.

    Yes, I am familar with how collapsing margins work.

    The gap doesnt seem as bad when I at least know WHY it's there.

    Tho it seems strange .. cuz before I had both the top margin AND no gap at the bottom.

    What if I added padding instead of border? Would that also produce the gap. (I'll try.)
    Last edited by PonchoX; 05-14-2011 at 11:18 PM.


  •  

    Posting Permissions

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