How to display items side-by-side without using tables?

Question

For example you want to display an image beside a text, usually I would do this:

<table>
    <tr>
        <td><img ...></td>
        <td>text</td>
    </tr>
</table>

Is there a better alternative?

Tables should only be used for tabular data. – Roddy of the Frozen Peas Jul 11 '12 at 18:24 — Roddy of the Frozen Peas, Jul 11 '12 at 18:24

Neil McGuigan · Accepted Answer · 2016-03-10T07:15:03.330

You should float them inside a container that is cleared.

Example:

https://jsfiddle.net/W74Z8/504/

A clean implementation is the "clearfix hack". This is Nicolas Gallagher's version:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

its not working in my case same code but no result in case of Mozilla — nida, Nov 30 '13 at 20:33
While this solution is correct it's outdated (2012!). There's a new standard detailed here: https://stackoverflow.com/a/53216277/4842949 — Joseph Cho, Nov 08 '18 at 21:22

Joseph Cho · Answer 2 · 2023-03-29T19:24:14.623

12

UPDATE

I've updated this answer to account for latest coding practices. Many answers here are from 2012. The current web standard for this is using flex-boxes. In general floats for these sorts of problems is now frowned upon.

HTML

<div class="image-txt-container">
  <img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
  <h2>
    Text here
  </h2>
</div>

CSS

.image-txt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

Example fiddle: https://jsfiddle.net/r8zgokeb/1/

edited Mar 29 '23 at 19:24

answered Nov 08 '18 at 21:18

Joseph Cho

4,033
4
26
33

This doesn't wrap the text underneath the image like a true responsive page would when the window gets smaller, but the accepted answer does...what gives??? – BA TabNabber Aug 10 '21 at 19:37
@BATabNabber this is true. You could easily add a media column that switches `flex-flow: column` on smaller screens. This would be a more modern approach compared to using `float` which is by and large used on legacy codebases only. – Joseph Cho Aug 10 '21 at 22:26

score 9 · Answer 3 · answered Jul 11 '12 at 18:34

Yes, divs and CSS are usually a better and easier way to place your HTML. There are many different ways to do this and it all depends on the context.

For instance, if you want to place an image to the right of your text, you could do it like so:

<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p>

And if you want to display multiple items side by side, float is also usually preferred.For example:

<div>
  <img src="image1.png" style="float: left;" />
  <img src="image2.png" style="float: left;" />
  <img src="image3.png" style="float: left;" />
</div>

Floating these images to the same side will have then laying next to each other for as long as you hava horizontal space.

Not necessary for this example. – Pjottur Jul 11 '12 at 19:01 — Pjottur, Jul 11 '12 at 19:01

score 3 · Answer 4 · answered Jul 11 '12 at 18:22

3

these days div is the new norm

<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>

answered Jul 11 '12 at 18:22

dreamerkumar

1,540
1
18
28

1

I'd say the new HTML5 elemetns is the new norm these days. – Jørgen Jul 11 '12 at 18:23
@Jørgen What's the HTML5 solution for the above? – IMB Jul 11 '12 at 18:25
1

The solution could be anything. I'm just saying that instead of putting divs everywhere, one should try to create better markup with better semantical meaning. – Jørgen Jul 11 '12 at 18:28

score 1 · Answer 5 · answered Jul 11 '12 at 18:23

1

What about display:inline?

<html>
      <img src='#' style='display:inline;'/>
      <p style='display:inline;'> Some text </p>
</html>

answered Jul 11 '12 at 18:23

Skovy

173
2
15

1

The img doesn't need `display: inline` (it's the default) – Dan Dascalescu Nov 19 '13 at 08:54

score 0 · Answer 6 · answered Jul 11 '12 at 18:31

It depends on what you want to do and what type of data/information you are displaying. In general, tables are reserved for displaying tabular data.

An alternate for your situation would be to use css. A simple option would be to float your image and give it a margin:

<p>
    <img style="float: left; margin: 5px;" ... />
    Text goes here...
</p>

This would cause the text to wrap around the image. If you don't want the text to wrap around the image, put the text in a separate container:

<div>
    <img style="float: left; margin: ...;" ... />
    <p style="float: right;">Text goes here...</p>
</div>

Note that it may be necessary to assign a width to the paragraph tag to display the way you'd like. Also note, for elements that appear below floated elements, you may need to add the style "clear: left;" (or clear: right, or clear: both).

score 0 · Answer 7 · answered Jul 18 '12 at 07:19

0

Usually I do this:

<div>
   <p> 
       <img src='1.jpg' align='left' />
       Text Here
   <p>
</div>

answered Jul 18 '12 at 07:19

Anita Sharma

175
4
13

That won't behave well in lists, for instance. The image will overlap whatever is underneath. – Dan Dascalescu Nov 19 '13 at 08:56

How to display items side-by-side without using tables?

7 Answers7

Linked