www.webdeveloper.com
Results 1 to 5 of 5

Thread: Layout - extra space below content

  1. #1
    Join Date
    Nov 2013
    Posts
    3

    Layout - extra space below content

    I have the following two problems with my website: ttp://www.pkwebservices.com/clients/Lilia...neda/index.html

    1. Every page is longer than needed, adding extra empty space below the content.
    I gave the content and column a width but not a height, so should it not automatically adjust to the length of the content?!

    2. On the subpage "My Research", the right column (in darker grey) does not continue all the way down to the footer.
    I used the following code to adjust the two columns: #footer {clear: both;} but it does not seem to work on this page (it does work on all other pages).
    I put the code "top:-700px;" on #bookText as I also had a gap between the book and the text underneath it.

    Any pointer in the right direction would be greatly appreciated!
    Thank you!

  2. #2
    Join Date
    Nov 2013
    Posts
    3

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    On the first point...

    There is an <h5> tag in your right column with a lot of margining and padding applied to it, pushing the footer down.

    index.html
    Code:
    <body>
    	<div id="container">
    		<div id="rightColumn">
    			<h5></h5>
    final.css
    Code:
    ...
    
    #rightColumn h5 {
        margin-bottom: 250px;
        padding-bottom: 250px;
    }
    
    ...
    I haven't investigated the second yet.
    Last edited by bionoid; 11-12-2013 at 01:03 AM.
    JavaScript: Learn | Validate | Compact

  4. #4
    Join Date
    Aug 2012
    Posts
    155
    As bionoid has said, you have an empty H5 tag at the bottom of your content in the sidebar with a large amount of bottom padding and margin which is why the page is so long.

    With regard to your right column stretching to match the main content height, you either need to wrap both in another div and apply a clearfix (google it - I personally don't see the point of it) or overflow: hidden to that div. Or create a basic clear class and add an empty div with that class after your content div

    Code:
    .clear {
    clear: both;
    }
    HTML Code:
    </div>
    <!-- end content **************************************** -->
    <div class="clear"></div>

  5. #5
    Join Date
    Nov 2013
    Posts
    3

    Thank you! I am still working on the right column

    Thank you to you both - simplypixie and bionoid! Eliminating the H5 tag immediately solved the problem and kept my sanity :-) Thank you!

    I am still trying to figure out extending the right column. The overflow:hidden position unfortunately extends the column all the way down covering the footer and applying the basic clear class after the content did not work. I found the below clearfix code and wrapped the content and right column in a div to apply it but still no success.
    Any idea what I did wrong? Here is the updated website: http://www.pkwebservices.com/clients...eda/index.html

    I also still have the extra space between the book and the text on "My Research" page. I can move the text up if I use the #bookText with a top:-700px; but then the extra space gets added underneath the text�
    Maybe it has something to do with the speech bubbles?!

    Thank you for looking at my code! I greatly appreciate it!

    Clearfix code

    .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

    .clearfix {
    display: inline-block;
    }

    html[xmlns] .clearfix {
    display: block;
    }

    * html .clearfix {
    height: 1%;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles