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

Posted by Luciano Oliveira
.a{fill-rule:evenodd;}techdegree
Luciano Oliveira
Front End Web Development Techdegree Student 11,548 Points

Websites > Accessibility > Websites > CSS: Part 3

I have a question,

I am about to wrap up HTML/CSS and this is so basic yet, I am not able to solve it.

on the widget inc website, if I add more text to the div id="about" paragraph, my other paragraph p id="compare" goes to the right even though I have it set to float: left.

Here is the excerpt of the CSS code, any help would be appreciated.

Here is a link to the image for visual: http://i782.photobucket.com/albums/yy101/Oliveira500/Learning/question.jpg

 #about {
font-size: 1.3em;
margin: 20px 0px;
float: left;
}

#about p {
background: #d2b14e;
padding: 40px;
font-style: italic;
font-size: 0.9em;
}

#cta {
margin: 20px 0;
}

#cta #just_10 {
 font-weight: bold;
 margin-right: 20px;
 }



/*********************
Table
*********************/

#compare {
 float: left;
  font-weight: bold;
 }

3 Answers

Caroline Hagan
Caroline Hagan
12,612 Points

Try taking float off everything ... the only thing that needs to float on that page, (if at all) is the image of the cog, which you can set to float:right

Also, if you switch all your IDs to Classes, it will save a lot of rewriting as you go on building.

Less of this....

#product {}
#product p {}
#product p a {}
#product p#different {}
#product p { font: 12px!important;}

More of this...

.product {}
.paragraphstyle {}
.linkstyle {}
.linkstyle:hover {}
Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Unless you want to float those items around or next to something, then you probably don't need float:left on them to begin with.

Try taking it off and see if that makes a difference?

Luciano Oliveira
.a{fill-rule:evenodd;}techdegree
Luciano Oliveira
Front End Web Development Techdegree Student 11,548 Points

unfortunately, it does not solve the problem.

here is a fiddle with the whole code.

http://jsfiddle.net/Lucky500/U8Wr9/

Luciano Oliveira
seal-mask
.a{fill-rule:evenodd;}techdegree
Luciano Oliveira
Front End Web Development Techdegree Student 11,548 Points
Luciano Oliveira
.a{fill-rule:evenodd;}techdegree
Luciano Oliveira
Front End Web Development Techdegree Student 11,548 Points

this is the only thing that helped, not sure if is correct though,

#compare {
 clear: both;
 font-weight: bold;
}