Hi I’m reading a book on layouts. An it tells you what to add and subtract so that everything fits okay. However i find one bit confusing.
The book reads:
"Body width= 600 pixels
Left and right columns, both: margin = 5 pixels x 2, border = 2 pixels x 2, padding = 5 pixels x 2, a total of 24 additional pixels in each column, plus the 90-pixel content width, for a total of 114 pixels,
The middle column also has 24 pixels in the margins, border, and padding.
If the two columns and 24 added pixels in the middle are subtracted from the 600-pixel body width, it leaves 348 pixels for the content of the column, or 58 percent. "
I can understand how this could be confusing. The “margin = 5 pixels x 2” refers to 5 pixels margin on each side of one column, not 5 pixels per column. But I can see how that could be easily misread.
However, as @SamA74 says, that kind of pixel-precise layout is very out-dated, and unsuited to the current scenario where there are so many different devices or difffering sizes, from phones to wide-screen, HD monitors.
I wasn’t concerned about the calculations, more about what book the OP is “learning” from.
The other thread has an example of a more up to date, fluid solution.
Not necessarily, for main containers, changing width to max-width can be better to limit width. For smaller containers like sidebars px (or em) widths can actually be better than % because % can get too thin or too wide on varying screens.
If it is anything to do with text, yes, you will handle text only zooming better. For image based elements pixels can be better.
To add to what @technobear lists, I’d also suggest that anyone working with layouts read Ethan Marcotte’s seminal work on the subject of RWD - http://alistapart.com/article/responsive-web-design - get your head around that (not a difficult task), and you’ll be well ahead of many of your peers.
You might find it easier to use the ‘border-box’ model rather than the standard box model as padding and borders are included within your specified width and makes calculations easier although you do still have to ensure you have room for your content.
These days I always use the border-box model by default on all my projects. It makes life so much easier.
