Databases
StackOverflow2013
Postsdbo
POHow float image and text correctly using css
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow float image and text correctly using css
    text
    copied!<p>I want a format html using CSS so that I get the following:</p> <blockquote> <p>Image on the left, with subject and body next to it on the right. I want subject to be on one line and the body to be on the other. With One message after each other on subsequesnt blocks downs the page.</p> <p>However I'm getting the subject and the body one one line and a cacade effect down the page.</p> </blockquote> <p>Here is what I seem to be getting.</p> <p><img src="https://i.stack.imgur.com/JKLh9.png" alt="alt text"> I just cannot seem to get the hang of what's needed.</p> <p>My html is :</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;messages to/from someone&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="messages.css" /&gt; &lt;/head&gt;&lt;body&gt; &lt;div class'message'&gt; &lt;span class='to'&gt; &lt;img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /&gt; &lt;span class='subject'&gt;subject&lt;/span&gt; &lt;span class='body'&gt;body&lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class'message'&gt; &lt;span class='to'&gt; &lt;img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /&gt; &lt;span class='subject'&gt;subject&lt;/span&gt; &lt;span class='body'&gt;body&lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class'message'&gt; &lt;span class='to'&gt; &lt;img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /&gt; &lt;span class='subject'&gt;subject&lt;/span&gt; &lt;span class='body'&gt;body&lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;/body&gt;&lt;/html&gt; </code></pre> <p>My CSS is:</p> <pre><code>.floatimgleft { float:left; margin-top:10px; margin-right:10px; margin-bottom:10px; } .message{ display: block; } .subject { display: inline; } .body { display: inline; } </code></pre> <p>Edit: I've edited the code to show where I started from. I was under the impression that div class='message' would cause a line break between messages but I'm getting a cascade effect.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload