I’ve been running Talk with the Experts live chat sessions across various different platforms for over a year now, but today we decided to try something a little bit different. We invited you to ask veteran CSS designer and developer, Alex Walker, every style question you’ve ever had. Alex was on hand in our shiny new custom chatroom to help you out with sticky questions and messy code. The session was a busy one but Alex handled it with poise and we managed to cover a huge amount in the hour long session.
If you missed it, below is a list of the resources (and some pretty amazing CSS examples) that came out of the session, followed by a full transcript of how it all went down.
An awesome example of CSS animation by @newberg
A clever CSS3 experiment by Keith Clark
What are LESS and Sass?
Here is an article that compares the two.
Launch into LESS A new course on Learnable
For more on Sass, make sure you join our upcoming session with Alex on 19 June
Scout is a great cross-platform SASS app (if you want to avoid learning Rails)
Or you could try CodeKit if you’re on a Mac and don’t mind paying a small fee
An HTML5 readiness chart for browsers
CSS3 Compatibility Tables
An article about resets and a good reference for media queries
And lastly, in relation to these sessions, you can check the upcoming schedule here or sign up for email reminders of future sessions here.
And for those of you that would like to read the full transcript of todays session, here it is:
[21:19] <HAWK> Welcome Alex
[21:19] <alexmwalker> Thanks Hawk. Hi Everyone.
[21:20] <alexmwalker> Caffeinated and ready to rock
[21:23] <alexmwalker> Did everyone see that Macbook air CSS animation by @neoberg?
[21:23] <alexmwalker> http://cssdeck.com/labs/css-only-macbook-air
[21:23] <alexmwalker> very cool work
[21:23] <HAWK> Wow! That’s pretty awesome alexmwalker
[21:24] <alexmwalker> one png for the screen. one SVG for the apple logo. The rest is pure css.
[21:25] <Toffy> How do I center multiple divs horizontally in responsive design
[21:26] <HAWK> So alexmwalker, are you ready to kick off? Looks like Toffy has thrown in a question.
[21:26] <Toffy> sorry i sent question so fast without greeting
[21:26] <HAWK> No worries Toffy :)
[21:27] <alexmwalker> I am. Hi Toffy. So you’re talking about, say multiple horizontal columns?
[21:28] <Toffy> well more like in a container div, if i have several divs that needs to be centered and spaced evenly in between in a responsive design, I find it hard to make it happen
[21:29] <Toffy> i don’t have an example link but let say in page like this one, i want to put 3 divs in the center and they need to stay in center even if i reduce the screen size
[21:30] <Jerry> Toffy: The divs are stacked vertically and each needs to be centered horizontally?
[21:30] <Toffy> they are not stacked
[21:30] <Toffy> next to each other
[21:30] <Toffy> if i float them then it’s hard to center
[21:30] <alexmwalker> Yep, so you’re setting them auto margins on the left and right?
[21:30] <Toffy> but i have to float them to be next to each other
[21:30] <mamoru> Wouldnt just creating it with the ‘position absolute’ work? left: 50% div inside -50%? I didnt quite catch the question but that is mostly what I do
[21:31] <Jerry> Are the divs a fixed width?
[21:31] <Toffy> yeah, i usually float the left one left and the right one right and then center with margin auto
[21:31] <Toffy> but wanted to know if there was another way
[21:31] <johnlacey> Q: What are SASS and LESS? And should we be using them?
[21:31] <Toffy> divs are not fixed
[21:31] <Toffy> that’s why its hard
[21:31] <alexmwalker> Ah, ok so they’re 3 across the screen? Gotcha
[21:31] <Toffy> yes
[21:32] <Murali> Hi Alex, I have a container div with two child(header and body). The container have scroll bars. I want the header div should be fixed at the top and only body div should scroll.
[21:32] <ralphm> If you wrap them in a container, you could set them to display: inline-block and the container to text-align: center;
[21:32] <Toffy> does inline-block work in ie7?
[21:32] <Murali> sample at http://cssdeck.com/labs/gomiazlb
[21:32] <Murali> is it possible?
[21:33] <Jerry> Toffy: What determines the width of the divs?
[21:33] <alexmwalker> So I think I;d be trying to shape the container and make them fill the container evenly (like 33% each)
[21:33] <HAWK> johnlacey and Murali – I have queued your questions for Alex
[21:33] <johnlacey> Thanks Hawk.
[21:33] <Toffy> i think you have put zoom:1 or something in ie 7 for inline-block to work but I’m not sure, haven’t tried yet
[21:34] <jcollado> HAWK: What is the question being answered now?
[21:34] <ralphm> @Toffy Not for block elements (If I remember). But IE7 has less than 1% user base. Anyhow, if you need to support that browser, just center the container with a width and auto margins and float the divs within it.
[21:34] <alexmwalker> Hi @johnlacey. Good question.
[21:35] <HAWK> jcollado We’re just jumping into johnlacey’s question: Q: What are SASS and LESS? And should we be using them?
[21:35] <jcollado> HAWK: Ok, thanks
[21:36] <Paul> Toffy You can make inline-block work in IE7 and under by setting the element to display:inline and then adding haslayout. See the comments in the Sitepoint reference
[21:36] <HAWK> Hi to those of you that have just joined – we’re about to talk SASS and LESS. If you have questions for Alex, throw them in at any time and I’ll queue them
[21:36] <HAWK> FYI you can also @ tag people to get their attention
[21:36] <alexmwalker> They’re both a great improvement to writing CSS. If you’re comfortable with writing CSS, yes you should definitely be looking at adding one of these pre-processors to your workflow.
[21:36] <alexmwalker> They basically let do things with CSS that aren’t possible with help.
[21:37] <HAWK> johnlacey – I don’t know if you noticed that we just launched a LESS course at Learnable
[21:37] <johnlacey> Thanks @Hawk
[21:37] <RobertRM> Definitely a fan of LESS
[21:37] <RobertRM> although SASS seems more powerful?
[21:37] <alexmwalker> I’m a sass guy mainly because we’re using a lot of rails here and it comes with the turf. It also probably has more momentum from a development point of view.
[21:38] <Jerry> I’m not familiar with SASS. Can you provide a brief comparison of the two?
[21:38] <Jason> Alex, what’s the difference between a CSS selector with the tag in front of the class or after the class? Example: what’s the difference between h3.myclass {} and .myclass h3 {} ?
[21:38] <HAWK> Hi to those of you that have just joined. Feel free to throw in questions to be queued at any time. :)
[21:39] <alexmwalker> I must say though Less has a nicer, neater syntax. If you’re starting from zero, I don’t think it matters which one you pick.
[21:40] <alexmwalker> RobertRM yes, I think SASS and some of the libraries that help SASS are more advanced than Less
[21:41] <Jerry95> @Jason I know you posted the question to Alex, but I’m pretty sure that’s very simple. The tag in front of the class would mean all h3 that have that class aplied, while the class followed by the tag would mean all childs of that class with the tag specified.
[21:41] <Jerry95> ¿What exactly is Sass and Less?
[21:42] <alexmwalker> Jason, Yes, Jerry pretty much covered that one.
[21:42] <felgall> see http://lesscss.org/ and http://sass-lang.com/
[21:42] <mamoru> Jerry95 think of variables in CSS, to put it really short
[21:42] <alexmwalker> Ok so there’s a lot of interest in Sass and Less.
[21:43] <alexmwalker> I’ll talk about those a little.
[21:43] <Jerry95> So its like PHP (Pre – Hypertext Processor) only with CSS?
[21:43] <Jerry> Thanks felgall
[21:43] <HAWK> Thanks felgall :)
[21:43] <mamoru> @HAWK: Will the transcript be posted for this anywhere after? I really should go to bed now as it is midnight here :-)
[21:43] <alexmwalker> CSS is a cool language but it’s limited in many ways and the W3C takes a long time to improve things.
[21:44] <mamoru> Jerry95 sort of
[21:44] <Jay> Just curious: Are many of you using boilerplates or frameworks? I’ve been looking a several, but don’t know which I should investigate further
[21:44] <HAWK> Yup mamoru – I’ll post it up on SitePoint later today. Thanks for joining us. :)
[21:44] <kcs> I am relatively new to webdesign and CSS would you recommend that I concentrate on the basics of CSS basics before jumping into Sass or Less?
[21:44] <alexmwalker> Sass and LESS are languages that look a lot like CSS, but have powerful new features.
[21:44] <mamoru> Thanks HAWK, keep up the good work :-) If I am free the next day, I’ll sit through an entire chat :-)
[21:45] <mamoru> @jay Twitter Bootstrap and littlesparkcvt’s flatstrap
[21:45] <alexmwalker> When you write your Sass (or less) it gets converted into standard CSS at the end.
[21:45] <ralphm> @kcs I’d definitely say earn how CSS works before confusing the issue with LESS or SASS.
[21:45] <alexmwalker> So browsers can still read it, but you get new ways to do things
[21:47] <johnlacey> So where does the conversion take place, and do you need anything (perhaps at the server level) to achieve this?
[21:47] <Jerry95> Would it be possible to use SASS or LESS with XSLT, say for example if there’s a tag that’s child of another, then apply some CSS rule, if not, apply another rule?
[21:48] <HAWK> Murali – we’ll answer your question at the end when things have quietened down a bit. If you can’t hang around, message me an email address :)
[21:48] <kkl> I’m a designer who got very comfortable with HTML/CSS (not at your level), looking to move into JS next. Should I learn JS first then jQuery? Or vice versa? Any resources/book highly recommended?
[21:48] <kcs> Thanks. ralphm.
[21:48] <ScallioXTX> Jerry95 you can do that out of the box with css without any less or sass. just do .class1 .class2, that will target all elements with class class2 that are child nodes of class1. depth doesn’t matter.
[21:48] <Murali> NP. I will wait.
[21:49] <Jay> @johnlace: I dont have a lot of experience with either, but from what I’ve seen, they are ‘compiled’ into valid css prior to uploading to your server. So in the end, you’re left with pure css
[21:49] <alexmwalker> johnlacey Sass comes built in when you install Ruby on Rails. But there are quite a few desktop based apps that watch your folders and convert your Sass into CSSS every time you save it.
[21:49] <HAWK> Welcome to those people that have just joined. Feel free to jump in with questions at any time. We’re currently talking SASS and LESS, but other questions will be queued.
[21:49] <Jerry95> Tnanks ScallioXTX. Can someone provide another example of what SASS of LESS can do
[21:50] <bsteffl> @mamoru i’ve heard that twitter bootstrap doesn’t necessarily use html elements the correct way, has that been your experience?
[21:50] <alexmwalker> I’d recommend checking out Scout — it’s free and runs on almost all systems. Codekit is very good, but I think it’s about $50
[21:50] <alexmwalker> http://mhs.github.io/scout-app/
[21:51] <kkl> CodeKit is worth it.
[21:51] <alexmwalker> kkl agreed
[21:51] <ScallioXTX> bsteffl whatever you build in HTML there is always someone who thinks it’s not right. Pick the battles that are worth fighting.
[21:51] <RobertRM> Jerry95 LESS allows you to write CSS more quickly, and in a more maintainable way
[21:52] <ralphm> @kkl jQuery makes it easier to get started using JS, but ideally, learn how JS works at least later, if not first.
[21:52] <HAWK> There are plenty of JavaScript and JQuery resources on Learnable :)
[21:52] <ScallioXTX> I personally find that LESS is too far abstracted from CSS and the end result is way more bloated than it would be if I’d written it myself. Though I do agree writing in LESS is easier than pure CSS.
[21:53] <bsteffl> great scallioxtx thanks
[21:53] <MikeT> Anyone know anything about WordPress Live Preview?
[21:53] <Jerry95> Can LESS check out for duplicate classes or id’s in a large stylesheet?
[21:53] <alexmwalker> Jerry95 — if you find yourself writing the same browser prefixes (-webkit- , -moz) — sass lets you write that as a ‘mixin’ and then call it with a single line each time you want it
[21:54] <kkl> Although this is a LESS vs SASS article, it shows you what those pre-processors can do.
[21:54] <kkl> http://css-tricks.com/sass-vs-less/
[21:55] <alexmwalker> You get benenfits as soon as you start using 5% of the language — over time that just keeps getting better
[21:55] <HAWK> Does anyone else have a question that they’d like to throw in to the mix?
[21:55] <johnlacey> Wow SASS looks very powerful. Thanks for the link @kkl
[21:55] <HAWK> Or examples of awesome CSS that they’ve seen…
[21:56] <kkl> did you gusy see this?
[21:56] <kkl> http://www.keithclark.co.uk/labs/css3-fps/
[21:56] <kkl> it’s amazing.
[21:56] <alexmwalker> kkl, jquery will solve a lot of your issues immediately. You’ll be making stuff and that’s cool and very motivating.
[21:57] <kkl> alexmwalker so you’re recommeding I hack around with jQuery first?
[21:57] <Nancy> How are you folks keeping up with CSS3 features as they become available? Do you find yourself checking new features when you need to do something, or like me – doing internet searches and working on them for awhile only to find there are new and easier improvements using html5/css3?
[21:57] <kkl> then get to know the underlying JS?
[21:57] <NIteFlite> Talking about HTML5 and CSS3, what are the current browsers that can handle them?
[21:57] <alexmwalker> Ultimately if you want to be the perfect frontend guy, you’d love to be a JS guru and that would mean starting with JS.
[21:58] <alexmwalker> I’m happy being a jquery guy and I find help when I need pure JS power :)
[21:58] <NIteFlite> And since you’ve mentioned JavaScript and JQuery what would cause either or both of those to simply stop functioning properly on a Website…not a local machine, but the production server?
[21:59] <johnlacey> Could anyone recommend any tools for working with simple CSS3 animation?
[21:59] <Jerry95> Thanks to all, I’m a bit confused but what else can you do with LESS and SASS besides mixins and looping. Is there any way you can plan the cascade in advance once you have the html?
[21:59] <Nancy> html5 css3 readiness chart for browsers http://html5readiness.com/
[22:00] <felgall> jQuery is JavaScript so in order to use jQuery properly you need to know a minimum of JavaScript. It runs on the local computer not the server so it isn’t going to stop functioning on the server – but it might not function in the browser if it contains an error or uses a command that particular browser doesn’t understand
[22:00] <ralphm> @NIteFlite All the current browsers except IE* support HTML5 and CSS3 in some measure, adding bits all the time. You can check each feature’s support at http://caniuse.com/
[22:00] <alexmwalker> NIteFlite With jquery , perhaps your jquery libray but corrupted. But nothing on the server could stop javascript from functioning — because JS runs in your browser.
[22:01] <johnlacey> IE is always a problem. lol
[22:02] <Jerry95> @NiteFlite, I’m not a frontend expert, but I can only think of Jquery not functioning properly for two reasons: either the version made available by the server is too old, which is solved by CDN’s, or the library is colliding with another JS library, which is why you should use the noConflict method.
[22:02] <ralphm> (I meant to type “except IE8” above)
[22:03] <kkl> End user can disable scripts from running though.
[22:04] <Jerry95> @Yes, that also, and being that the case, does anyone know the latest or most modern way of checking for Javascript enabled?
[22:04] <ralphm> @kkl Ideally, make sure that the page works acceptably with JS off. Then if the user has it turned off, no problem.
[22:05] <alexmwalker> Nancy – I tend to find out about new features when ppl use them in demos/examples etc — most of the time that’s waaaay ahead of when I can use them in production. But maybe 18 months later they’ll be a challenge that will crop up and I’ll go scouring google for where I saw that guy using that weird CSS property.
[22:06] <kkl> For cross-browser issues try Modernizr…it’s amazing…
[22:06] <kkl> esp., if you’re writing HTML5/CSS3
[22:06] <HAWK> Welcome to anyone that has just joined. Please feel free to jump in with questions at any time – I’ll queue them and they don’t need to be in context :)
[22:06] <Nancy> Thanks alexmwalker
[22:06] <kkl> just 1 javascript line fixed all my issues.
[22:06] <HAWK> I’ll also be publishing a full transcript on SitePoint later today
[22:07] <Jerry95> @kkl Thanks I’ll check modernizr
[22:07] <ralphm> @kkl Modernizr doesn’t add functionality where is doesn’t exist, though. You still have to decide what will happen if features are not supported.
[22:08] <Jerry95> So talking again about SASS and LESS, can you program in advance what rules to use if there’s not support for some rule in a specific browser?
[22:08] <alexmwalker> johnlacey — I find the best way to learn CSS animation is to keep an eye on CSSdeck.com and codepen.io and see how ppl are using it there. You can copy the code to your own window and pull it apart and see how it works.
[22:09] <alexmwalker> Those code playgrounds also handle the cross-browser prefix stuff for you, which helps SOOOO much when you’re learning
[22:09] <NIteFlite> But my problems are not just local…Everyone is seeing the same issues I am…Functionality that was fine is suddenly not working, so it’s not something local. And it’s intermittent and inconsistent, too. Ugh.
[22:11] <yyy> @NiteFlite have you tried to turn it off an on again
[22:11] <lori> I am trying a media query. Have you discussed them? I came in just now.. @media (max-width: 320px) thought I could make a div display if the window was 320 or smaller, i.e. iphone5.
[22:11] <alexmwalker> NIteFlite. If you hang around after I’m happy to have a poke aaround the site and see if I can spot anything
[22:11] <HAWK> No, we haven’t lori – I’ll queue your question :)
[22:12] <lori> make the div not display I mean.
[22:13] <kkl> can we talk about career opportunities? Do people hire for just HTML/CSS skills? If so where? Or is jQuery/JS necessary?
[22:13] <Jerry95> So maybe someone can answer what can you do with :after and :before properties?
[22:13] <NIteFlite> Yes, tried to turn it on and off. Have gotten rid of any extraneous custom JS. Am working on find any errors that can be fixed. Some things have been fixed. Others remain a mystery.
[22:15] <alexmwalker> Jerry95 — targeting browsers if more often soemthing I use modernizer for. It requires you install a javascript in your page, but lets you write CSS rules like ‘.ie10 h1 {some css)
[22:15] <NIteFlite> alexmwalker – I’m going to have to go, this time. But if there’s a way I can contact you, at your convenience, I will not take up more time here….:)
[22:15] <alexmwalker> other browsers wont get that class so they will ignore that rule
[22:16] <ralphm> @Jerry95 You can do amazing things with :before and :after. You basically have two hooks on an element that you can use for doing things—setting styles, adding content—without using extra elements. (Not all elements support them, though.)
[22:16] <johnlacey> alexmwalker : Would you recommend using CSS resets?
[22:17] <Paul> Jerry95 You can do lots of things with :before and :after. You can add extra text or images to elements but they shouldn’t be used to add “real content” as that should be in the html.
[22:17] <Jerry95> alexmwalker Thanks, but I meant how can I keep up to date with the properties I need to check in the JS to test for a specific browser compatibility. I find that keeping record of most of them is very hard
[22:17] <jessirwin> Do you often need to target a browser other than IE? I.e. why use modernizr to target browsers when you can use conditional comments to put ie class names one (like the html5boilerplate does)?
[22:17] <lori> is before :after css3?
[22:17] <Jerry> How is the browser support for before and after? When a looked (some time ago) it was pretty spotty, so I passed on them
[22:18] <Jerry95> Yes I think html5boilerplate is an option, but isn’t it only for html5?
[22:18] <ralphm> @lori No, :before and :after are part of CSS2. They’ve been around for a long time.
[22:18] <alexmwalker> @lori I’m pretty sure :before and :after are supported right back to IE7.
[22:18] <jessirwin> True the boilerplate is html5, but surely the same conditional comments could be used for xhtml
[22:18] <jessirwin> IE7 doesn’t support :before and :after
[22:19] <jessirwin> Unless I’m doing something wrong…
[22:19] <lori> is there a tutorial about them you know of? I just saw a great one on the !not selector
[22:19] <Paul> :after and :before is ie8+
[22:19] <Jerry95> @jessirwin Thanks, I’m pretty behind in what html5 does
[22:19] <alexmwalker> jessirwin – pretty sure if does, but it’s a bit buggy
[22:20] <Paul> lori :after and before are css2
[22:20] <TaoistTotty> The Styling Forms with CSS course on Learnable covers :before and :after
[22:21] <lori> thanks
[22:21] <Paul> No there’s no support in iE7 https://reference.sitepoint.com/css/pseudoelement-before
[22:22] <alexmwalker> @paul thanks , must be thinking of something else
[22:22] <HAWK> So we’ve got just over 5 mins left in the session – are there any questions that people have asked that haven’t been answered yet?
[22:22] <Paul> alexmwalker – no worries I can never keep track either
[22:23] <johnlacey> @alexmwalker : Would you recommend using CSS resets?
[22:23] <lori> i had one about the media query @media (max-width: 320px) not working for iphone5 for me
[22:23] <NIteFlite> alexmwalker – Gotta go. Can I get some kind of contact to email you later?
[22:23] <HAWK> NIteFlite you can get Alex on Twitter @alexmwalker
[22:24] <NIteFlite> OK, thanks. WCW
[22:24] <alexmwalker> johnlacey on resets, I do recommend them, but I like a cut down version. The HTML boilerplate version if super long and it’s hard work to get your head around all that code
[22:24] <Paul> alexmwalker – have you found a way to animate to auto dimensions yet? It seems to be the exact thing that is needed but is not supported.
[22:24] <HAWK> Ah yes – thanks lori
[22:25] <lori> I wanted to have display: none for a div not to show up in small window
[22:25] <alexmwalker> johnlacey this article is a sensible approach to resets http://csswizardry.com/2011/10/reset-restarted/
[22:26] <johnlacey> Thanks @alexmwalker
[22:26] <Murali> i asked a question about overlapping absolute positioned child
[22:26] <HAWK> Ok, I think we’ll look at lori’s question and then yours Murali – and then we’re done for today :)
[22:27] <jessirwin> lori for iphones or smartphones that are 320px try (min-device-width: 320px)
[22:27] <lori> OK Ill try that. Thanks
[22:27] <jessirwin> @lori – a good reference that I always check for media queries is http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
[22:27] <Jerry95> Ok thanks to y’all. HAWK can you tell where will be a link to the transcript. Cause there’s a lot of resources to check out
[22:27] <ralphm> @lori @media only screen and (max-width : 480px) { } and also, for good measure, include this in the head of your pages: <meta name=”viewport” content=”width=device-width”>
[22:27] <alexmwalker> @lori there’s no reason why that shouldn’t work. you would set ‘max-width: 320px {display:none) ‘
[22:28] <HAWK> It’ll be up on sitepoint.com Jerry95
[22:28] <alexmwalker> nice one ralphm :) exactly
[22:28] <HAWK> Thanks to everyone that joined us today. We run these sessions weekly (on different subjects)
[22:28] <Paul> lori – make sure the media query follows the original rules so you don’t cancel it out. The cascade stil applies to media queries
[22:29] <lori> well the max width doesnt work so I guess I’ll try the min-device-width and see if that works?
[22:29] <ralphm> @lori I meant to say that the max-width: 480px (or actually 560px for iPhone5) will cover both views on the iPhone.
[22:29] <alexmwalker> @lor could you pop your code in a a CSSdeck or codepen?
[22:29] <lori> I only need it not to show in portrait because the element is bigger than it.
[22:29] <alexmwalker> Murali — looking at your code now :)
[22:30] <Jerry> Thanks Alex, Hawk, and all other responders. Good session!
[22:30] <ralphm> @lori OK then, just change what I posted to max-width: 320px. But you can also resize the element, rather than hiding it altogether.
[22:30] <BlackVlXENN> Thank you HAWK, Alex …
[22:30] <HAWK> That’s it for questions today. Thanks all. Feel free to stick around to see Alex work on Murali’s question – Hi Alex, I have a container div with two child(header and body). The container have scroll bars. I want the header div should be fixed at the top and only body div should scroll.
[22:30] <HAWK> Sample for above q http://cssdeck.com/labs/gomiazlb
[22:30] <alexmwalker> a pleasure, everyone. Thanks
[22:30] <lori> Thanks everyone…I’ll tweet if I get it on codepen
[22:34] <alexmwalker> So in your demo, the header is fixed? That works?
[22:34] <alexmwalker> And the body is under the under the header by the looks of thing?
[22:35] <Murali> but it overlaps the container, i just want it to fit inside the container
[22:35] <BlackVlXENN> the body’s width … it’s not the same width
[22:37] <Murali> I am expecting a behavior like if I make container position:relative, but header should not scroll
[22:37] <ralphm> If the container will always have that fixed width, why not give the header width: 400px?
[22:38] <alexmwalker> http://cssdeck.com/labs/hy1bp6si
[22:38] <alexmwalker> that’s what I have here
[22:38] <alexmwalker> what ralphm said
[22:38] <alexmwalker> (I made the container red so I could see it)
[22:39] <ralphm> Or, keep the width of the header at 100% but give the container position: relative;
[22:40] <ralphm> Edit: oops, that stops the header from staying still, so cancel that. :)
[22:41] <Paul> Murali – Do you want a fixed header while the div below it can scroll but the header stays fixed?
[22:42] <Murali> yes, but the scroll bar should be in container, not in body
[22:42] <Paul> Like this? http://www.pmob.co.uk/temp/fixed-header2.htm
[22:43] <Murali> @paul i need the scroll bar for container
[22:43] <BlackVlXENN> header with a fixed with, instead of a percentage?
[22:43] <Paul> If you reduce the viewport height the content gets a scrollbar
[22:44] <alexmwalker> So wouldn’t the header then obscure the top of the scrollbar?
[22:45] <alexmwalker> http://cssdeck.com/labs/0hivmtvo
[22:45] <alexmwalker> how about that?
[22:45] <BlackVlXENN> oh, I just reread what Murali is seeking …
[22:46] <alexmwalker> It’s a bit hacky and assumes you know the width, but ..
[22:47] <Murali> yes, this is what i expected, but this will not be perfect solution since scroll bar width not always 17px in all browsers/platforms
[22:47] <alexmwalker> true, that’s the hack part .. ;)
[22:48] <Capt_Snickle_Fritz> I love those types of layouts. I’ve done similar here but with the footer and sidebar as well. http://www.spruzstuff.spruz.com/ If you wanna dig in to the css and see how, feel free. Headed out to a concert
[22:48] <Murali> anyway better that broken, thanks Alex for your time
[22:48] <Murali> *better than broken
[22:49] <alexmwalker> Having a think.. Are you on twitter Murali? I might have a better answer once I sit on the problem for a while
[22:49] <Murali> Thanks Alex and HAWK for this wonderful session
[22:50] <Murali> @murali_rk
[22:50] <alexmwalker> Our pleasure Murali, thanks for coming :)
[22:50] <alexmwalker> Thanks. I’ll put my mind to it after another coffee
[22:52] <HAWK> Thanks all
[22:52] <HAWK> Transcript coming later :)
Sarah HawkFormerly a developer in the corporate world, HAWK (known as Sarah by her mother) said goodbye to the code and succumbed to the lure of social media to become the Community Manager for the SitePoint network. Now Hawk is working with Discourse to build their product and community.
