CODEWITHSUNDEEP
htmlcss
A. Abramov
A. Abramov

Reputation: 1865

Vertical aligning a table with a div

I have two elements, a table and a div.

.LogoDiv {
  clear: both float: right;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  left: 500px;
  top: 100px;
  width: 200px;
  height: 300px;
  margin-top: 5%;
  margin-left: 85%;
  background-color: #003366;
}
.Logo {
  margin-top: 8%;
  margin-bottom: 8%;
  height: 84%;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}
.SubHeadTable {
  clear: both;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  margin-left: 15% margin-right: 15% margin-top: 20px;
  margin-bottom: 10px;
  background-color: #003366;
}
.SubHeadTitle {
  font-family: 'HurtMold', Fallback, sans-serif;
  color: #219c78;
  font-size: 28px;
}
.SubHeadText {
  font-family: 'Oregon', Fallback, sans-serif;
  color: 28a999;
  font-size: 18px;
}
.SubHeadTableRow {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 10px;
}
.SubHeadTableCell {
  margin: 2px;
}
<table class="SubHeadTable">
  <tr class="SubHeadTableRow">
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
  </tr>
  <tr class="SubHeadTableRow">
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
  </tr>
</table>


<div class="LogoDiv">
  <img src="http://orig07.deviantart.net/312a/f/2010/241/c/3/my_logo_by_hamza_design-d2xjc1a.jpg" class="Logo">
</div>

I want to put both the div and the table in the same line, but I can't. Whenever I put one before the other in HTML, it pushes the other down, like so:

The situation

Why is that, and how do I make them align?

Upvotes: 0

Views: 77

Answers (3)

Pratap
Pratap

Reputation: 402

Before you use display:inline or float:left properties, the styles margin-left: 85%; for element .LogoDiv and margin-left: 15% margin-right: 15% for .SubHeadTable must be reconsidered.

According to the css, the total width of the screen is not sufficient for both the elements. The margin-left for both the elements occupies 100% of the screen. Please check the Box model in CSS.

The CSS is also malformed.

Upvotes: 2

MintWelsh
MintWelsh

Reputation: 1259

I'm a little confused about how you want them positioned, however wrapping the table in a containing div, can help position it jsfiddle

HTML

<div class="tableholder">
<table class="SubHeadTable">
  <tr class="SubHeadTableRow">
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
  </tr>
  <tr class="SubHeadTableRow">
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
  </tr>
</table>
        </div>


<div class="LogoDiv">
  <img src="http://orig07.deviantart.net/312a/f/2010/241/c/3/my_logo_by_hamza_design-d2xjc1a.jpg" class="Logo">
</div>

and CSS

.LogoDiv {
  clear: both float: right;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  left: 500px;
  top: 100px;
  width: 200px;
  height: 300px;
  margin-top: 5%;
  margin-left: 85%;
  background-color: #003366;
}
.Logo {
  margin-top: 8%;
  margin-bottom: 8%;
  height: 84%;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}
.SubHeadTable {
  clear: both;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  margin-left: 15% margin-right: 15% margin-top: 20px;
  margin-bottom: 10px;
  background-color: #003366;
}
.SubHeadTitle {
  font-family: 'HurtMold', Fallback, sans-serif;
  color: #219c78;
  font-size: 28px;
}
.SubHeadText {
  font-family: 'Oregon', Fallback, sans-serif;
  color: 28a999;
  font-size: 18px;
}
.SubHeadTableRow {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 10px;
}
.SubHeadTableCell {
  margin: 2px;
}
.tableholder{float:left;}

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46539

Just float the table to the left, and remove the first line (the one with the missing semicolon) from the CSS of the div.

.LogoDiv {
  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  left: 500px;
  top: 100px;
  width: 200px;
  height: 300px;
  margin-top: 5%;
  margin-left: 85%;
  background-color: #003366;
}
.Logo {
  margin-top: 8%;
  margin-bottom: 8%;
  height: 84%;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}
.SubHeadTable {
  float:left;
  clear: both;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  margin-left: 15% margin-right: 15% margin-top: 20px;
  margin-bottom: 10px;
  background-color: #003366;
}
.SubHeadTitle {
  font-family: 'HurtMold', Fallback, sans-serif;
  color: #219c78;
  font-size: 28px;
}
.SubHeadText {
  font-family: 'Oregon', Fallback, sans-serif;
  color: 28a999;
  font-size: 18px;
}
.SubHeadTableRow {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 10px;
}
.SubHeadTableCell {
  margin: 2px;
}
<table class="SubHeadTable">
  <tr class="SubHeadTableRow">
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
  </tr>
  <tr class="SubHeadTableRow">
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
  </tr>
</table>


<div class="LogoDiv">
  <img src="http://orig07.deviantart.net/312a/f/2010/241/c/3/my_logo_by_hamza_design-d2xjc1a.jpg" class="Logo">
</div>

Upvotes: 1

Related Questions