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 Kit Howlett
Kit Howlett
2,428 Points

Header Positioning Issue (Floats)

Hey All,

Im not sure how to solve this issue I am facing at the moment. I am trying to take a mock up I made in photoshop and create the site using my HTML and CSS knowledge. However I have become a bit stuck. Basically I want my logo to site to the right of my header and then the login text to sit directly to the right of the logo. I have uploaded this image on imgur of the design and how I want it to look. URL: http://imgur.com/D1itjXG

However I have only managed to build this so far. URL: http://imgur.com/LJIy391

The header size seems to have collapsed and the login text isn't on the same line as the logo. Does anyone know the css I need to make it look like the design?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clean Recruit - Businesses</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css">
  <link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
  <div class="nav_wrapper">
    <nav class="main_nav">
      <img class="main_logo" src="img/CleanRecruitLogo.png">
      <div id="login">
        <h2>Log In</h2>
      </div>
    </nav>
  </div>
</body>
</html>

/* ------------------ Main Styles ------------------ */
body {
  background-color: #edecec;
}

/* ---- HEADER ---- */

.nav_wrapper {
  background-color: #2d90be;
  max-height: 116px;
}

.main_nav {
  margin: 0 auto;
  max-width: 1024px;
}

.main_logo {
  padding-top: 25px;
  max-width: 196px;
}

.image {
  margin: 0;
}

div #login{
  display: inline-block;
  height: 50px;
  border: 1px solid;
  float: right;

}

#login h2 {
  margin: 0;
}

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

For something like that, you might have better luck using the ::before psudo element to place the image. Here's an example using lorempixel for the image, since I don't have access to your lock icon.

div #login{
  display: inline-block;
  height: 50px;
  /* border: 1px solid; */ /* removed the border */
  float: right;
}

#login h2 {
  margin: 0;
  text-decoration: underline; /* added an underline */
}

/* added the image using the before psudo element (REMOVE the html img tag)*/
#login h2::before {
  content: url(http://lorempixel.com/16/16/);
  padding-right: 16px;
}

Let me know if that works for you. If not, I'll need to see your full code in order to try to get the positioning you want using floats alone. You can post a workspace snapshot, which would let you include your file structure and your image.

Kit Howlett
Kit Howlett
2,428 Points

Hi is it okay to share the workspace with you. Its just I think I would like to work out how else I could do it so I can also use it for future reference. Here is the link to my workspace https://w.trhou.se/jxctbikp4a

Thank you very much!

Kit Howlett
Kit Howlett
2,428 Points

I have made some changes since to the workspace and deleted the login bit but I put it just after the image tag on line 13 I think, apologies

rydavim
rydavim
18,814 Points

Sorry for the delay. Can you elaborate on what you're looking for? Do you not want to use psudo elements for some reason? Did you have trouble getting them to work? How else would you like to do it?