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
Ashley Shay
8,664 PointsCan anyone help me understand what's going on with this layout?
A template layout I'm using has me perplexed. There are four main sections, we'll call them A, B, C and D. A and B are the top two sections in a row together, C and D are the bottom two in a row together.
Sections C and D are always lined up by their top line... which becomes a problem when A expands with content to be a taller height than section B, naturally forcing C down ... but also unnaturally forcing section D down... and thereby creating a vertical gap between B and D as large as whatever the difference in height happens to be.
Does this sound like a grid? I initially tried just setting a negative margin to cover the gap, but that doesn't really work when the content of Section A changes all the time. Hope it makes sense..
Ashley Shay
8,664 PointsYes, that's what I'm trying to achieve. I just can't tell where the layout is even coming from to modify it...
<section id=“A”>
<div class="lines-top">
<ul class="container">
<li class="title">
<h2><a href="http://…” target="_blank">Latest Download</a></h2>
</li>
<li>
<ul class="details">
<li>Title</li>
<li>Author</li>
<li>Date</li>
</ul>
</li>
<li>
<ul class="options">
<li class="listen"><a onClick="home_sermon_popup()" href="#">Listen</a></li>
<li class="download"><a href=“…”>Download</a></li>
</ul>
</li>
<li class="video">
</li>
</ul>
</div>
</section>
<section id=“B”>
<div class="lines-top"><div class="lines-bottom">
<h2 class="hide">Socialize</h2>
<ul>
<li class="likes"><a href="Your Facebook URL" target="_blank">Like us on<br /> Facebook</a></li> </ul>
</div></div>
</section>
<section id=“C”>
<h2>Our Mission & Vision</h2>
<p>Our mission is…</p>
</section>
<section id=“D”>
<h2>News & Announcements</h2>
<ol>
<li>
<span class="date">
<span class="day">4</span>
<span class="month">October</span>
</span>
<span class="title">
<span class="hide"> - </span>
<a href="http://…” >Event</a>
</span>
</li>
<li>
<span class="date">
<span class="day">14</span>
<span class="month">September</span>
</span>
<span class="title">
<span class="hide"> - </span>
<a href="http://..“ >Event</a>
</span>
</li>
</ol>
</section>
Jason Anello
Courses Plus Student 94,610 PointsDo you think that you can change your structure so that it's in columns?
Something like this:
<div>
<section id="A"></section>
<section id="C"></section>
</div>
<div>
<section id="B"></section>
<section id="D"></section>
</div>
This way "D": would always be directly under "B"
1 Answer
Kevin Korte
28,149 PointsYep, that sounds normal. Welcome to the CSS grid world. This is an issue Flexbox should fix for us. But as of late, there have only be jQuery solutions to deal with this issue.
Ashley Shay
8,664 PointsWhat jQuery solutions can be used?
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Ashley,
Is your goal then to always have D underneath B regardless of what's happening with A? It sounds like you need a column layout and not a row layout.
It may help to post the html for these 4 containers. Not all the children but just the 4 main containers and whether they have a container themselves.