Strange behavior definition list

For a website I’m working on I use display table/table-row/table-cell method:

CSS

#wrapper, .wrapper {
  width:100%;
  height:100%;
  display:table;
  table-layout:fixed;
  border-collapse:collapse;
}
#main {
  display:table-row;
}
.tcl,
.tcr {
  display:table-cell;
  vertical-align:top
}
.main {
  width:60%;
  padding: 1em;
  display: table-cell;
}
.sidebar,
.content {
  display: table-cell;
  padding: 1.5em 0 3em;
}
.sidebar {
  width: 25%;
  border-right:1px solid #393233;
  padding-right: .5em;
}
.content {
  width: 75%;
  padding-left: 1em;
}

HTML

<div id="wrapper">
  <main id="main">
    <aside class="tcl">&nbsp;</aside>
    <div class="main">
      <div class="wrapper">
        <div class="sidebar">
          // menu Content
        </div>
        <div class="content">
          // main content
        </div>    
      </div>
    </div>
    <aside class="tcr">&nbsp;</aside>
  </main>
</div>

Everything works fine. However, when I add a definition list to div .content the content from div .sidebar is pushed down. This only happens with a definition list, all other properties (div, h1, p, ul, ol) are not giving me this problem. This is what I have for the definition list:

CSS dl

.content dl,
.content dt{
  width: 100%;
  float: left;    
}

.content dt {
  margin: 1.5em 0;
  font-weight: 600;    
}

.content dt:first-of-type {
  margin: 0 0 1.5em;    
}

.content dd {
  padding: 0 !important;
  font-size: .9em;    
}

.content dd span {
  width: 5%;
  float: left;
  font-weight: 600;      
}

.content dd span + span {
  width: 90%;
  font-weight: normal;    
}

There are no other properties for a definition list elsewhere in my stylesheet and neither in normalize.css. What can be the reason?

Thank you in advance

Text in CSS table cells aligns to the baseline by default. Add {vertical-align:top;} to the table-cells that contain the definition lists (and possibly others).

1 Like

FYI you don’t need display:table-row (the browsers will generate an element so it won’t break your page) so if that element is purely used as a holder for table-row (and you only have one table-row), you should consolidate your HTML and remove that extra element.

@ronpat Thank you for your reaction and information. That works great :smile:

@RyanReese Thank you for that very useful information. Never to old to learn :wink:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.