Another way to avoid calc would be to use box-sizing: border-box, which
will subtract the border (and padding) from the overall width of each box.
Some people argue you should apply it to everything --
http://www.paulirish.com/2012/box-sizing-border-box-ftw/ -- a view I agree
with.
There is still a chance that the borders may look a bit different because
of rounding differences when using ems. I tend to use pixels for borders
for that reason and change the width with media queries if needed. I use
ems, percents, or ems for pretty much everything else.
Also, there is no "content" HTML5 element. "main" seems to be a close
match. This may seem like a nitpick, but as it currently stands, your
content element is using a default display setting of inline -- and that
means whitespace handling will come into play -- that can differ on Chrome
on a Mac versus Chrome on Windows, and inline elements (think span) ignore
width or height settings as well.
Compatibility note: For compatibility with IE8 - 11, you should add main {
display:block; }, or get an HTML5 shim in CSS or JavaScript form.
Chad
On Apr 7, 2015 11:34 AM, "John Andrews" <andrew...@gmail.com> wrote:
> You can avoid the calc in the section by putting the nav first in the body
> floated left as you have, then put the aside floated right as you have,
> then take the calc width of the section out and let it fit in between the
> left and right portions.
>
> It seems to work for me.
>
> --- John Andrews
> (forgot to reply all)
>
> On Tue, Apr 7, 2015 at 4:59 AM, Kristian Dahlgaard <krist...@nicedane.dk>
> wrote:
>
> > I'm having an issue with Chrome, which does not line up the 2 boxes
> > 'section' and 'aside'.
> > If I zoom my browser window, the space between the 2 boxes gets larger or
> > disappears and the line up perfectly like 'nav' and 'section.
> >
> > I've tried to use px instead of em, but that does not change the result.
> >
> > Any ideas what is happening and how this can be fixed?
> >
> > body { font-family: Verdana,Arial,sans-serif; }
> >
> > div#content {
> > width: 90%;
> > margin:2em auto;
> > background-color: #00ff21; }
> >
> > header {
> > background-color: #ffd800;
> > border: solid black 0.1em; }
> >
> > header h1 {
> > text-align: center;
> > font-size: 3em; }
> >
> > section {
> > background-color: #ffd800;
> > border: solid black 0.1em;
> > width: calc(40% - 0.6em);
> > float: left;
> > padding: 0.2em 0.2em 0.2em 0.2em;
> > margin:0; }
> >
> >
> > nav {
> > background-color: #ffd800;
> > border: solid black 0.1em;
> > width: calc(20% - 0.6em);
> > float: left;
> > padding: 0.2em 0.2em 0.2em 0.2em;
> > margin:0; }
> >
> > nav ul{
> > padding-left:0; }
> > nav ul li{
> > list-style-type:none; }
> >
> > aside {
> > background-color: #ffd800;
> > border: solid black 0.1em;
> > width: calc(40% - 0.6em);
> > float: right;
> > padding: 0.2em 0.2em 0.2em 0.2em;
> > margin:0; }
> >
> > code {
> > background-color: #ffd800;
> > border: solid black 0.1em;
> > width: auto;
> > display: block;
> > margin: 1em;
> > padding: 0.2em; }
> >
> > footer {
> > clear: both;
> > border: solid black 0.1em;
> > text-align:center; }
> >
> > footer ul li{
> > display:inline;
> > font-size:0.6em;
> > padding:0 1.5em 0 1.5em; }
> >
> >
> >
> > <!DOCTYPE html>
> > <html xmlns="http://www.w3.org/1999/xhtml";>
> > <head>
> > <link href="css/style.css" rel="stylesheet" media="screen" />
> > <title>Template</title>
> > </head>
> > <body>
> > <content>
> > <header>
> > <h1>header lorem ipsum</h1>
> > </header>
> >
> > <nav>
> > <ul>
> > <li>Præsentation</li>
> > <li>HTML</li>
> > <li>CSS</li>
> > <li>JavaScript</li>
> > </ul>
> > nav lorem ipsum
> > </nav>
> >
> > <section>
> > section lorem ipsum
> > </section>
> >
> > <aside>
> > aside lorem ipsum
> > <code>code 1 lorem ipsum</code>
> > <code>code 2 lorem ipsum</code>
> > <code>code 3 lorem ipsum</code>
> > <code>code 4 lorem ipsum</code>
> > </aside>
> > <footer>
> > <ul>
> > <li><strong>Studieretning</strong>Akademiuddannelse i
> > IT</li>
> > <li><strong>Fag</strong>Client-side</li>
> > <li><strong>Navn</strong>Kristian Dahlgaard</li>
> > <li><strong>Vejleder</strong>Per Ole Kjeldsen</li>
> > <li><strong>Uddannelses institution</strong>
> > Smartlearning</li>
> > </ul>
> > </footer>
> > </content>
> > </body>
> > </html>
> >
> >
> > ______________________________________________________________________
> > css-discuss [css-d@lists.css-discuss.org]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> ______________________________________________________________________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
