I have two DIVs inside a container div, where I need to set them both to fit to the browser window like below, but it doesn't fit in my code, please suggest me a solution
My Style Sheet code
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: auto;
width: 100%;
}
.div1 {
float: left;
height: 100%;
width: 25%;
}
.div2 {
float: left;
height: 100%;
width: 75%;
}
Body
<body>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
The answer is
You have to declare height of html to div1 elements together, like:
html,
body,
.container,
.div1,
.div2 {
height:100%;
}
You could also use viewport percentages if you don't care about old school IE.
height: 100vh;
I think the fastest way is to use grid system with fractions. So your container have 100vw, which is 100% of the window width and 100vh which is 100% of the window height.
Using fractions or 'fr' you can choose the width you like. the sum of the fractions equals to 100%, in this example 4fr. So the first part will be 1fr (25%) and the seconf is 3fr (75%)
More about fr units here.
.container{
width: 100vw;
height:100vh;
display: grid;
grid-template-columns: 1fr 3fr;
}
/*You don't need this*/
.div1{
background-color: yellow;
}
.div2{
background-color: red;
}<div class='container'>
<div class='div1'>This is div 1</div>
<div class='div2'>This is div 2</div>
</div>I do not think you need float.
html,_x000D_
body,_x000D_
.container {_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.div1, .div2 {_x000D_
display: inline-block;_x000D_
margin: 0;_x000D_
min-height: 100%;_x000D_
}_x000D_
_x000D_
.div1 {_x000D_
width: 25%;_x000D_
background-color: green;_x000D_
}_x000D_
_x000D_
.div2 {_x000D_
width: 75%;_x000D_
background-color: blue;_x000D_
}<div class="container">_x000D_
<div class="div1"></div><!--_x000D_
--><div class="div2"></div>_x000D_
</div>display: inline-block; is used to display blocks as inline (just like spans but keeping the block effect)
Comments in the html is used because you have 75% + 25% = 100%. The space in-between the divs counts (so you have 75% + 1%? + 25% = 101%, meaning line break)
Man, try the min-height.
.div1 {
float: left;
height: 100%;
min-height: 100%;
width: 25%;
}
.div2 {
float: left;
height: 100%;
min-height: 100%;
width: 75%;
}
Source: Stackoverflow.com