CODEWITHSUNDEEP
javascripthtmlcss
JamesGold
JamesGold

Reputation: 815

<dl> description lists side by side horizontally

I have two description lists (one of coffee shops around a destination, the other of donut shops around that destination) that I want to show up side by side horizontally. I have tried all combinations of display:inline-block and float to no avail. No matter what, one list is always covered by the other.

Fiddle:

http://jsfiddle.net/JamesGold/e1fsu5jt/

The lists are populated by the javascript code which calls the Google Places library.

edit: the lists don't seem to be populating in the fiddle, but they do get populated in my browser... does fiddle not support Google Places API calls?

Upvotes: 0

Views: 83

Answers (1)

benomatis
benomatis

Reputation: 5643

Wrap them inside a div and floating should work just fine.

<div style="width: 50%; float:left;">
  <dl>
    <dt id="coffee1"></dt>
      <dd id="coffee1_address"></dd>
      <dd id="coffee1_number"></dd>
      <dd id="coffee1_rating"></dd><br>
    <dt id="coffee2"></dt>
      <dd id="coffee2_address"></dd>
      <dd id="coffee2_number"></dd>
      <dd id="coffee2_rating"></dd><br>
    <dt id="coffee3"></dt>
      <dd id="coffee3_address"></dd>
      <dd id="coffee3_number"></dd>
      <dd id="coffee3_rating"></dd><br>
    <dt id="coffee4"></dt>
      <dd id="coffee4_address"></dd>
      <dd id="coffee4_number"></dd>
      <dd id="coffee4_rating"></dd><br>
    <dt id="coffee5"></dt>
      <dd id="coffee5_address"></dd>
      <dd id="coffee5_number"></dd>
      <dd id="coffee5_rating"></dd>
  </dl>
  </div>
  <div style="width: 50%; float:right;">
  <dl>
    <dt id="donuts1"></dt>
      <dd id="donuts1_address"></dd>
      <dd id="donuts1_number"></dd>
      <dd id="donuts1_rating"></dd><br>
    <dt id="donuts2"></dt>
      <dd id="donuts2_address"></dd>
      <dd id="donuts2_number"></dd>
      <dd id="donuts2_rating"></dd><br>
    <dt id="donuts3"></dt>
      <dd id="donuts3_address"></dd>
      <dd id="donuts3_number"></dd>
      <dd id="donuts3_rating"></dd><br>
    <dt id="donuts4"></dt>
      <dd id="donuts4_address"></dd>
      <dd id="donuts4_number"></dd>
      <dd id="donuts4_rating"></dd><br>
    <dt id="donuts5"></dt>
      <dd id="donuts5_address"></dd>
      <dd id="donuts5_number"></dd>
      <dd id="donuts5_rating"></dd>
  </dl>
</div>

Here is a fiddle for this: http://jsfiddle.net/e1fsu5jt/6/ - I added the text donuts to the right hand side column (see explanation below).

Note: you may not see donuts on the right hand side because, for some reason, no result is being returned, but that's a whole different question (nothing to do with css positioning).

EDIT: actually, you don't have to wrap them inside a div, it's just best practice. You could apply the same styles to the dl elements just as well, you just have to be sure to do it right. Not sure what you did before why float didn't work for you, but it should. You just have to make sure one of the elements has left, the other one right and both have width specified that add up to the total of their container or to 100% (including margins and paddings!).

Here is an updated fiddle without the extra div's: http://jsfiddle.net/e1fsu5jt/9/

Upvotes: 1

Related Questions