Home/ Questions/Q 6058459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:36:06+00:00

In .manager-record-header and .manager-record I’ve added property display: block; , I expect it to

  • 0

In .manager-record-header and .manager-record I’ve added property display: block;, I expect it to create a new line for each <div> I type as manager-record-header or manager-record. Somehow it’s not working – Item 01 and Item 02 appear in the same line. Where could be the problem?

this is my web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <style type="text/css">
h1 {
    font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
    color: #333;
  font-size: 1.5em; color: #6297BC;
}
h1 {  } 

body {
    margin: 0;
    padding: 0;
    font: 11px/1.6em  Verdana, Tahoma, Helvetica, sans-serif;
    color: #666666; 
    background: #A9BAC3;
    text-align: center;
}

#manager-body {
    background: #FFF;
    width: 820px;
    margin: 0 auto; 
    text-align: left;
}

.manager-record-header  {
  font-size: 2em;
  padding-left: 15px;
  display: block;
  width: 100%;
}

.manager-record-header-name {
  padding-left: 5px;
  width: 350px;
  float:left;
}

.manager-record-header-quantity {
  width: 100px;
  float:left;
}

.manager-record  {
  padding-left: 15px;
  display: block;
  width: 100%;
}

.manager-record-title {
  float:left;
  padding-left: 5px;
  width: 350px;
}

.manager-record-quantity {
  float: left;
  width: 100px;
}

</style>
 </head>
<body>
<div id="manager-body">
<h1>Item pricing</h1>

    <div class="manager-record-header">
      <span class="manager-record-header-name">Item name</span>
      <span class="manager-record-header-quantity">Quantity</span>
      <span class="manager-record-quantity">Price</span>
    </div>
    <div class="manager-record">
      <span class="manager-record-title">Item 01</span>
      <span class="manager-record-quantity">10</span>
    </div>
    <div class="manager-record">
      <span class="manager-record-title">Item 02</span>
      <span class="manager-record-quantity">3</span>
    </div>
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a fiddle of your problem.

    http://jsfiddle.net/jasongennaro/YQQHc/

    This looks like data that would be best presented in a table. I say forget the divs and use a table.

    EDIT

    Something like this

    <table>
    <thead>
        <td>Item name</td>
        <td>Quantity</td>
        <td>Price</td>            
    </thead>
    <tr>
        <td>Item 01</td>
        <td>10</td>
        <td>?</td>
    </tr>
    <tr>
      <td>Item 02</td>
      <td>3</td>
      <td>?</td>
    </tr>        
</table>

    http://jsfiddle.net/jasongennaro/YQQHc/1/

    • 0