0

How can I group two divs inside a span (one below other and the div contains text and has a fixed width) and display multiple span like this in fixed width td tag. I am able to do so, but my span are overlapping. If the space in a line is full then the next span should come in next line.

Teun Zengerink
  • 4,277
  • 5
  • 30
  • 32
Avi
  • 368
  • 2
  • 13
  • 2
    You should not place block elements (like a `div`) inside inline elements (like a `span`) – Teun Zengerink Apr 21 '12 at 11:13
  • Where is a live URL, or link to jsfiddel/webdevout? We cannot help you, if there is no way to play with your css/html. – tereško Apr 21 '12 at 11:15
  • Okay i converted the span to div, but still using 'display:inline-block' is not preventing them from overlapping...the parent div are still overlapping. – Avi Apr 21 '12 at 13:27

1 Answers1

4

You need to correct your markup.

You are not allowed to place block-level Elements (like div) into inline elements (like span). Doing so will make your markup invalid and mess with the layout, since inline elements have restriction regarding width and margin.

Either declare display:block or display:inline-block on your spans, or even better convert them to divs. This should most likely fix your issue.

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • Okay i converted the span to div, but still using 'display:inline-block' is not preventing them from overlapping...the parent div are still overlapping. – Avi Apr 21 '12 at 13:26
  • @Avi go to jsfiddle.net and provide a link to your sample markup. – Christoph Apr 21 '12 at 18:02