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

CSS

Carl Odiloff
Carl Odiloff
2,222 Points
Posted by Carl Odiloff
Carl Odiloff
2,222 Points

hey guys, I can't figure out what's wrong with my float code, I wrote everything correctly. Nothing is happening.

Here are my codes:

.three-a { float: right; }

.four-a{ float: left; }

I also added Float clearfix : .group-article:after { content:""; display: table; clear: both; }

but nothing worked.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Make a snapshot of your workspace and post the link to it. This allows others to try out your example and provide a more complete and accurate answer.

Also please provide a link to the course page you are working with.

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

For the floats to appear side by side, you just need to constrain the widths so they don't take up the entire window:

article { width: 50%; }

And for future issues, you can always create a workspace and upload your project into it.

Carl Odiloff
Carl Odiloff
2,222 Points
Carl Odiloff
Carl Odiloff
2,222 Points

hi Steven,

Thanks for your reply. Unfortunately, I can not send snapshot since I am not working on workspace instead I am working with ATOM editor, I did not know that workspace has this kind of feature. regarding my course, right now I am working on CSS basics.

However, I can attache here all of my codes regarding the problem:

HTML:

<section class="articles">
          <article class="three-a">
            <h2>Artificial intelligence finds disease-related genes</h2>
             <img src="img/article-3.jpg" alt="Genetic sequencing illustration" title="An artificial neural network can reveal patterns in huge amounts of gene expression data, and discover groups of disease-related genes">
             <p class="author-p"><strong>By Linköping University</strong></p>
             <p><small><em>September 16, 2019</em></small></p>
             <p>An artificial neural network can reveal patterns in huge amounts of gene expression data, and discover groups of disease-related genes. This has been shown by a new study led by researchers at Linköping University, published in Nature Communications.</p>
             <a class="callout" href="articles 2020/2020 april/article.html">Read more</a>
          </article>
          <article class="four-a">
            <h2>Removing the novel coronavirus from the water cycle</h2>
             <img src="img/article-4.jpg" alt="Genetic sequencing illustration" title="Researchers have called for more research to determine the best ways to keep SARS-CoV-19 out of the water cycle">
             <p class="author-p"><strong>By University of California</strong></p>
             <p><small><em>April 5, 2020</em></small></p>
             <p>Scientists know that coronaviruses, including the SARS-CoV-19 virus responsible for the COVID-19 pandemic, can remain infectious for days -- or even longer -- in sewage and drinking water.</p>
             <a class="callout" href="articles 2020/2020 april/article.html">Read more</a>
        </section>

CSS:

.three-a { float: right; }

.four-a{ float: left; }

/* Float Clearfix */

.group-article:after { content:""; display: table; clear: both; }