https://i.sstatic.net/CC7GV.jpg
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;
}
```
Something like this should do it:
.column-left { float: left; width: 10%; }
.column-right { float: right; width: 10%; }
.column-center { display: inline-block; width: 80%; }
Demo https://jsfiddle.net/nanilab/hms51o6z/
EDIT
You can also use flexible boxes (supported only by modern browsers):