Home/ Questions/Q 5973077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T20:44:57+00:00

I have a really weird offset/padding/margin/whatever error with CSS3. Following markup is defining an

  • 0

I have a really weird offset/padding/margin/whatever error with CSS3. Following markup is defining an article and a corresponding sidebar:

<section>
  <article>
  ...
  </article>
  <aside>
   ...
  </aside>
</section>

And I’m using CSS3 styles to display them side by side:

section {
  display: table;
}

article {
  display: table-cell;
}

aside {
  display: table-cell;
}

The result should look like this (this is the top of the sidebar):
http://flic.kr/p/9MvNEk

but actually it looks like this:
http://flic.kr/p/9Mvtvt

What is this gap, and why is it there? Both Safari’s Web Inspector and Firefox’s Firebug don’t show any information, only Opera Inspector displays an “OffsetTop” layout value of 8 pixels. Any ideas how to fix it without positioning the sidebar absolute?

body
{
  display:table;
  font-family:Arial, sans-serif;
  margin:0;
  padding:0;
}

body article
{
  display:table-cell;
  border-right:1px solid #0088b9;
  width:766px;
}

body article section
{
  clear:both;
  display:inline-block;
  margin:0 34px 0 0;
  padding:13px 0 13px 34px;
  width:698px;
}

body article section.rule
{
  border-bottom:1px solid #a6a6a6;
}

body article section.title
{
  background-color:#0088b9;
  color:#FFF;
  font-size:39px;
  font-style:bolder;
  padding:13px 34px;
  width:664px;
}

body article section.header
{
  background-color:#7cb6d6;
  color:#FFF;
  font-size:26px;
  font-style:bold;
  padding:13px 34px;
  width:664px;
}

body article section.text
{
  padding:13px 34px;
  width:664px;
}

body article section.text p
{
  margin:0;
  font-size:20px;
}

body article section.list ul
{
  font-size:20px;
  list-style-image:url(dot.png);
  margin:0 0 0 -16px;
}

body article section.images figure
{
  display:block;
  float:left;
  font-size:15px;
  margin:0;
  padding:0;
  text-align:center;
  width:332px;
}

body article section.images figure:last-child
{
  margin-left:34px;
}

body article section.image figure
{
  display:block;
  font-size:15px;
  padding:0;
  text-align:center;
}

body aside
{
  background-color:#ccd6e2;
  border-left:1px solid #FFF;
  display:table-cell;
  width:256px;
}

body aside nav
{
  width:256px;
}

body aside nav a
{
  border-top:22px solid #a6a6a6;
  border-bottom:22px solid #a6a6a6;
  border-left:22px solid #a6a6a6;
  display:block;
  text-decoration:none;
  line-height:20px;
}

body aside nav a strong
{
  background-color:#0088b9;
  border-bottom:1px solid #FFF;
  color:#FFF;
  display:block;
  font-size:20px;
  text-align:center;
}

body aside section.screen
{
  top:68px;
}

body aside section.screen a
{
  display:block;
  padding:17px 22px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section>
      <article>
        <section class="title">
          Überschrift Lorem ipsum3
        </section>

        <section class="header">
          Einleitung Lorem ipsum dolor sit amet, consetetur sadip scing elitr, sed diam nonumy eirmod tempor.
        </section>

        <section class="text">
          <p>Text Lorem ipsum dolor sit ametsadipscing elitr, sed invidunt takimata</p>
        </section>

        <section class="list">
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>
        </section>

        <section class="images">
          <figure>
            <img src="5747714470_334146faa9_b.jpg" alt="Macaque in the trees">
            <figcaption>Text Lorem ipsum</figcaption>
          </figure>
          <figure>
            <img src="5747165065_67cbfa0a09_b.jpg" alt="Macaque in the trees">
            <figcaption>Text Lorem ipsum</figcaption>
          </figure>
        </section>

        <section class="image">
          <figure>
            <img src="5747167101_33b788b4dd_b.jpg" alt="Macaque in the trees">
            <figcaption>Text Lorem ipsum</figcaption>
          </figure>
        </section>

        <section class="rule"></section>
      </article>
      <aside>

        <nav>
          <a href="/"><strong>Zurück</strong></a>
        </nav>
        <section class="screen">
          <a href="/" class="video">Lorem ipsum dolor sit amet</a>
          <a href="/" class="image">Lorem ipsum dolor sit amet</a>
        </section>
        <section class="downloads">
          <a href="/" class="pdf">Lorem ipsum dolor sit amet</a>
        </section>
      </aside>
    </section>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, my guess in my comment was wrong.

    You need to add vertical-align: top to your aside element.

    body aside
{
  vertical-align: top;

  background-color:#ccd6e2;
  border-left:1px solid #FFF;
  display:table-cell;
  width:256px;
}
    • 0