Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Brian Hudson
14,785 PointsDifficulty going from two columns back to one column
I'm working on a page that is composed almost entirely of tables. Going down the page from top to bottom, I want it to be laid out in a one column (full page width), two column, then back to one column fashion.
The problem I'm having is that the third section (back to one column) isn't behaving. The content looks like it's still part of the left column in the two-column portion of the page. It's supposed to be back to full-page width, and is in its own <div> that is absent the class attributes (primary, secondary col) which defined the two separate columns of the previous <div>. Does that make sense?
So, since it's in a new <div>, any ideas why this third section is behaving as if it's part of the previous <div>?
Brian Hudson
14,785 PointsHTML (partial):
<div class="secondary col">
<h3><i>Oxygen</i></h3>
<table>
<tr>
<td>Crew O<sub>2</sub> limits</td>
<td>See table pg. A-30</td>
</tr>
</table>
<h3><i>APU</i></h3>
<table>
<tr>
<td>Min APU oil quantity before start</td>
<td>LOW OIL LEVEL not displayed</td>
</tr>
<tr>
<td>APU ops with "LOW OIL LEVEL"</td>
<td>10 hours</td>
</tr>
<tr>
<td>APU start cycles</td>
<td>3 starter motor duty cycles, 60 min off</td>
</tr>
<tr>
<td>Max N (ECAM display)</td>
<td>107%</td>
</tr>
<tr>
<td>Max EGT</td>
<td>675℃</td>
</tr>
<tr>
<td>Max EGT starting < 35,000 ft</td>
<td>1090℃</td>
</tr>
<tr>
<td>Max EGT starting > 35,000 ft</td>
<td>1120℃</td>
</tr>
<tr>
<td>Max alt to power elec and bleed air</td>
<td>22,500 ft (1 pck) / 15,000 (2 pcks)</td>
</tr>
</table>
</div>
<!-- this next section is supposed to be back to one column, full-page width-->
<div>
<h3 style="text-align: center"><i>Engine</i></h3>
<table>
<tr>
<td>EGT takeoff and go around</td>
<td>635℃ 5 mins (10 mins E/O) (A320)</td>
</tr>
<tr>
<td></td>
<td>650℃ 5 mins (10 mins E/O) (A321)</td>
</tr>
</table>
</div>
And the CSS:
hr {
margin-bottom: -15px;
}
.oplimits li {
list-style-type: none;
}
/*.container {
border: solid black;
}*/
.primary {
float: left;
}
.secondary {
float: right;
}
.table {
text-align: left;
}
10 Answers
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 Points<style type="text/css">hr { margin-bottom: -15px; } .oplimits li { list-style-type: none; } /*.container { border: solid black; }*/ .primary { float: left; } .secondary { float: right; } .table { text-align: left; }
/*This is added for your first col in that section*/
.first {
float: right;
}
/*This is for responsive web page*/
* {
box-sizing: border-box;
}
</style>```
```html
<div class="secondary col">
<h3><i>Oxygen</i></h3>
<table>
<tr>
<td>Crew O<sub>2</sub> limits</td>
<td>See table pg. A-30</td>
</tr>
</table>
<h3><i>APU</i></h3>
<table>
<tr>
<td>Min APU oil quantity before start</td>
<td>LOW OIL LEVEL not displayed</td>
</tr>
<tr>
<td>APU ops with "LOW OIL LEVEL"</td>
<td>10 hours</td>
</tr>
<tr>
<td>APU start cycles</td>
<td>3 starter motor duty cycles, 60 min off</td>
</tr>
<tr>
<td>Max N (ECAM display)</td>
<td>107%</td>
</tr>
<tr>
<td>Max EGT</td>
<td>675℃</td>
</tr>
<tr>
<td>Max EGT starting < 35,000 ft</td>
<td>1090℃</td>
</tr>
<tr>
<td>Max EGT starting > 35,000 ft</td>
<td>1120℃</td>
</tr>
<tr>
<td>Max alt to power elec and bleed air</td>
<td>22,500 ft (1 pck) / 15,000 (2 pcks)</td>
</tr>
</table>
</div>
<!-- this next section is supposed to be back to one column, full-page width-->
<!-- Not sure if this is what your looking for -->
<div class="first col">
<h3 style="text-align: center"><i>Engine</i></h3>
<table>
<tr>
<td>EGT takeoff and go around</td>
<td>635℃ 5 mins (10 mins E/O) (A320)</td>
</tr>
<tr>
<td></td>
<td>650℃ 5 mins (10 mins E/O) (A321)</td>
</tr>
</table>
</div>
Brian Hudson
14,785 PointsBrandon thanks for the response. I just included the snippets you see here so you could get an idea of what I was going for. The whole of each file (html plus the two CSS files applied to this page) would be cumbersome to post on here.
I'm just looking for general ideas on what might cause the third section to behave as if the CSS styling for the "col" divs was being applied to it.
Brian Hudson
14,785 PointsAlso, not sure what the intent for this is?
/*This is added for your first col in that section*/
.first {
float: right;
}
My left column is floated already, though I didn't include it in my post. Am I missing something?
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsI am having trouble understanding exactly what you are looking for. Im willing to help you resolve your problem. What i believe it is you are saying is the div is acting as if there is a class attribute added to it?
Please correct me if i am wrong Thanks
Brian Hudson
14,785 PointsYes. I wish I could attach a screenshot. The page content should be laid out like this:
-
-
-
-
- -
- -
- -
- - - - - -
And instead that third section, on the bottom, which should be one-column, full page width, is being appended to one of the columns in the two-column section above it. Even though it's in it's own div with no class attributes applied. Does that make sense?
Brian Hudson
14,785 PointsLet's try this again. The page content should be laid out like this:
-
-
-
-
- -
- -
- -
- -
-
-
-
-
And instead that third section, on the bottom, which should be one-column, full page width, is being appended to one of the columns in the two-column section above it. Even though it's in it's own div with no class attributes applied. Does that make sense?
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsI believe this is what you are looking for?
secondary {width: 100%; margin: auto; float: right; } .table { text-align: left; }
/*This is added for your first col in that section*/
.first {
clear: both;
}
table, tbody, tr {
margin: auto;
}
/*This is for responsive web page*/
* {
box-sizing: border-box;
text-align: center;
}
Brian Hudson
14,785 PointsThank you Brandon. I really appreciate you taking the time to respond. Am having a little trouble following, sorry!
I already have a clearfix applied to the parent of the column divs, shouldn't that accomplish the same thing as .first {clear: both;} ?
What are table, tbody, and tr? Are those class attributes?
The box-sizing property is applied in my main.css page.
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsNot a problem, hopefully we will get this fixed for you.
As for the .first {clear:both;} yes if you have it applied to the div elements it will do the same. The table, tbody, tr part are elements in your page. I set them to margin:auto; so it would stay responsive and fit the way you were describing you wanted it.
Lets try this do you have the site online, where i could look at it?
Brian Hudson
14,785 PointsUnfortunately no, it's not live yet.
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsHmm well i can send you my email address and you can send me it that way?
Brian Hudson
14,785 PointsI really appreciate your help Brandon, let me try to resolve this on my own a bit longer, if I can't find a solution I'll take you up on that.
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsAlright not a problem Brian. Thank you.
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsBrandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsDo you have the code?