The website layout is not fixed - html

Question

folks, I am learning the basics of web development. I have used two fieldsets in the page as CSS id
#lfieldset
{
width: 1019px;
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}
this is how it looks
Screenshot1
and the meta tag
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
for layout, but the second fieldset comes to the bottom if I reduce the window, see
Screenshot2
how can I solve this?

Answer 1

You should use % instead of px to manage the size of your fieldsets.
#lfieldset
{
width: 80%;
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}
Another alternative if you want to keep the size of on of those, use the calc function to set the width:
#lfieldset
{
width: calc(100% - 300px);
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}

Answer 2

Use % or ems for responsive design. Usage of pixels is not a good practice and does not give you a responsive design
Instead of fiddling around with floats ,you may consider using display:flex for the same
check this snippet
#lfieldset {
width: 90%;
height: 50%;
background: #ffffff;
border-radius: 8px;
border: none;
}
#rfieldset {
width: 10%;
height: 20%;
background: #ffffff;
border-radius: 8px;
border: none;
}
.wrapper {
display: flex;
justify-content: space-between;
border: 1px solid;
}
<div class="wrapper">
<feildset id="lfieldset">
this is left
</feildset>
<feildset id="rfieldset">
this is right
</feildset>
</div>
Hope it helps

Answer 3

There are three approaches you can take in this situation.
Responsive approach 1: Here you elements will use width in percentage or em or rem:
#lfieldset
{
width: 80%;
height: 500px;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
float: left;
}
Responsive approach 2: Whenever browser width decreases, allow elements to stack one below another. You are currently doing something similar. Better version would be:
#lfieldset
{
width: 80%;
height: 500px;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
float: left;
}
#media only screen and (max-width: 768px) {
#lfieldset
{
width: 100%;
float: none;
}
#rfieldset
{
width: 20%;
float: none;
}
}
Fixed approach: Let there be horizontal scrollbar. In that case, you will have to create a wrapper element:
<div class="wrapper">
<fieldset id="lfieldset"></fieldset>
<fieldset id="rfieldset"></fieldset>
</div>
/* CSS */
#lfieldset
{
width: 1019px;
height: 500px;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
float: left;
}
.wrapper {
width: 1319px; /* Sum of 1019px + 300px */
}
In this approach, when you reduce the size of browser, you will get horizontal scroll bar.
Please notice: I am not using float: right even for rfieldset. Using left float will ensure that when right is pushed downwards, then you still get proper left alignment.
As a beginner, you might wonder the syntax I used in responsive approach 2. It is media queries from CSS3. Choose your solution depending on your requirements (responsive layout vs. fixed layout using horizontal scrollbar).
To further understand different layout techniques in CSS, go through:
http://www.slideshare.net/HarshalPatil4/css-layout-techniques