CODEWITHSUNDEEP
htmlcsshtml-table
user2399453
user2399453

Reputation: 3081

How to align a table and a div on the same line?

I am trying to align a table of 6 rows occupying 75% of the horizontal space next to a div with text that is to the right.

However, the following html code leads to them being on top of one another.

I tried to play with inline-block etc but no matter what I do it's not placing the block next to it.

What am I doing wrong? The entire working snippet is below:

<div id="ResultDetails" style="border:solid; border-width:2px; overflow:auto; border-color:lightgray; padding-left:12px;padding-right:12px; padding-top:12px;padding-bottom: 12px;margin:10px">
<table style="width:80%; display: inline-block; vertical-align: top; ">
    <tr>
        <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td>
    </tr>
    <tr>
        <td style="width:18%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i></td>
        <td style="width:20%; font-size:large; padding-left: 6px"><i>Result</i></td>
        <td style="width:20%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i></td>
        <td style="width:20%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i></td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>
    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>
</table>
<table style="width:20%; display: inline-block; vertical-align: top; border-left: dashed">
    <tr> </tr>
    <tr>
        <td style="text-align: center">Positive Performance Stats </td>
    </tr>
    <tr>
        <td style="text-align: center"> Cars: 91% </td>
    </tr>
    <tr>
        <td style="text-align: center"> Buses: 93% </td>
    </tr>
    <tr>
        <td style="text-align: center">Planes: 38% </td>
    </tr>
    <tr>
        <td style="text-align: center">Minivans: 50% </td>
    </tr>
    <tr>
        <td style="text-align: center">
            Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.
            Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.
        </td>
    </tr>
</table>
</div>

</body>
</html>

Upvotes: 3

Views: 2329

Answers (3)

Matt Cremeens
Matt Cremeens

Reputation: 5151

You could try not making a div inside a div, but change the divs to li and have them not be inside each other. Like so

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <ul>
    <li id="ResultDetails" style="display: inline-block; border:solid; border-width:2px;  border-color:lightgray; padding-left:12px;padding-right:12px; padding-top:12px;padding-bottom: 12px;margin:0px">
      <table style="width:75%">
        <tr>
          <td style="font-family:Calibri; font-size:large;     color:midnightblue; text-align:left"><b>RESULT DETAILS</b>
          </td>
        </tr>
        <tr>
          <td style="width:25%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i>
          </td>
          <td style="width:25%; font-size:large; padding-left: 6px"><i>Result</i>
          </td>
          <td style="width:25%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i>
          </td>
          <td style="width:25%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i>
          </td>
        </tr>

        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>

        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>

        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>

        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>
        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>
      </table>
    </li>
    <li id="PPV" style="width:25%; border-left: dashed; display: inline-block; align-content: center;">
      Positive Performance Stats
      <br>Cars: 91%
      <br>Buses: 93%
      <br>Planes: 38%
      <br>Minivans: 50%
      <br>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum, lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
    </li>
  </ul>

Upvotes: 0

Pranav
Pranav

Reputation: 446

You can add the table inside a div(say div1) and set the width if the div to 75% and the width if the table to 100%. For the div(say div2) which needs to float to right side of the div1 set the width less than 25% because the padding given to outer div. for both div1 and div2 set float property to left. You can see the below code

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="ResultDetails" style="border:solid;border-width: 2px;border-color:lightgray;padding-left: 1%;padding-right: 1%;padding-top: 1%;padding-bottom: 1%;margin: 1%;float: left;width: 96%;">
   <div style="
    float: left;
    width: 75%;
"><table style="width:100%;">
    <tbody><tr>
        <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td>
    </tr>
    <tr>
        <td style="width:25%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i></td>
        <td style="width:25%; font-size:large; padding-left: 6px"><i>Result</i></td>
        <td style="width:25%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i></td>
        <td style="width:25%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i></td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>
    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>
  </tbody></table></div>
<div id="PPV" style="width: 24%;border-left: dashed;display: inline-block;align-content: center;float: left;">
    Positive Performance Stats <br>
    Cars: 91% <br>
    Buses: 93%<br>
    Planes: 38%<br>
    Minivans: 50%<br>
    Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum, lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
</div>
</div>


</body></html>

Upvotes: 0

Jasper
Jasper

Reputation: 75993

If you float the table to the left you get close to what you want. You will also need to deal with the border you've placed on the div since it adds width to the div. You can either tell the browser to include the border in the width calculation or remove the border.

E.g.

table {
    float : left;
}

#PPV {
    box-sizing : border-box;
}

Demo: https://jsfiddle.net/769k6zmd/2/

If the table is taller than the div to the right you'll need to add overflow:auto to the parent div because the floated table will overflow the parent div.

Information on box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Upvotes: 1

Related Questions