Fork me on GitHub

26 Mar 2011

CSS box model hacking

Want to make an HTML element fill 100% of its parent’s width but also give it a border and/or some padding? Since the width of an element is exclusive of its border and padding this can be a pain. However there’s a fairly simple CSS solution that works cross-browser.

Here’s an example. Both input boxes are set to width: 100% and have padding: 5px. The first input shows the problem. Because the padding and border are added to the width of the element it overflows its container. The box model of the second input has been modified so that the padding and border are inside the declared width.

The trick to modifying the box model is to set box-sizing: border-box. Unfortunately that’s not a cross-browser property, only Opera supports it at the moment. To get the same effect in other browsers you will also need to set browser-specific versions as well:

   -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
        box-sizing: border-box;
Note that Internet Explorer only supports the -ms-box-sizing property from version 8 upwards so you should probably be judicious with this technique or use an alternative method to get a similar effect in IE7 and below.

11 comments:

Metamorfosis said...

Pelatihan SDM is a network marketing and training information or training an employee who has worked with many consulting firms and training institutions.
pendidikan dan pelatihan sdm, pelatihan akuntansi, sales marketing, manajemen bisnis, administrasi kantor, lembaga training motivasi, pelatihan sumber daya manusia, training manajemen, training sdm, informasi training, pusat pelatihan, pelatihan rumah sakit, training provider jakarta, training jakarta, training consultant jakarta, training center,

Stem Cell Therapy said...

Thank you for sharing. I found this post to be very informative and helpful.
Platelet Rich Plasma Therapy
Elbow Surgery
Hip Replacement Surgery
Shoulder Surgery
Knee Replacement Surgery
Stem Cell Therapy

Bella Tran said...

A good website is very important in promoting anything
juegos kizi | juegos kizi | jogos do friv | jogos de friv | clickjogos | juegos de pou | juegos de terror | jogos online gratis | unblocked games | baixar facebook | baixar mobogenie | descargar mobogenie | agario | five nights at freddy's 4 | h1z1 | Gmod

thị hậu nguyễn said...

I am impressed by the quality of information on this website. There are a lot of good resources here. I am sure I will visit this blog again soon.
happy wheels
super mario bros
pacman
agario

Giải Trí Tổng Hợp said...

I was working and suddenly I visits your site frequently and recommended it to me to read also. Age Of War 2
Big Farm | Slitherio
Tank Trouble | Happy Wheels
Goodgeme Empire | Slither.io

ngocanh said...

Your blog posts are more interesting and impressive. I think there are many people like and visit it regularly, including me.I actually appreciate your own position and I will be sure to come back here.
facebook entrar l entrar facebook l entrar no facebook l entrar facebook direto l entrar facebook agora

Unknown said...

Thanks for your sharing! The information your share is very useful to me and many people are looking for them just like me! thank you! I hope you have many useful articles to share with everyone!
abcya

我愛你 said...



Super website with a great sharing and amazing stories is ur web.. please keep doing what u do now.. thanks to you.
العاب طبخ جديدة
العاب تلبيس بنات
Games

قمة الدقة للخدمات said...

شركة تنظيف منازل بالجبيل
شركة تنظيف كنب بالخبر

Alice Taylor said...

Thanks for sharing this quality information with us. I really enjoyed reading.

www.happywheelsy8.com

Dr Driving said...

This article is really fantastic and thanks for sharing the valuable post.
www.appbaixar.com