Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

cordarro gordon
cordarro gordon
621 Points

I'm having problem aligning my list element, with a list tag inside of it.

Can some one please tell me why are my (class="productselection") are misaligned ?

The code

Grainberry

<header> <img class="logo" src="images/logo.png" alt="HTML5 Icon" width="200" heigth="200"> </div> <nav> <ul> <li><a href="portfolio.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="product.html">Product</a></li> <li><a href="eatingplans.html">Eating Plans</a></li> <li><a href="mediacenter.html">Media Center</a></li> <li><a href="store.html">Store</a></li> <li><a href="blog.html">Blog</a></li> </ul> </nav> </header> <section> <div class="wrapper"> <h1 id="caption">ANTIOXDANTS<h1> <p> We grow our own high antioxidant grain in the spring and harvest it late summer or early fall. We mill the Grain Berry® high antioxidant grain and add it to our whole grain wheat, in the case of our delicious Bran Flakes or Pancake Mix and Muffin Mix. We add the Grain Berry® Bran to our whole grain delicious oats in the case of our Toasted Oats cereal and Honey Nut and Apple Cinnamon varieties. Why do we grow high tannin Grain Berry® grain? Because we cannot buy it and it's the best way we know to boost the natural antioxidant content of our products more than any other grain or any otherfruit or vegetable. </p> </div> </section> <div id="productframe"> <ul> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> </ul> </div> </section> <footer> <p>&Copy; 2014 Cordarro Gordon</p> </footer>

CSS

*{ padding:0px; margin:0px; } @font-face { font-family:Rockwell; src:url("Rockwell"); }

p { color:white; font-family:Rockwell; font-size:14px; font-weight: normal; }

h1{ color:white; font-family:Rockwell; font-weight: 200; font-size:60px; font-kerning:10px; }

h3{ color:#666666; font-family:Rockwell; font-weight: 200; font-size:40px; }

h3{ color:#666666; font-family:Rockwell; font-weight: 100; font-size:20px; }

header{ background-color:white; height:150px; }

img.logo{ display:block; margin-left:auto; margin-right:auto; margin-bottom:30px; position:relative; top:20px; padding-bottom:30px; }

nav{ background-color:#b00539; width:100%; height:80px; display:block; }

ul{ display:block; text-align:center; margin-top:-20px;

}

li,a{ text-decoration:none; color:white; font-family:Verdana; display:inline; padding-left:20px; font-size:15px; text-align:center; position: relative; top:12px; }

footer{ background-color:yellow; display:block; margin-top:200px; }

section{ width:100%; height:560px; margin-top:70px; background-image:url(../Images/Wrapper_background.jpg) } .wrapper{ width:50%; margin-left:auto; margin-right:auto; position:relative; top:70px; }

h1,caption{ text-align: center; padding-top:30px;

} .wrapper p{ line-height: 200%; position:relative; } productframe{

width:100%; height:338px; background-color:none; margin-top:20px; } .productselection{ background-color:none; width:25%; height:338px; display:inline; float:left; }

.productselection:hover { background: rgba(0,0,0,0); color: #e1c408; box-shadow: inset 0 0 0 3px #e1c408; }

.newicon{ margin-left:auto; margin-right:auto; display:block; position:relative; top:-18px; padding-top:5px; } p viewbnt{ margin-left: auto; margin-right: auto; }

.viewbnt{ background:#82ca9c; width:30%; height:36px; margin: auto; position: relative; top:-15px; border-radius: 5px 5px 5px 5px; } h4,view{ position: relative; top:7px; color:white; }

h3,category{ color:#666666; font-family:Rockwell; font-weight: 200; font-size:40px; position: relative; top:-25px; }

1 Answer

Steven Parker
Steven Parker
221,326 Points

You've got a few odd things going on here. Basically, I think your misalignment is a result of the fact that you have fixed-size objects inside relative-sized containers, and they are floated, and there's too many of them to fit on a line inside their container.

I'd start by eliminating the floats. The elements are inline already so they will flow on a line (as many as will fit).

Here's some general observations and suggestions that may be helpful (mostly unrelated):

  • you have two different definitions for h3 - combine them or eliminate one
  • consider inline-block instead of inline for DIVs
  • should the LIs after the paragraph be inside a UL?
  • you have selectors like h4,view and h1,caption (commas) did you mean h4.view and h1.caption (periods)?
  • you have a selector for li,a (dual selector). Did you mean li a (descendant selector)?
  • you have relative (25%) containers around fixed (180px) objects causing overflow. Perhaps you'd want to put minimums on the containers? (min-width: 180px)