Why won't my columns line up correctly in HTML

Question

Here is the JSFiddle that shows the problem.

The columns are both a width of 48% (because of the padding I have set). I used Inspect Element in Chrome to see the borders and they should both fit fine.

I attempted to float each column but for some reason it messed with the stylings.

This is the particular section of code not lining up correctly:

<div id="main">
      <div id="leftColumn">
        <h1>Education</h1>
        <h3 class="small">The best preparation is a two-year associate degree in an applied science (AAS) program designed to prepare students for a career in chemical technology.
         College offers an associate of applied science for chemical technology. This degree requires completion of a minimum of 62 credit hours.
          College prepares students with skills necessary to go immediately into the workforce. </h3>
        <br>
        <h2 class="thick">Example of Classes for AAS in<br>
          Chemical Technology</h2>
        <table>
          <tr>
            <th>Course</th>
            <th>Class</th>
            <th>Credits</th>
          </tr>
          <tr>
            <td>BIO 101</td>
            <td>Cellular Biology</td>
            <td>4</td>
          </tr>
          <tr>
            <td>BIO 130</td>
            <td>Microbiology</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 120</td>
            <td>General Chemistry I</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 130</td>
            <td>General Chemistry II</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 220</td>
            <td>Organic Chemistry I</td>
            <td>5</td>
          </tr>
          <tr>
            <td>CHM 230</td>
            <td>Organic Chemistry II</td>
            <td>5</td>
          </tr>
          <tr>
            <td>CHM 250</td>
            <td>Chemical Instrumentation</td>
            <td>4</td>
          </tr>
          <tr>
            <td>ENG 110</td>
            <td>College Writing I</td>
            <td>3</td>
          </tr>
          <tr>
            <td>ENG 127</td>
            <td>Technical Writing</td>
            <td>3</td>
          </tr>
          <tr>
            <td>MATH 150</td>
            <td>College Algebra</td>
            <td>4</td>
          </tr>
          <tr>
            <td>MATH 152</td>
            <td>Trigonometry</td>
            <td>3</td>
          </tr>
          <tr>
            <td>MATH 220</td>
            <td>Probability and Statistics</td>
            <td>4</td>
          </tr>
          <tr>
            <td>PHY 100</td>
            <td>Fundamentals of Physics</td>
            <td>4</td>
          </tr>
          <tr>
            <td />
            <td>Wellness/Physical Education</td>
            <td>2</td>
          </tr>
          <tr>
            <td />
            <td>Program Elective Courses</td>
            <td>3</td>
          </tr>
          <tr>
            <td />
            <td>Political Science</td>
            <td>3</td>
          </tr>
          <tr>
            <td />
            <td>Social Science</td>
            <td>3</td>
          </tr>
        </table>
          <div class="tableFoot">
            <p class="grey italic">Minimum Total Credits: 62</p>
          </div>
      </div>
      <div id="rightColumn">
        <h1><span class="thin">Transfer</span> Programs</h1>
        <table>
          <tr>
            <th>Course</th>
            <th>Class</th>
            <th>Credits</th>
          </tr>
        </table>
      </div>
    </div>

And the CSS:

body {
  background-color: #00a6da;
  margin: 0;
  padding: 0;
}

/* Define font stylings */
.grey {
  color: grey;
}

.italic {
  font-style: italic;
}

.thick {
   font-weight:bold;
}

.thin {
 font-weight:normal;
}
/* Main stylings for the site sets margin, width, font, and background color */
#main {
  width:80%;
  margin-left:auto;
  margin-right:auto;
  font-family: Arial, Verdana, Hevetica, sans-serif;
  background-color: white;
  margin-top: 60px;
}

/* Define Styles for the Left and Right Columns */
h1 {
  margin-top: 70px;
  color: #00a6da;
  text-align: center;
  width: 80%;
}

#leftColumn {
  width: 48%;
  margin-left: 10px;
  display: inline-block;
}

#rightColumn {
  width: 48%;
  display: inline-block;
  margin-right: 10px;
}

/* Define style for table footer */
#leftColumn h3.small {
  font-size: 85%;
  width: 80%;
  padding: 5px;
}
.tableFoot {
  text-align: center;
  margin-left: 60px;
  width: 80%;
}
/* Define the styles for the Table in the Left Column */
table {
  width: 80%;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}
#leftColumn td:not(:last-child), #leftColumn th:not(:last-child) {
  text-align: left;
}

#leftColumn td:last-child {
  text-align: right;
  padding-right: 15px;
  width: 10%;
}

#leftColumn tr:not(:first-child):not(:last-child) {
  width: 25%;
}

#leftColumn tr:first-child {
  width: 10%;
}

#leftColumn tr {
  border-bottom: 2px solid black;
}

Also if you have any tips for the design of the website I'd be glad to here them. This is my first time working extensively with HTML, I took a semester of HTML3/4(one of the older ones) in High School.

You need to put a real [mcve] in your question. Don't keep half of it on a third party site. — Quentin, Mar 01 '17 at 20:57
Not clear what your question is. What do you want it to look like? — DCR, Mar 01 '17 at 21:02
The problem is that your table is wider than your `#leftColumn` div. `display: table-cell` (the default for ``) doesn't obey the `width` attribute, so you can't actually force the table to be contained within that column. You may want to look into using divs instead of a table, or shrinking the contents of the table. Changing the actual HTML is preferable though, as it gives you control over mobile display. — Obsidian Age, Mar 01 '17 at 21:02
@DCR If you look at the JSFiddle you can see Transfer Programs at the Bottom I want that to be lined up with Education but in a right column. — user2311215, Mar 01 '17 at 21:07
@ObsidianAge Can you expand on what you mean by "shrinking the contents of the table"? — user2311215, Mar 01 '17 at 21:08
By shrinking the contents of the table I mean either using a smaller font or using abbreviations. Anything to give it less width. Again though, you should just turn it into a `
` rather than a table and work with the formatting from there -- you'll be able to give widths to whatever element you want without issue, and even use `display: table` if you **really** want ;) — Obsidian Age, Mar 01 '17 at 21:10
@DCR I'm not sure why, but that fixed it. I understand what float does, such as how in my post I said that I tried floating each column, for some reason floating the left column makes stylings mess up but floating only the right column works as desired. Not sure why I can't float both to their respective directions but a solution is a solution. If you post that as an answer I will give you the answer credit. — user2311215, Mar 01 '17 at 21:27

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

Add float:left; to #leftColumn and #rightColumn and add overflow: auto; to #main.

Overflow:auto works when you add it to the parent container because it does a clearfix on the container and prevents it from collapsing on itself when it's contents are using float. You can read more about it here: What methods of ‘clearfix’ can I use?

edited May 23 '17 at 12:09

Community

1
1

answered Mar 01 '17 at 22:09

Matthew T Rader

176
1
9

the `overflow:auto` is what really changed things, because I had already tried float: left and it worked but it messed with stylings, and adding overflow:auto made it work so that I could float both (DCR commented on my post and if I only float the rightColumn it works) – user2311215 Mar 01 '17 at 22:42
Answers that say what to do without explaining why are not as useful. It's likely only helpful to the person who asked the question, but at Stack Overflow, we strive to make posts useful to anyone who may have a similar question. – Ruan Mendes Mar 01 '17 at 22:55

Why won't my columns line up correctly in HTML

1 Answers1