2 Boxen 50% , trotzdem verschiebt es sich immer noch nach unten

[parameter95]

Guten Tag Community, ich habe meinen 2Boxen eine Länge von 50 % gegeben und Display:inline-block; jedoch verschiebt es sich nach unten wenn ich aber eine von den Boxen die Länge um 1% reduziere klappt es. Sprich: Box1 = 50%, Box2 = 49%;

Wo liegt das Problem?

Spoiler

<section id="sec-container">
<div class="container">
<h1>Homepage</h1>
<nav>
<ul>
<li><a href="#">tag</a></li>
<li><a href="#">tag</a></li>
<li><a href="#">tag</a></li>
<li><a href="#">tag</a></li>
<li><a href="#">tag</a></li>
</ul>
</nav>
<h2>Dies ist eine einfache Test Homepage.</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</section>

Spoiler

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

html {
border-box:box-sizing;
}

html li {
display:inline;
}

*:first-child+html li  {
display:inline;
}

*, ::before, ::after {
border-box:inherit;
}

body {
height:100%;
font-size:100%;
margin:0em;
padding:0em;
background:#dcdcdc;
font-family:'Open Sans',sans-serif;
font-weight:300;
}

h1 {
font-family:'Open Sans',sans-serif;
font-weight:400;
color:#333;
line-height:3em;
margin:0em auto;
text-align:center;
}

h2 {
font-family:'Open Sans',sans-serif;
font-weight:300;
color:#555;
line-height:2.8em;
margin:0em auto;
text-align:center;
}

p {
font-family:'Open Sans',sans-serif;
font-weight:300;
color:#444;
line-height:2.8em;
margin:0em auto;
padding:0.500em;
text-align:justify;
}

#sec-container {
width:100%;
margin:0em auto;
padding:0em;
background:#fff;
}

.container {
width:1200px;
margin-left:auto;
margin-right:auto;
}

#sec-container h1 {
width:50%;
display:inline-block;
text-align:center;
}

nav {
display:inline-block;
width:50%;
margin:0em auto;
padding:0em;
text-align:center;
}

nav li {
display:inline-block;
text-align:center;
margin:0em;
}

nav a {
text-decoration:none;
padding:0em;
}

 

[MrMurphy]

Hallo

Display:inline-block

Damit hast du das Problem doch schon herausgepickt.

Inline-Elemente (und damit auch inline-block-Elemente) bekommen automatisch einen geringen rechten Abstand mit auf den Weg. Zu den 50% muss also noch dieser Abstand hinzugerechnet werden, damit passen die nicht mehr nebeneinander.

Das soll nach der Spezifikation auch so sein, seriöse Browser müssen diesen rechten Abstand also berücksichtigen.

Problem: Der Abstand ist nicht genau definiert. Bei einem Zoom von 100% beträgt er etwa 4px.

Bei einer Änderung des Zooms ändert sich leider auch der rechte Zwangs-Abstand. Auch bei einigen Browsern kann der Abstand variieren.

Die häufig empfohlene Lösung, den Elementen einen negativen rechten margin von 4px (also -4px) mit auf den Weg zu geben ist demnach mit Vorsicht zu genießen und sollte vermieden werden. Wenn die Besucher den Zoom-Faktor ihres Browsers ändern wird ihnen das Layout um die Ohren fliegen.

Sinnvoller und stabiler ist es deshalb auf "display: block" zurückzugreifen beziehungsweise float oder das Flexbox-Modell zu bemühen.

Gruss

MrMurphy

 

[parameter95]

Gute Erklärung Danke! Aber ganz auf Display:inline-block; sollte man nicht verzichten oder doch immer float/flexbox einsetzen?

 

[MrMurphy]

Hallo

Ich habe nirgends geschrieben, dass inline-block schlecht oder verwerflich ist.

Auf inline-block sollte nur verzichtet werden wenn Elemente den sie umgebenden Container pixelgenau ohne Abstand ausfüllen sollen. Dafür ist es schlicht nicht gedacht.

Wenn Block-Elemente nebeneinander rutschen sollen und dabei einen seitlichen Abstand einhalten sollen kann inline-block durchaus das Mittel der Wahl sein.

Gruss

MrMurphy

 

[threadi]

Inline-Elemente (und damit auch inline-block-Elemente) bekommen automatisch einen geringen rechten Abstand mit auf den Weg.

Das ist der white-space im HTML-Code. Wenn man z.B. die Boxen so schreibt

<div>box1</div>
<div>box2</div>

interpretieren die meisten Browser (leider) den Zeilenumbruch als Abstand, wenn beide Elemente inline-block sind. Wenn man

<div>box1</div><div>box2</div>

schreibt passiert das nicht.

Siehe z.B.: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Es gibt hierfür mehrere Lösungen:

• display: block oder inline-block mit float
• vertical-align mitgeben, siehe: http://stackoverflow.com/questions/18508442/remove-whitespace-between-div-element
• Flexboxen verwenden