CSS3 flexible width, fixed padding/margins

Mark Greenwood Team : Web Development Tags : Web Development CSS

Perhaps one of the most underestimated (and little known) abilities in CSS3 is the "calc()" function.

It's simple and yet can save so many headaches!

Ever wanted to set the width of something including the padding? With dynamic, responsive, fluid web pages, it is more and more of a problem. No more nested divs with padding and/or margins on the outers and inners, no more javascript onload!

With calc() it's now possible to achieve without nesting.

Whaaat?

An element that is 100% wide, but with a margin of 10px -> .classname { width:calc(100% - 10px); margin:0 10px; }

As simple as that, now if it was only that simple to get ALL the browsers to support it.

Get your act together Android and Opera (Mini).

keep up to date - With the latest web design, development & technology news

Follow wiliam

About wiliam blog

Wiliam is a leading Australian digital agency. We design and develop websites and a few things in-between. The Wiliam blog is the thoughts and opinions of our people.

Top picks from around the web #3

Sandra Stepien 21Mar2018

Ecommerce features to improve UX and redesigns to check out this week.
Sprint Zero: Kicking off a Scrum project the right way

Tom Nason 31Jul2018

The goal of this initial preparatory Sprint is to front-load any work necessary to allow the teams to commence Sprint 1 effectively and without impediments. This includes preparing the Project Roadmap, creating the basic skeleton and plumbing for the project and readying the team for feature development.
Creating a Nuget Package

Simon Miller 6Aug2018

As part of a Wiliam learning project, I needed to find a way to make a reusable component that could be used for the rest of our developers as a starting point on future projects.
Advanced JIRA tips and tricks

Matej Stolfa 8Aug2018

So you’ve grasped the Jira basics and know to steer clear of the 7 Deadly Sins of Using JIRA? It’s time to put your big boy pants, level up and start using JIRA like a PRO. Here are some tips and tricks you will save you a lot of time and impress your colleagues.
What drives a successful Website Services business

Wiliam 15Aug2018

Despite being generated in a time when heavy manufacturing was more predominate, the competitive framework developed by Michael Porter (Harvard Business Review, 1977) is valuable for Website Services businesses.
Driving quality through Non-Functional Requirements

Tom Nason 17Aug2018

It’s common for NFRs to take a back seat in requirement gathering sessions. Topics like scalability and security are rarely met with the same excitement or urgency as customer facing features, yet they are critical to a development project’s success.

Driving quality through Non-Functional Requirements

Tom Nason 17Aug2018

It’s common for NFRs to take a back seat in requirement gathering sessions. Topics like scalability and security are rarely met with the same excitement or urgency as customer facing features, yet they are critical to a development project’s success.
What drives a successful Website Services business

Wiliam 15Aug2018

Despite being generated in a time when heavy manufacturing was more predominate, the competitive framework developed by Michael Porter (Harvard Business Review, 1977) is valuable for Website Services businesses.
Advanced JIRA tips and tricks

Matej Stolfa 8Aug2018

So you’ve grasped the Jira basics and know to steer clear of the 7 Deadly Sins of Using JIRA? It’s time to put your big boy pants, level up and start using JIRA like a PRO. Here are some tips and tricks you will save you a lot of time and impress your colleagues.
Creating a Nuget Package

Simon Miller 6Aug2018

As part of a Wiliam learning project, I needed to find a way to make a reusable component that could be used for the rest of our developers as a starting point on future projects.
Sprint Zero: Kicking off a Scrum project the right way

Tom Nason 31Jul2018

The goal of this initial preparatory Sprint is to front-load any work necessary to allow the teams to commence Sprint 1 effectively and without impediments. This includes preparing the Project Roadmap, creating the basic skeleton and plumbing for the project and readying the team for feature development.
Top picks from around the web #3

Sandra Stepien 21Mar2018

Ecommerce features to improve UX and redesigns to check out this week.
How to design better forms

Sandra Stepien 6Mar2018

Whether we’re buying something online or signing up to an email list, forms are a part of our everyday lives. Use these 4 simple tips to help make forms user-friendly and frictionless.
Case Study: Improving Performance in Entity Framework with Stored Procedures

Andrea James 27Nov2017

A step by step look at improving application performance in a custom .NET MVC website using Entity Framework.
Top 5 web development songs

29Aug2017

Yes, it’s that time of the year. Time to list the top web development themed songs. Prepare to be entertained and inspired. Your brain will never be the same.
Implementing pages from design files

25Aug2017

There are a lot of tutorials on the web on how to use HTML, CSS and Javascript. But it’s difficult to find one that teaches you the big picture, or the steps involved in a real task. This article will address the general work flow, as well as how to approach your code, to produce an accurate recreation of a design.

wiliam.com.au

Featured clients

clients

talk to us0420 521 870orcontact us online

Connect with us

We deliver our promise to clients through 2 focuses:

Online Success and Project Success. Over 15 years, we have delivered hundreds of substantial and complex projects on time, on budget and to the highest of standards.

Sydney 0420 521 870

Level 7, 140 Arthur Street, North Sydney, NSW Australia 2060