My html code
*,body{
padding: 0;
margin: 0;
}
.main{
width: 80%;
height: 100%;
}
.sidebar{
float: left;
width: 20%;
background-color: blue;
}
.main-content{
float: left;
width: 80%;
background-color: red
}<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<div class="sidebar">
<div class="home"></div>
<div class="library"></div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</div>
<div class="main-content">
<div class="topic"></div>
<div class="videos">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
<div class="videos">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</div>
</div>
</body>
</html>As per my knowledge, I must see two block with blue colour covering 20% of window and red colour covering 80% of window. But I am getting just a blank window. Where is the problem?? Sorry if there is any obvious problem in code but I am beginner in html and css specially css. Thanks for help in advance.
Aucun commentaire:
Enregistrer un commentaire