The Definitive Guide to Using Negative Margins | CSS Advertisement Since the recommendation of CSS2 back in 1998, the use of tables has slowly faded into the background and into the history books. Because of this, CSS layouts have since then been synonymous with coding elegance. Out of all the CSS concepts designers have ever used, an award probably needs to be given to the use of Negative Margins as being the most least talked about method of positioning. It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it. 1. We all use margins in our CSS, but when it comes to negative margins, our relationship somehow manages to take a turn for the worse. A negative margin looks like this: Negative margins are usually applied in small doses but as you’ll see later on, it’s capable of so much more. They are extremely valid CSSI’m not kidding on this one. 2. Negative margins are very powerful when used correctly. Negative Margins on Static Elements A static element is an element with no float applied. 3. Smashing 3D text effects
Switchy McLayout: An Adaptive Layout Technique CSS-based liquid layout has proven successful during the reign of 800-pixel to 1024-pixel screens, but as we use a wider range of devices to access the web, we need more powerful and flexible ways of managing layout. If we want to serve devices whose viewports range from 240 pixels to about 1680 pixels—and with resolution ranging from 72 to 150 pixels per inch—we need a new method. What’s the problem with liquid layouts?#section1 If you create a liquid layout optimized for a maximum width of 1024 pixels—limiting maximum line-lengths for your text to maintain readability— gaps will appear on a wider screens, and your carefully balanced layout will break. So why don’t we just define layout and appearance for a series of screen-width ranges, then find a way to match these layouts with the user’s viewport size? Switchy McLayout to the rescue#section2 Switchy McLayout lets you define the dimensions, information richness, and appearance of your content objects for set ranges of screen sizes.