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

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