- This topic is empty.
January 12, 2015 at 8:00 pm #193028
Thanks.January 12, 2015 at 11:22 pm #193038kwertyParticipant
a demo code would be nice.January 13, 2015 at 9:56 am #193079
Okay here is the sample code. I like the left panel stretched to the full length between the header and footer. This basic layout is quite common and I use it in many occasions. But the problem (I saw it in many web sites) is that either the the left panel does not go all the way to the footer (as shown in this example), or the footer is not at the bottom of the window (a non-sticky footer), or the height of the panel is set to be long enough to push the footer off the bottom of the window.
Also notice that I’ve put a red border around page-body which includes the panel and content divs, but you’ll see, the red box does not show up as expected. Why is so?
[NOD EDIT – Codedunp removed]January 13, 2015 at 10:32 am #193084shaneismeParticipant
Unfortunately code dumps don’t really work out too great, a live demo is the best way to get help. Could you set up a live example on CodePen or something similar?January 13, 2015 at 11:26 am #193102January 13, 2015 at 11:28 am #193104shaneismeParticipant
Well you can use Flexbox:
Or roll it old school:January 13, 2015 at 8:46 pm #193159Krish1980Participant
Is this what you’re looking for?
…… as far as I can see, it ticks all your requirementsJanuary 14, 2015 at 8:58 am #193225
Thanks. That certainly looks good.
Based on tricks from other posts, I managed to get a nice basic layout which is relatively easy for people to adopt for their pages if they want the similar layout.
I just can’t help it to get back to the width/height and margin issues. Now you have worked out a layout nicely, right? But what happens when you begin to style the contents with margins, border and/or padding? More often than not the layout will be ruined! For example, adding a 1px border to the page-wrap div will cause the vertical scrollbar to appear (at least in my case, with both chrome and safari), even the box-sizing is set to border-box.
- The forum ‘CSS’ is closed to new topics and replies.