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

Dylan Carter
Dylan Carter
4,780 Points
Posted by 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

findlawdeveloper
findlawdeveloper
6,016 Points

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
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.