- This topic is empty.
October 24, 2012 at 11:27 pm #40443
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:
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:
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.October 24, 2012 at 11:42 pm #112581joshuanhibbertMember
Without seeing a reduced test case it is quite difficult to tell what is causing the issue.October 24, 2012 at 11:47 pm #112583AmruthPillaiMember
Is this what happens in your case, cause I really don’t see any problem: http://codepen.io/anon/pen/bGDnhOctober 25, 2012 at 11:44 am #112623
I really appreciate the replies.
Here’s a sample of what I’m talking about.
Thank you in advance,
C.October 25, 2012 at 12:10 pm #112625
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. :)October 25, 2012 at 1:03 pm #112626
> 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.
> 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. :-)October 25, 2012 at 1:35 pm #112627
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?October 25, 2012 at 2:46 pm #112630
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)?October 25, 2012 at 3:21 pm #112631
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.October 25, 2012 at 3:27 pm #112632
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.October 25, 2012 at 5:26 pm #112646
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.
- The forum ‘CSS’ is closed to new topics and replies.