[html] How to display items side-by-side without using tables?

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?

This question is related to html css

The answer is


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.


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).


What about display:inline?

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

The negative margin would help a lot!

The html DOM looks like below:

<div class="main">
  <div class="main_body">Main content</div>
</div>
<div class="left">Left Images or something else</div>

And the CSS:

.main {
  float:left;
  width:100%;
}

.main_body{
  margin-left:210px;
  height:200px;
}
.left{
  float:left;
  width:200px;
  height:200px;
  margin-left:-100%;
}

The main_body will responsive it's with, may it helps you!


these days div is the new norm

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

Try calling the image in a <DIV> tag, which will allow a smoother and faster loading time. Take note that because this is a background image, you can also put text over the image between the <DIV></DIV> tags. This works great for custom store/shop listings as well...to post a cool " Sold Out! " overlay, or whatever you might want.

Here is the pic/text- sided by side version, which can be used for blog post and article listing:

<div class="whatever_container">
<h2>Title/Header Here</h2>
 <div id="image-container-name"style="background-image:url('images/whatever-this-is-named.jpg');background color:#FFFFFF;height:75px;width:20%;float:left;margin:0px 25px 0px 5px;"></div>
<p>All of your text goes here next to the image.</p></div>

Usually I do this:

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

All these answers date back to 2016 or earlier... There's a new web standard for this 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/