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

Jimmy Mannan
Jimmy Mannan
5,201 Points
Posted by Jimmy Mannan
Jimmy Mannan
5,201 Points

Something about the float...elements not floating as desired....

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/normalise.css">
  <link href='http://fonts.googleapis.com/css?family=Nova+Square' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <title>One Stop</title>
</head>


<body>

  <div id="header">

    <h1 class="roh">Hi!<br> I am a Designer</h1> <!--rightpart of header-->
    <h2 class="roh">One Stop Site for all your needs</h2>

    <img class="logo"src="images/Rayaan.png">

    <ul id="nav">
      <li>Home
      <li>Portfolio
      <li>About
      <li>Services
    </ul>  

  </div>
</body>
</html>

#header {
  border: 2px solid red;
}


h1,
h2,
ul,
img
 {
  border: 2px solid blue;
}

.logo {
  width: 45%;
  float: left:
}

.roh {
  float: right;
  width: 45%;
}

H1, H2 should be stacked one above the other...but why are they behaving like inline brats... :-(

I think its something to do with the float but I have no clue beyond that...

Any pointers please, Thanks a lot for any help jimmy

2 Answers

Ruslan Galiev
Ruslan Galiev
4,121 Points

Add wrapper for H1 and H2 like so:

 <div class='roh'>
       <h1>Hi!<br> I am a Designer</h1>
       <h2>One Stop Site for all your needs</h2>
 </div>

Since H1 and H2 that block elements will first H1 H2 then

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

It worked, Thanks a lot Ruslan.

But why should it not work when I float h1 and h2 individually? block elements are supposed to naturally drop below other elements....

Ruslan Galiev
Ruslan Galiev
4,121 Points
Ruslan Galiev
Ruslan Galiev
4,121 Points

Add in style this property:

.roh { float: right; width: 45%; clear: both; }

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

this also works, Thanks again