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/
