For example, you need to create a webpage, as shown in the figure, which should be more or less suitable in all major screen resolutions.
Step 1 :
Create an outer DIV with styling as follows :
HTML:
<!DOCTYPE>
<html>
<head><title>Layout Example</title>
<style>
div{
border:1px solid #000; // This is just to make the DIVs visible with borders.
}
#outerDiv{
border:1px solid #000; // This is just to make the DIVs visible with borders.
}
#outerDiv{
width:80%;
min-width:1000px;
max-width:1300px;
height:80%;
min-height:700px;
min-height:700px;
max-height:1000px;
margin:auto;
}
</style>
</head>
<body>
<div id="outerDiv">
</div>
</body>
</html>
Code explained :
The <!DOCTYPE> at the top of the document defines what type of attributes are to be allowed on the document. Here is a link for your reference.
The <!DOCTYPE> at the top of the document defines what type of attributes are to be allowed on the document. Here is a link for your reference.
As you know that the width:80% allows the DIV to take up 80% of the window size as its width. Even when you re-size or use a screen of different resolution, it still takes up the 80% of the window size. This sometimes makes the contents of that DIV to overlap or mis-align with respect to your design. This can be corrected by using min-width and max-width.
Giving min-width:1000px, limits the resizing of the DIV to a minimum of 1000px instead of 80%. It means that when you resize (i.e., decreasing the window size or zooming in) the browser window, the DIV maintains the 80% width until a limiting value of 1000px, after which it does not resize but remains static.
Similarly, giving max-width:1300px, limits the resizing of the DIV to a maximum of 1300px instead of 80%. It means that when you resize (i.e., increasing the window size or zooming out) the browser window, the DIV maintains the 80% width until a limiting value of 1300px, after which it does not resize but remains static.
The similar concepts as of width property holds for height property too.
The similar concepts as of width property holds for height property too.
Assuming that you understood our previous article on Horizontal Centering of DIV, I used the margin:auto for the same.
Step 2 :
Create 2 inner DIVs with styling as follows:
<!DOCTYPE>
<html>
<head><title>Layout Example</title>
<style>
<html>
<head><title>Layout Example</title>
<style>
div{
border:1px solid #000; // This is just to make the DIVs visible with borders.
}
#outerDiv{
border:1px solid #000; // This is just to make the DIVs visible with borders.
}
#outerDiv{
width:80%;
min-width:1000px;
max-width:1300px;
height:80%;
min-height:700px;
min-height:700px;
max-height:1000px;
margin:auto;
}
#div1{
width:40%;
height:80%;
float:left;
}
#div2{
</style>
</head>
<body>
<div id="outerDiv">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
Code explained :
FLOAT is a very problematic property when used without a clear idea of its functionality. It is obvious that it makes an element to float to right or left depending on the value that it is assigned in the CSS. But it is sometimes overlooked that the floating element is actually considered by the parent DIV as an element hanging from its previous element, which in-turn results in the non-consideration of the height of the floating element. The following figure makes this clear:
Float can also take "None" (which is default) and "Inherit" (which inherits the property from its parent). Note that, Float cannot be used for a Absolute positioned element.
For further reference, check this link.
This makes the following elements of the floating element to mis-align abruptly. I guess many of you have faced this problem. The solution to this lies just after the concept of FLOAT which uses the concept of CLEAR.
As the div1 and div2 are always floating to left and right respectively, they will always be aligned as such whatever the width of the outerDiv may be. To maintain this, the width of the div1 and div2 also matters. To avoid this, we gave their width and height in percentage which allows them to adjust according to the parent.
Finally removing the border for the DIV with class "clear", we get our required layout for almost all kinds of screen resolutions.
This code is made active in this link for your reference. Observe the page by resizing the window.
I hope you got a basic idea on creating a good layout using Float, Clear, Min-width, Max-width, Min-height & Max-height. Please comment if you have any doubts or anything to share.
Thank you.
width:40%;
height:80%;
float:right;
}</style>
</head>
<body>
<div id="outerDiv">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
Code explained :
FLOAT is a very problematic property when used without a clear idea of its functionality. It is obvious that it makes an element to float to right or left depending on the value that it is assigned in the CSS. But it is sometimes overlooked that the floating element is actually considered by the parent DIV as an element hanging from its previous element, which in-turn results in the non-consideration of the height of the floating element. The following figure makes this clear:
For further reference, check this link.
This makes the following elements of the floating element to mis-align abruptly. I guess many of you have faced this problem. The solution to this lies just after the concept of FLOAT which uses the concept of CLEAR.
Step 3 :
Creat a Dummy DIV with class clear and styling as follows:
<!DOCTYPE>
<html>
<head><title>Layout Example</title>
<style>
<html>
<head><title>Layout Example</title>
<style>
div{
border:1px solid #000; // This is just to make the DIVs visible with borders.
}
#outerDiv{
border:1px solid #000; // This is just to make the DIVs visible with borders.
}
#outerDiv{
width:80%;
min-width:1000px;
max-width:1300px;
height:80%;
min-height:700px;
min-height:700px;
max-height:1000px;
margin:auto;
}
#div1{
width:40%;
height:80%;
float:left;
}
#div2{
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="outerDiv">
<div id="div1"></div>
<div id="div2"></div>
<div class="clear"></div>
width:40%;
height:80%;
float:right;
}.clear{
clear:both;
}
</style>
</head>
<body>
<div id="outerDiv">
<div id="div1"></div>
<div id="div2"></div>
<div class="clear"></div>
</div>
</body>
</html>
Code explained :
CLEAR is very important property which is very much needed when FLOAT is used. This property actually clears the floating elements which are present before this element with the clear property and brings the height of the floating DIVs into picture. The CSS clear:both actually means that it clears the floating elements on both sides, i.e., on right and left sides.
CLEAR can take the following values:
</body>
</html>
Code explained :
CLEAR is very important property which is very much needed when FLOAT is used. This property actually clears the floating elements which are present before this element with the clear property and brings the height of the floating DIVs into picture. The CSS clear:both actually means that it clears the floating elements on both sides, i.e., on right and left sides.
CLEAR can take the following values:
- "right" (which clears the floating elements on the Right side)
- "left" (which clears the floating elements on the Left side)
- "none" (which doesn't clear anything and is Default)
- "inherit" (which inherits from the parent element)
- "both" (which clears on the both sides)
The above code will create a page as shown :
Finally removing the border for the DIV with class "clear", we get our required layout for almost all kinds of screen resolutions.
This code is made active in this link for your reference. Observe the page by resizing the window.
I hope you got a basic idea on creating a good layout using Float, Clear, Min-width, Max-width, Min-height & Max-height. Please comment if you have any doubts or anything to share.
Thank you.
No comments:
Post a Comment