Responsive web design

[rosh8111]

Hi guys i have small issue, for responsive design the theory is divide the the child div form it parent div, if i’m doing a full screen website with the wrapper div of 100%, how can i calculate the other dives coming inside of this 100% width div.

[Paulie_D]

I’m not sure what you are asking but you can use percentages that add up to 100% for the child divs.

Each ‘grandchild’ can also have a % width but you assume that the ‘child’ is now the parent…if you see what I mean.

http://codepen.io/Paulie-D/pen/fkhHn

[joshuanhibbert]

@andy_unleash At least you can use box-sizing for modern browsers to deal with that. The biggest issue for me with percentages is the rounding. Let’s say that the parent element happens to be rendering at 901px. That means that two 50% elements need to render at 450.5px, but that can’t happen. So they both render at 451px and then one gets pushed down to the next line due to a lack of space. You can remedy it by using 49.9%, but even that isn’t perfect.

[Paulie_D]

@andy_unleash True…which is why I (generally) don’t pad divs, I add padding to the content of the div.

An alternative is to use a % for padding. As long as the numbers all add up to 100 we’re good (except for @joshuanhibbert ‘s valid point).

[Anonymous]

I don’t have Windows XP anymore, but does it automatically update to IE8 when you run Windows Update, or do you have to manually update it?

[joshuanhibbert]

@andy_unleash With Chrome and Firefox releasing new versions so frequently, stuff generally has pretty decent browser support these days :) Here is a great article on box-shadow: http://paulirish.com/2012/box-sizing-border-box-ftw/

[rosh8111]

Thank guys, what i mean is , if my parent div width is 100%, how to i calculate the child div with , if i use a round % it will shrink the div.

[Author]

Posts