OneBeginer OneBeginer - 4 months ago 9
CSS Question

Can't make 2 divs to sit side by side

I cant Make this 2 divs to sit side by side ,There is some white space between them,and if i add one more px on width the one in the right goes below the one in the left.
I think maybe i nested the divs wrong i am not sure , i know this is something simple but i dont know what i did wrong ...



*{margin:0px;
padding:0px;}

body{background-color:white;}

h3{float:left;
color:white;
padding-left:160px;
padding-top:11px;
font-family:cursive;}

ul{list-style-type:none;
margin:0px;
padding:0px;
background-color:#00b7b7;
overflow:hidden;
width:276px;
float:right;
height:47px;}

li a{display:block;
width:60px;
text-decoration:none;
text-align:center;
padding:14px 16px;
height:47;}

li{display:inline;
float:right;}

li a:hover{background-color:#0c6d6d;}
li a:link{color:White;}
li a:visited{color:white;}

.header{background-color:#0193C4;
width:100%;
height:47px;
overflow:hidden;}


.left{width:1072px;
height:350px;
background-color:#0193C4;
float:left;
padding:0px;
margin:0px;}

.right{width:277px;
height:270px;
background-color:#00b7b7;
float:right;
padding:0px;
margin:0px;}


ul:first-child{border-left-style: solid;
border-color:black;}

.container{margin-top:10px;
}

<!DOCTYPE html>
<html>
<head>
<title>project1</title>
<link type="text/css" rel="stylesheet" href="project1.css" />

</head>

<body>

<div class="header">
<h3>WebSite</h3>

<div class="navbar">
<ul>
<li> <a href="#"> Menu </a></li>
<li> <a href="#"> Contact </a></li>
<li> <a href="#"> Help </a></li>
</ul>
</div>
</div>

<div class="container">
<div class="left">
<p></p>
</div>

<div class="right">
<p></p>

</div>

</div>


</body>
</html>




Answer

You should use percentage units or vw units for your boxes, and float:left for both of them:

*{margin:0px;
padding:0px;}

body{background-color:white;}

h3{float:left;
color:white;
padding-left:160px;
padding-top:11px;
font-family:cursive;}

ul{list-style-type:none;
margin:0px;
padding:0px;
background-color:#00b7b7; 
overflow:hidden;
width:276px;
float:right;
height:47px;}

li a{display:block;
width:60px;
text-decoration:none;
text-align:center;
padding:14px 16px;
height:47;}

li{display:inline;
float:right;}

li a:hover{background-color:#0c6d6d;}
li a:link{color:White;}
li a:visited{color:white;}

.header{background-color:#0193C4;
width:100%;
height:47px;
overflow:hidden;}


.left{width:70%;
height:350px;
background-color:#0193C4;
float:left;
padding:0px;
margin:0px;}

.right{width:30%;
height:270px;
background-color:#00b7b7;
float:left;
padding:0px;
margin:0px;}


ul:first-child{border-left-style: solid;
border-color:black;}

.container{margin-top:10px;
}
<div class="header">
<h3>WebSite</h3>

<div class="navbar">
         <ul>
                  <li>    <a href="#">        Menu  </a></li>      
				  <li>    <a href="#">       Contact </a></li> 
				  <li>	 <a href="#">        Help  </a></li>       
          </ul>
</div>
</div>

<div class="container">
<div class="left">
<p></p>
</div>

<div class="right">
<p></p>

</div>

</div>