0

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.

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Aditya
  • 184
  • 1
  • 12
  • Don't use `float` for layout, it's meant for drop-caps and embedded images. You should learn how to use `display: flex` and `display: grid` instead. – Dai Oct 20 '20 at 05:55
  • You can set the height (```eg.., 200px```) on each sections ```.sidebar``` and ```.main-content``` to see the background applied, https://codepen.io/Maniraj_Murugan/pen/abZmzjo – Maniraj Murugan Oct 20 '20 at 05:58
  • @Dai I wanted to place the divs horizontally and (this post)[https://stackoverflow.com/questions/11931154/how-to-position-three-divs-in-html-horizontally] suggested this method. – Aditya Oct 20 '20 at 06:08
  • @ManirajMurugan Ok it worked if I am using `px`, `vh`, `rem`, `em' unit but not working if I am using `%` unit. Why it's that?? – Aditya Oct 20 '20 at 06:08
  • @Aditya, Which one didn't worked? I have added a codepen in my comment which has both backgrounds.. Did you look into it? Now you don't have any content/text inside any div so adding height would show you differentiation.. – Maniraj Murugan Oct 20 '20 at 06:09
  • There must be content to display right? No actual height or width – kiran_raj_r Oct 20 '20 at 06:10
  • 2
    @Aditya that question is from 7 years ago suggesting float. Most answer also suggesting floats don't tell about clearfix, and unless you use that it will have strange side effects. As Dai suggest use flex or grid. – Dejan.S Oct 20 '20 at 06:12
  • Thanks to all of you for reply. @ManirajMurugan I understand the problem i.e I have to specify height to child divs. But why, `%` unit is not working when all other units are working?? @Dai and @Dejan.S ok I will use flexbox or grid. – Aditya Oct 20 '20 at 06:21
  • @Aditya, Now it should work in percent ```height: 100%``` as well .. Add height as ```100vh``` to parent element ```body``` then you can use ```%``` .. https://codepen.io/Maniraj_Murugan/pen/abZmzjo – Maniraj Murugan Oct 20 '20 at 06:32
  • Keep in mind "fix height" `100vh` for example - could cause overflow issues (Better to use min-height). – Ezra Siton Oct 20 '20 at 07:13

2 Answers2

2

floats layout technique is little "out of date" (Use Flexbox -or- Grids). Next, you could use semantic HTML5 tags main, aside, and so on (Instead of divs only).

Summarize of CSS layout techniques: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout.

Last .main { height: 100%; } "not working" (No visual change) - read her why: Why doesn't height: 100% work to expand divs to the screen height?

About your Q - your divs are empty (Put inside content and/or set min-height / height). Also related: Boxmodel. Working example:

*,body{
  padding: 0;
  margin: 0;
  color: white;
}

html, body, .main {
    height: 100%;
}

.sidebar{
  float: left;
  width: 20%;
  height: 100%;
  background-color: blue;
}

.main-content{
  float: left;
  width: 80%;
  height: 100%;
  background-color: red
}

.videos{
  background: purple;
}
<html>
<body>
    <header>
        <div class="icon">

        </div>
        <div class="search"></div>
        <div class="header-more"></div>
    </header>
    <div class="main">
        <aside class="sidebar">
            <div class="home">home</div>
            <div class="library">library</div>
            <div class="subscription"></div>
            <div class="more"></div>
            <div class="settings"></div>
            <div class="about"></div>
        </aside>
        <main class="main-content">
            <div class="topic"></div>
            <div class="videos">
                <div class="video">video 1</div>
                <div class="video">video 2</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">
                <article class="post">post 1</article>
                <article class="post">post 2</article>
                <article class="post"></article>
            </div>
            <div class="videos">
                <div class="video">video 1</div>
                <div class="video">video 2</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>
        </main>
    </div>
</body>
</html>

Flexbox

*,body{
  padding: 0;
  margin: 0;
  color: white;
}

.main {
  display: flex;
}

aside{
  flex-basis: 20%;
  background-color: blue;

}

main{
  flex-basis: 80%;
  background-color: red
}
<html>
<body>
    <header>
        <div class="icon">

        </div>
        <div class="search"></div>
        <div class="header-more"></div>
    </header>
    <div class="main">
        <aside class="sidebar">
            <div class="home">home</div>
            <div class="library">library</div>
            <div class="subscription"></div>
            <div class="more"></div>
            <div class="settings"></div>
            <div class="about"></div>
        </aside>
        <main class="main-content">
            <div class="topic"></div>
            <div class="videos">
                <div class="video">video 1</div>
                <div class="video">video 2</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">
                <article class="post">post 1</article>
                <article class="post">post 2</article>
                <article class="post"></article>
            </div>
            <div class="videos">
                <div class="video">video 1</div>
                <div class="video">video 2</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>
        </main>
    </div>
</body>
</html>

Nested flexbox example

Take a look at how easy it is to control the layout.

*,body{
  padding: 0;
  margin: 0;
  color: white;
}

.main {
  display: flex;
  min-height: 40vh;
}

aside{
  flex-basis: 20%;
  padding: 5px;
  background-color: blue;

}

main{
  flex-basis: 80%;
  background-color: red
}

.main-content{
  display: flex;
}

.main-content > div{
  flex-basis: 33%;
  border: 1px solid white;
  padding: 5px;
}

.videos{
  background: purple;
}
<html>
<body>
    <header>
        <div class="icon">

        </div>
        <div class="search"></div>
        <div class="header-more"></div>
    </header>
    <div class="main">
        <aside class="sidebar">
            <div class="home">home</div>
            <div class="library">library</div>
            <div class="subscription"></div>
            <div class="more"></div>
            <div class="settings"></div>
            <div class="about"></div>
        </aside>
        <main class="main-content">
            <div class="topic">Topic</div>
            <div class="videos">
                <div class="video">video 1</div>
                <div class="video">video 2</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">
                <article class="post">post 1</article>
                <article class="post">post 2</article>
                <article class="post"></article>
            </div>
            <div class="videos">
                <div class="video">video 1</div>
                <div class="video">video 2</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>
        </main>
    </div>
</body>
</html>
Ezra Siton
  • 6,887
  • 2
  • 25
  • 37
1

You should also add heights to the body and the divs.

CSS

* {
    padding: 0;
    margin: 0;
}

html, body {
  height: 100%;
}

.main {
    width: 80%;
    height: 100%;
}

.sidebar {
    float: left;
    width: 20%;
    height: 100%;
    background-color: blue;
}

.main-content {
    float: left;
    width: 80%;
    height: 100%;
    background-color: red
}
Mohammad Agha
  • 118
  • 8
  • Thanks for answer. Can someone explain me why specifying `height` is necessary in body when it can work even without specifying `width`?? – Aditya Oct 20 '20 at 06:45