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

William Stoddart
PLUS
William Stoddart
Courses Plus Student 6,892 Points
Posted by William Stoddart
William Stoddart
Courses Plus Student 6,892 Points

Floats for three columns & links underlined

Hi there, from the Lake Tahoe Project:

I've managed to float three columns using float: left; and adjusting the width and margin px size. However, there seems to be too much space to the right and the columns don't appear centered. Any ideas on a fix would be appreciated!? Should I use % rather than px?

Probably a stupid question, but how do I remove the underline on the links - specifically 'Find out more' and 'See the wildlife'.

HTML:

<!DOCTYPE html> <html> <head> <title>Wilderness to Plate</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width-device-width"> </head> <body> <header id="top"class="main-header"> <span class="title">Journey from Wilderness to Plate</span> <h1>Stockholm, Sweden</h1> <img class="arrow" src="img/arrow.svg" alt="Down Arrow"> </header>

<div class="primary-content t-border"> <p class="intro"> Wilderness to Plate does exactly what the name suggests. We take you to some of the most beautiful areas in the world to hunt and catch a variety of tasty game. We can take you through the journey from the hunt, the kill, field dressing, hanging, butchering, packaging and finally cooking. </p> <a class="callout" href="#more">Find out more</a>

<div class="wildlife">
  <h2>The Wildlife</h2>
  <p>
  Discover majestic <a href="#Elk">Elk</a>, track <a href="#Red Deer">Red Deer</a>, <a href="#Fallow Deer">Fallow Deer</a> and <a href="#Roe Deer">Roe Deer</a> or wait for the twilight and listen for the loud grunt of the approaching <a href="#Wild Boar">Wild Boar</a>. 
 </p>

</div> <!---End .wildlife -->

 <a class="callout" href="#wildlife">See the Wildlife</a>

</div> <!---End .primary-content--->

<div class="secondary-content t-border group"> <div class="hunt"> <img src="img/IMG_0788.jpg">
<h3>Types of Hunt</h3> <p> Experience stalking, driven, calling and flushing hunts. </p> <ul> <li><a href="#Stalking">Stalking</a></li> <li><a href="#Driven">Driven</a></li> <li><a href="#Calling">Calling</a></li> <li><a href="#Flushing">Flushing</a></li> </ul> </div>

  <div class="kill">
    <img src="img/IMG_0700.JPG">
    <h3>After the Kill</h3>
     <p>
  Once the animal has been killed there is still much work to be done. The animal must be gutted, hung, skinned, butchered, meat packaged and finally cooked. We guide you through the whole process. 
    </p>
     <ul>
      <li><a href="#Gutting">Gutting</a></li>
      <li><a href="#Hanging">Hanging</a></li>
      <li><a href="#Skinning">Skinning</a></li>
      <li><a href="#Butchering">Butchering</a></li>
      <li><a href="#Packaging">Packaging</a></li>
      <li><a href="#Cooking">Cooking</a></li>
    </ul>
 </div>

 <div class="recipes">
   <img src="img/IMG_0756.JPG">
  <h3>Recipes</h3>
  <p>
  You've gone through the trouble of learning about nature, the craft of the hunt and meat preparation, now you need some ideas for cooking you well earned meal. 
  </p>
   <ul>
   <li><a href="#Cuts - cooking method">Cuts and their Cooking Methods</a></li>
   <li><a href="#Slow Cooking">Slow cooking</a></li>
   <li><a href="#Offal">Offal</a></li>
   <li><a href="#Child friendly recipes">Child friendly recipes</a></li>
   </ul>
</div>

</div> <!--End .secondary-content--->

<footer class="main-footer"> <p> All rights reserved to Wilderness to Plate </p> </footer> </body> </html>

CSS:

/* Web Fonts -------------------- */

@font-face { font-family: 'Abolition Regular'; src: url('../fonts/abolition-regular-webfont.eot'); src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/abolition-regular-webfont.woff') format('woff'), url('../fonts/abolition-regular-webfont.ttf') format('truetype'); }

/* Base Stylers */

  • { box-sizing: border-box; }

body { color: #878787; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1, h2 { font-family: 'Abolition Regular', Helvetica, Arial, sans-serif; }

h1 { font-size: 5.625rem; color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; text-shadow: 0 1px 1px rgbe(0,0,0, .8); margin: 12px 0 0; }

h2 { font-size: 3.3125em; font-weight: normal; line-height: 1.1; margin: 0 0 .5em; }

h3 { font-size: 1.25em; color: #48525c; line-height: 1.2; margin-bottom: 1.7em; }

img { max-width: 100%; margin-bottom: 20px; border-radius: 10px; }

ul { margin: 30px 0; }

/* Pseudo-classes-----------------*/

a: link { color: rgb(255, 169, 73); text-decoration: none; }

a: vistied { color: lightblue; }

a: hover { color: rgba(255, 169, 73, .4); }

a: active { color: lightcoral; }

/* Main Styles */

.main-header { padding-top: 170px; height: 850px; background: linear-gradient(#ffa949, transparent 65%), linear-gradient(0deg, #fff, transparent), #ffa949 url('../img/IMG_0786.JPG') no-repeat center; background-size: cover; }

.title { color: white; font-size: 1.625rem; letter-spacing: .65em; font-weight: 200; border-bottom: 2px solid; padding-bottom: 10px; }

.intro { font-size: 1.25em; line-height: 1.6; }

.primary-content, .main-header, .main-footer { text-align: center; }

.primary-content { padding-top: 25px; padding-bottom: 95px; }

.secondary-content { padding-top: 80px; padding-bottom: 70px; border-bottom: 2px solid #dfe2e6; }

.callout { font-size: 1.25em; border-bottom: 3px solid; padding: 0 9px 3px; margin-top: 20px; display: inline-block;
}

.main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: 10px solid #ffa949; }

.t-border { border-top: 2px solid #dfe2e6; }

/* Layout Styles */

.primary-content, .secondary-content { width: 75%; padding-left: 50px; padding-right: 50px; margin: auto; max-width: 960px; }

.wildlife { color: white; text-align: left; padding: 18% 24%; border-top: 10px solid #ffa949; margin: 105px 0 60px; background: #434a52 url('../img/sweden_elk.jpg') no-repeat center; background-size: cover; box-shadow: inset 0 0 50px 10px rgbe(0,0,0 1); border-radius: 10px; }

.arrow { width: 50px; margin-top: 150px; }

/* Floated Columns-----------------*/

.hunt, .kill, .recipes { width: 33%; }

.hunt { float: left; width: 200px; margin: 20px; }

.kill { float: left; width: 200px; margin: 20px; }

.recipes { float: left; width: 200px; margin: 20px; }

/* Float Clearfix--------------*/

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

@media (max-width: 1024px) { .primary-content, .secondary-content { width: 90%; } .wildlife { padding: 10% 12%; margin: 50px 0 20px; } }

@media (max-width: 768px) { .primary-content, .secondary-content { width: 100%; padding: 20px; border-top: none; }
.main-header { max-height: 380px; padding: 50px 25px 0; } .title { font-size: 1.3rem; border: none; } h1 { font-size: 5rem; line-height: 1.1; } .arrow { display: none; } .intro { font-size: 1rem; } .resorts, .tips { float: none; width: 100%; } .main-footer { padding: 20px 0; } }

1 Answer

Steven McKay Lowry
Steven McKay Lowry
2,015 Points
Steven McKay Lowry
Steven McKay Lowry
2,015 Points

Change the width of the columns using % (33% each, unless you intend to add padding/margins.)

On the element you wish to get rid of the underline, add 

Sorry, i didn't have the patience to look through all code, but from the sounds of it this is your issue.
William Stoddart
William Stoddart
Courses Plus Student 6,892 Points
William Stoddart
William Stoddart
Courses Plus Student 6,892 Points

Thanks Steven. Yep, I'd originally chosen the 33% solution, but then the third column gets clipped off the row and displays below the first column. This can be fixed by adjusting the margin, but then the columns end up very close together. I think I've missed something simple.

Thanks for the text-decoration: none; Worked a treat - I'd completely forgotten about that property.

Steven McKay Lowry
Steven McKay Lowry
2,015 Points
Steven McKay Lowry
Steven McKay Lowry
2,015 Points

There could be other styling thats throwing the columns off, best to look into it using the inspect function on your browser.

Please up vote my previous response, thanks!