Home/ Questions/Q 3459172
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T10:04:26+00:00

I want a format html using CSS so that I get the following: Image

  • 0

I want a format html using CSS so that I get the following:

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.

However I’m getting the subject and the body one one line and a cacade effect down the
page.

Here is what I seem to be getting.

alt text
I just cannot seem to get the hang of what’s needed.

My html is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>messages to/from someone</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
</head><body>
         <div class'message'>
               <span class='to'>
                     <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
                     <span class='subject'>subject</span>
                     <span class='body'>body</span>
               </span>
         </div>  
         <div class'message'>
               <span class='to'>
                     <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
                     <span class='subject'>subject</span>
                     <span class='body'>body</span>
               </span>
         </div>  
         <div class'message'>
               <span class='to'>
                     <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
                     <span class='subject'>subject</span>
                     <span class='body'>body</span>
               </span>
         </div>  
</body></html>

My CSS is:

.floatimgleft {
    float:left;
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
}
.message{
  display: block;
}

.subject {
   display: inline;
}
.body {
   display: inline;
}

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add:

    class="floatimgleft"

    to your img tags:

    <img src='../code/images/arrow-right.png' width='64' height='64' border='0' class="floatimgleft" />

    Also, seems you are not using to class either and you are missing = in the <div class'message'>.

    Here’s a jsfiddle to test it out:

    EDIT: For having it clear, add clear: left to message. See the fiddle:

    for a demonstration.

    • 0