/    Sign up×
Community /Pin to ProfileBookmark

Layout – extra space below content

Copy linkTweet thisAlerts:
Nov 12.2013

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!

    to post a comment
    HTML

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @bionoidNov 12.2013 — 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.

    [b]index.html[/b]
    &lt;body&gt;
    &lt;div id="container"&gt;
    &lt;div id="rightColumn"&gt;
    [COLOR="#FF0000"]&lt;h5&gt;&lt;/h5&gt;[/COLOR]

    [b]final.css[/b]
    ...

    #rightColumn h5 {
    margin-bottom: 250px;
    padding-bottom: 250px;
    }

    ...

    I haven't investigated the second yet.
    Copy linkTweet thisAlerts:
    @simplypixieNov 12.2013 — 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;
    }[/CODE]

    [code=html]</div>
    <!-- end content **************************************** -->
    <div class="clear"></div>[/code]
    Copy linkTweet thisAlerts:
    @pkempfauthorNov 14.2013 — 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/LilianaCastaneda/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%;

    }
    • ×

    Success!

    Help @pkempf spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...