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    lt table gt       lt tr gt           lt td gt  lt img     gt  lt  td gt           lt td gt text lt  td gt       lt  tr gt   lt  table gt    Is there a better alternative

User · Answer

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

User · Answer

What about display inline    lt html gt         lt img src     style  display inline    gt         lt p style  display inline   gt  Some text  lt  p gt   lt  html gt

User · Answer

The negative margin would help a lot   The html DOM looks like below    lt div class  main  gt     lt div class  main body  gt Main content lt  div gt   lt  div gt   lt div class  left  gt Left Images or something else lt  div gt    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

User · Answer

these days div is the new norm   lt div style  float left  gt  lt img    gt  lt  div gt   lt div style  float right  gt text lt  div gt   lt div style  clear both   gt

User · Answer

Usually I do this    lt div gt      lt p gt           lt img src  1 jpg  align  left    gt         Text Here     lt p gt   lt  div gt

User · Answer

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

User · Answer

Try calling the image in a  lt DIV gt  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  lt DIV gt  lt  DIV gt  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    lt div class  whatever container  gt   lt h2 gt Title Header Here lt  h2 gt    lt 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   gt  lt  div gt   lt p gt All of your text goes here next to the image  lt  p gt  lt  div gt

User · Answer

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   lt div class  image-txt-container  gt     lt img src  https   images4 alphacoders com 206 thumb-350-20658 jpg  gt     lt h2 gt      Text here    lt  h2 gt   lt  div gt    CSS   image-txt-container     display  flex    align-items  center    flex-direction  row      Example fiddle  https   jsfiddle net r8zgokeb 1

User · Answer

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    lt p style  width  500px   gt   lt img src  image png  style  float  right     gt  This is some text  lt  p gt     And if you want to display multiple items side by side  float is also usually preferred For example     lt div gt     lt img src  image1 png  style  float  left     gt     lt img src  image2 png  style  float  left     gt     lt img src  image3 png  style  float  left     gt   lt  div gt    Floating these images to the same side will have then laying next to each other for as long as you hava horizontal space

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

Examples related to html

Examples related to css