Hi,
You need to understand the CSS box model which really should have been the very first thing that you learned as you can’t really do anything until you understand this concept.
An elements dimensions are calculated by combining its specified width, padding and borders to arrive at a final size. Therefore if you have an element that is width:100% and then you add 20px padding the element will in fact be too big to fit inside its containing block and will overflow.
As with your example if you have a 70% width and a 30% width then you add padding or borders then those elements will no longer fit side by side as they will be too wide.
You could instead add an inner element inside the parent and apply the padding and borders to that inner element.
Another way without using extra divs is to change the box model by using ‘box-sizing’ and you can change the model to ‘border-box’ which means that when you add padding or borders then they are added inside the specified width of the box and do not add to the overall size. This property is supported in IE8+
Indeed it is becoming popular to reset the whole document to use this model now that support for ie7 and under can be dropped.
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
The above code will change it so that all elements use the border-box model and padding and borders are created inside the width of the element and not added to it.