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

Dylan Carter
Dylan Carter
4,780 Points

How to get my DIV to go to the right? (CSS & HTML)

http://imgur.com/a/DA5i4

in the above two pictures you can see i have the main container, filled with 3 smaller divs, one big in the middle, and two skinny on both sides, but the right side doesnt start until underneath the middle div.

how can i get this right ones top aligned with the others in the container?

<!DOCTYPE html>
<html>
  <head>
    <title>Make money from cell phones</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
    <link href='https://fonts.googleapis.com/css?family=Adamina|Alegreya+SC'
        rel='stylesheet' type='text/css'>
  </head>
  <body> 
    <header>
      <h1>Website title!</h1>
        <nav>
            <ul>
                <li>Buying Tips</li>
                <li>Selling Tips</li>
                <li>option 3</li>
                <li>option 4</li>
                <li>option 5</li>
            </ul>   
        </nav> 
    </header>
    <div class="home-container">
            <div class="home-left">
                <p>fdfdf</p>
            </div>
            <div class="home-main">
                <h3>Welcome to the website</h3> 
                <p>General purpose of the website and general information about website contents....
                General purpose of the website and general information about website contents....
                General purpose of the website and general information about website contents....
                General purpose of the website and general information about website contents....
                General purpose of the website and general information about website contents....
                </p>
            </div>
            <div class="home-right">
                <p>dfdfdfd</p>
            </div>
    </div>  <!-- CONTAINER END DIV -->  
  </body
 </html>
body {
    background-color:#AAAACC;
    font-family: adamina;
}

header {
 background: red; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C );
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C );
  /* For Fx 3.6 to 15 */
background: -moz-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C ) ;
  /* Standard syntax */
  background: linear-gradient(35deg,#82d5f0 16%,#6BCDED, #25055C, #43E8B1,#db4dff,#5E50DE,#800040,#1B4C5C ); 

  width:100%;

  height: 145px;

  border-bottom: 4px solid black;
  border-top: 4px solid black;

}

h1 {
    width:30%;
    float:left;
    font-size: 3.75rem;
    margin-left: 6%;
    margin-top: 35px;   
}



header nav ul {
    position: relative;
    top:25px;
    left:0px;
    float: right;
    margin-right: 22.5px;
    list-style: none;
}

header nav ul li {
    display:inline-block;
    padding: 15px 18px;
    border: 3px solid black;
    border-radius: 12.5%;
    background: linear-gradient(125deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C ); 
    opacity: 0.8;
}

.home-container {
    width: 100%;
    display: block;
    line-height: 1.5;
    height: 900px;
}

.home-main {
    margin:16px auto 0;
    width:65%;
    background-image: url('img/skyspace.png');
    background-size: cover;
    color: #CCCCFF;
    height: inherit;

}

.home-main h3 {
    font-size: 50px;
    font-weight: 1000;
}

.home-main p {
    font-size: 26px;
    font-weight: bold;
}

.home-left {
    float: left;
    width: 10%;
    margin: 0 2.5%;
    background-color:white;
    height:inherit;
}

.home-right {
    position: relative;
    float: right;
    width: 10%;
    margin: 0 2.5%;
    height: inherit;
    background-color:white;

}

1 Answer

You can add a float: left; to .home-container and .home-main in the CSS file. http://codepen.io/anon/pen/jqddaq

Dylan Carter
Dylan Carter
4,780 Points

thats what i was doing, the problem was i had the middle main-container set as a block, had to change to inline block.