Forums

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

Home Forums CSS Clipping on bottom of long content div

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #40443
    cdubks88
    Member

    I’m pretty new to CSS, but I’ve done a little in the past with divs and haven’t come across this issue (though it sounds well-documented).

    I’m sure it’s probably something simple, but I can’t seem to figure it out.

    I’ve got a content wrapper div called main setup like this:

    #main {
    z-index: 1;
    position: relative;
    top: 75px;
    width: 80%;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    background-image: url(‘pixel.png’);
    background-repeat: repeat;
    box-shadow: 3px 4px 3px #FFF;
    }

    There are three additional child divs placed to the upper left and left side of main (they align partially outside the parent div’s left).

    I then have a child content div called boxcontent setup like this:

    #boxcontent {
    margin-top: -10%;
    position: relative;
    padding-left: 150px;
    padding-right: 150px;
    }

    It works fine with shorter content in the box (displays the normal bottom I expect to see with the shadow), but longer content gets clipped and doesn’t show all the content or shadow at the bottom.

    What would cause it to clip the bottom?

    Thanks in advance,

    C.

    #112581

    Without seeing a reduced test case it is quite difficult to tell what is causing the issue.

    #112583
    AmruthPillai
    Member

    Is this what happens in your case, cause I really don’t see any problem: http://codepen.io/anon/pen/bGDnh

    #112623
    cdubks88
    Member

    I really appreciate the replies.

    Here’s a sample of what I’m talking about.

    http://codepen.io/anon/pen/zknEt

    Thank you in advance,

    C.

    #112625
    Paulie_D
    Member

    To start with, I think the structure of the site is a little odd (at least to me) and I suspect that you have moved things about with margins and positioning etc to compensate.

    You have a #wapper div that doesn’t wrap anything.

    Your #main div only holds two divs which serve hold a logo.

    Your #sidenav sidebar should come before (ideally) the content div in the HMTL.

    Frankly, I a re-think of the HMTL structure would be better than trying to work out why you are getting ‘clipping’ and this may solve your problem anyway.

    I may fork off your codepen and see what can be done but it might take some time. :)

    #112626
    cdubks88
    Member

    > To start with, I think the structure of the site is a little odd (at least to me) and I suspect that you have moved things about with margins and positioning etc to compensate.

    I moved the divs for the logos and sidenav for placement, yes.

    > Your #main div only holds two divs which serve hold a logo.

    I’m a little confused about your comment here….am I missing something there? My understanding was if you nest a div, it is a child to the parent div it’s nested under. Is that not correct? If so, main actually contains four child divs (logo (2), sidenav and boxcontent), unless I omitted something accidentally.

    > Your #sidenav sidebar should come before (ideally) the content div in the HMTL.

    It does.

    > Frankly, I a re-think of the HMTL structure would be better than trying to work out why you are getting ‘clipping’ and this may solve your problem anyway.

    If you’re talking about visually changing how it looks or where you think the elements should go, I don’t want to do that. Takes all the freedom out of being able to place objects where you want them (as much as possible).

    I’d rather know how I can fix the clipping issue.

    > I may fork off your codepen and see what can be done but it might take some time. :)

    I appreciate your help. Thanks for taking the time. :-)

    #112627
    Paulie_D
    Member

    My point was that you have some divs that you don’t need at all (holding the logo for instance) and, from a cursory glance child divs that don’t need to be children…but perhaps I missed something.

    As for the positioning, not to be rude but are you aware of floats and how they work?

    #112630
    cdubks88
    Member

    Paulie_D,

    Thanks for the reply.

    As far as the logo, how would you suggest placing it free floating like it is there if it were one image with the border(s)?

    I don’t take it as rude. I haven’t messed with floats, so I know very little of their usage. Only what I’ve read. That being said, can you position something floated in that way (if it is a child to the main)?

    #112631
    Paulie_D
    Member

    I’ve had a few minutes: http://codepen.io/Paulie-D/pen/stivF

    I see that you have wrapped the logo in divs to achieve multiple borders. I’ve managed that using a couple of cheats but it would just be simpler to make a whole new image on white with the borders and avoid all that bg color/border/outline/box-shadow css.

    Also, it really should be an h1 with your logo as a bg so I did that too.

    It’s just a quick (ish) and dirty knockup and it could be tweaked here and there.

    The main bg image is a little harder as it has an opacity placed on it. You CAN fake that too but in all honesty I would just make a new png image.

    #112632
    Paulie_D
    Member

    As you can see, I have one ‘parent’ with two child elements (the aside/sidebar) and the main content div.

    The logo and menus are inside the sidebar which is floated. Because it is floated the content would normally ‘flow’ around it but just by adding a left margin to the content div equal (roughly) to the width of the sidebar it all works.

    Hope all that helps….it may not be what you want precisely but, as I said, it can be tweaked and from a structure/semantic markup viewpoint it’s a little cleaner I feel.

    #112646
    cdubks88
    Member

    Paulie_D,

    I really appreciate the feedback.

    I’m going to look over your code and start working from ground up to make sure I’m not setting myself up with a mistake from the start.

    Thanks again!

    C.

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