CODEWITHSUNDEEP
htmlcss
Nirav
Nirav

Reputation: 79

Place DIV element next to SPAN element inside parent TD

I am struggling to place a div element next a span element inside parent .

Currently element is getting display belove the span element. I need it to display next to span element.

Here is HTML structure I am using:

<td>
  <a align="right"><img></a>
  <a align="right"><img></a>
  <img>
  <a><img></a>
  <span id="labelSpan">test</span>
  <div id="headerDiv" style="margin-left:150px;">
    <table><tbody><tr><td></td></tr></tbody></table>
  </div>
</td>

An additional requirement is that I need to set margin of div element with respect to parent td element not span element.

Please advise.

Thanks!

Upvotes: 3

Views: 9139

Answers (4)

jansmolders86
jansmolders86

Reputation: 5759

Make the span display-inline. This will place it next to the div. Or make it display:block and then float the span. (float:left;)

 span {
    display: inline-block;
 }

Upvotes: 1

insertusernamehere
insertusernamehere

Reputation: 23580

You have to do three things: Set display of the <span> and the <div> to inline-block. This will ensure that they are both on the same line. Then remove the margin from the <div>. Finally add a width to the <span>. Now the <div> is exactly 150px away from the left side of the <td>.

td > span {
    display: inline-block;
    width: 150px;
}
td > div {
    display: inline-block;
}

Demo

Try before buy

Upvotes: 0

j08691
j08691

Reputation: 207901

Try:

div {
    display: inline;
}

This will make the div an inline element like the span and the two will sit side by side. You'll probably need to change the display of the table as well.

Upvotes: 4

Colin Bacon
Colin Bacon

Reputation: 15609

You could make span a block level element.

Example

span {
    display: block;
}

Upvotes: 0

Related Questions