Thanks Chad,
I'll have a look at the article.
I have tested with:
aside: width: calc(40% - 0.6em - 2px);
nav: width: calc(20% - 0.6em - 2px);
section: width: 40%;
but still no luck :o)
Thanks for the heads up with the content, I've changed it to main.
Best regards
Kristian
Chad Lundgren skrev den 2015-04-08 08:33:
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/
______________________________________________________________________
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/
