Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Container Whitespace Issue

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #44589
    MBM
    Participant

    I have a lot of whitespace in my container despite height being set to 100% which I thought would make the container fit the content?

    ![Too Much Whitespace](http://mbmitservices.co.uk/pcommerce/product.png)

    Live here :

    http://mbmitservices.co.uk/pcommerce/product.html

    CSS :

    /*container styling*/
    div.container {
    background: #ffffff;
    margin:0 auto 0;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    width:1396px;
    height:100%;
    position:relative;
    margin-top:60px;
    }

    .offset-blur
    {-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    -moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}

    #134265
    Paulie_D
    Member

    Not sure what you are asking for.

    `height:100%` doesn’t relate to the content it relates to the height of the parent element (in this case the body, I think).

    A div will only have the height of their content.

    How were you expecting it to look?

    #134266
    CrocoDillon
    Participant

    It’s the 940px height on your `#navigation` that’s causing the whitespace. By the way 100% doesn’t make the container fit the content, but fit to the available height of the parent, in this case the body with no height set so it doesn’t do much.

    EDIT: Paulie_D beat me to part of my comment ;p

    #134270
    MBM
    Participant

    @Paulie_D I want it to look like this :

    ![Too Much Whitespace](http://mbmitservices.co.uk/pcommerce/product3.png)


    @CrocoDillon
    with height in #navigation set to auto;

    ![Too Much Whitespace](http://mbmitservices.co.uk/pcommerce/product2.png)

    #134272
    Justin_G
    Member

    To add to MBM’s post,

    You have a margin-top of 1040 on image class ‘imghtml5’. Changing this value to 585 will move the bottom image on top of the black footer bar, and remove all the whitespace under it.

    Good luck :)

    #134273
    CrocoDillon
    Participant

    Quick and dirty solution is to set your navigation to a height that gives you the desired result, in addition to changing the margin-top of what Justin said.

    #134274
    MBM
    Participant

    @Justin_G That did the trick! Thanks.


    @CrocoDillon
    That’s what I did!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.