I am struggling with a seemingly simple task. I want to create two columns on my page, each with a width of 50% and a height of 100% so they completely fill the screen side by side. However, no matter what I try, they do not align properly and end up floating with each other.
I attempted to use jQuery to address this issue, but when the window is resized, the columns no longer fill the entire page. I have searched for solutions online, but nothing seems to offer a straightforward answer for creating multiple columns like this. Many websites seem to achieve this layout effortlessly, so there must be a way to do it efficiently using pure CSS or more effective jQuery techniques.
<div class="container">
<div class="on">
<button type="button" class="btn-on">
on
</button>
</div>
<div class="off">
<button type="button" class="btn-off">
off
</button>
</div>
</div>
.
html {
height: 100%;
}
container {
width: 100%;
height: 100%;
}
.on {
width: 50%;
height: 100%;
background-color: #FEE;
float: left;
}
.off {
width: 50%;
height: 100%;
background-color: #666;
float: left;
}
.btn-off {
position: relative;
}
.
$(document).ready(function() {
var height = $(window).height();
$('.on').css({'height':height + 'px'});
$('.off').css({'height':height + 'px'});
});