CODEWITHSUNDEEP
htmlcsshtml-lists
Albert
Albert

Reputation: 507

HTML and CSS: fix misbehaving list

I need help in fixing a 2-column list.

The problem is that the right column intrudes into the left one if more than single line used.

Another trouble is that if left column has more than one line, the content inside of the right column will appear at the bottom.

The separating line between columns also acts strange with more than 1 line (see the examples below).

Please note, I'd like to keep "Title" and "Description" columns in separate HTML-tags (at least one of them inside a tag), because I need this for Responsive CSS layout.

ul {
  list-style: none!important;
}
ul.my-list>li {
  width: 550px!important;
  position: relative;
  padding-left: 30px;
  padding-right: 15px;
  background: 0 0;
  border-radius: 0!important;
  margin: 0;
  box-sizing: border-box;
  background: #EEE;
}
ul.my-list>li span {
  width: 140px;
  border-right: 1px solid #E0E0E0;
  display: inline-block;
  padding: 3px 0;
  line-height: 38px;
  margin-right: 15px;
}
<ul class="my-list">
  <li><span>Title</span>Description. Not too many words – displays well.</li>
</ul>
<br>
<br>
<ul class="my-list">
  <li><span>Title</span>Description. More words – this goes wrong. Really wrong. Seriously...At least the "Description" column should not intrude into the "Title" column.</li>
</ul>
<br>
<br>
<ul class="my-list">
  <li><span>Title with many words acts weird too</span>Description. How to fix the "Description" column, so it would start from the top side, not from the bottom?</li>
</ul>
<br>
<br>

Upvotes: 0

Views: 234

Answers (2)

Albert
Albert

Reputation: 507

I've solved the problem, mostly by creating two separated <span> tags for each of the columns and using display: inline-flex; for the whole <li> tag.

The solution is CSS Responsive Layout friendly and works with all window sizes.

JSFiddle: http://jsfiddle.net/tay06de4/4/

Upvotes: 0

ar em
ar em

Reputation: 444

try this

ul.my-list>li span {
  float:left;
  }

ul.my-list>li {
  min-height: 80px;
  
  }

Upvotes: 1

Related Questions