Explanation: (Ensure to read this attentively for better comprehension of the code!!!)
To start, you need to assign the width property to both the sidebar and the content sections.
As mentioned earlier, the content will have a width: 65%; property, while the .sidebar will have a width: 35%; property. Ensuring their total widths sum up to 100% eliminates any space between them.
Furthermore, it's essential to use the float property so that they align next to each other rather than one below the other. This is achieved by applying .content{float: left;} and .sidebar{float: right;}.
By implementing this approach, they are effectively divided into 35-65%, and regardless of the containers' assigned height property, they will expand accordingly.
Trust this explanation demonstrates clarity on the topic.
Take a close look at the code snippet provided below for a detailed understanding.
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
background-color: black;
}
.container {
height: 500px;
}
.content {
background-color: pink;
height: 500px;
width: 60%;
float: left;
font-size: 50px;
}
.sidebar {
background-color: blue;
height: 500px;
width: 40%;
float: right;
font-size: 50px;
}
<div class="container">
<div class="sidebar">This is sidebar</div>
<div class="content">This is content</div>
</div>