Fixed layout
In this article we are going to learn about fixed layout in Cascading Style Sheets, how we can design a webpage that cannot change its size but have fixed size.
We learnt about css in general, padding, float, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css, internal css, external css, selectors css, positions in css, display in css, lists style in css and multiple css so, we will be focusing on fixed layouts.
Fixed layout
Fixed layout is a Cascading Style Sheet layout that sets the size of any html element fixed by using pixel (px) measurements, the size cannot change with different screen resolutions.
Let us create div element with fixed width of 200 pixel, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.fixed-width-example {
width: 200px;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="fixed-width-example">This is div element with 200px fixed width.</div>
</body>
</html>
So, we should have the following results and this div element cannot change its size but can overflow horizontally on smaller screens.
Let us create two div elements with fixed widths of 150 and 160 pixel, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.150fixed-width-example {
width: 150px;
color: white;
background: orange;
float: left;
}
.160fixed-width-example {
width: 160px;
color: white;
background: orange;
float: right;
}
<style/>
</head>
<body>
<div class="150fixed-width-example">This is div element with 150px fixed width.</div>
<div class="160fixed-width-example">This is div element with 160px fixed width.</div>
</body>
</html>
So, we should have the following results and these div elements will overflow horizontally on smaller screens.