{"id":1271,"date":"2015-03-02T11:56:55","date_gmt":"2015-03-02T17:56:55","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1271"},"modified":"2015-03-02T11:56:55","modified_gmt":"2015-03-02T17:56:55","slug":"how-to-manage-your-webpages-layout-with-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-manage-your-webpages-layout-with-css\/","title":{"rendered":"How to Manage Your Webpage&#8217;s Layout with CSS"},"content":{"rendered":"<p><!-- Post Status : Finished Please Review and Publish --><!-- Custom CSS Styles Block : Ahmed El-Shinawy--><\/p>\n<style media=\"screen\" type=\"text\/css\">.preview-block{position:relative;background:#f8f8f8;padding:20px;margin-bottom:20px;border:1px solid #dedede;text-align:center;transition:all .5s}<\/style>\n<p><!-- Actual Post Starts Here--><br \/>\nBefore CSS was out, people used tables in order to layout their webpages. Now, the introduction of CSS changed all that. CSS provides us with a lot of flexibility to position the elements in a webpage. In this tutorial we\u2019re going to dive into the two main CSS properties used to defining layout of webpages: the position property and the float property.<\/p>\n<p><strong>The <code>position<\/code> CSS property<\/strong><br \/>\nThe position property is primarily used to define how an element is treated in the flow of the page. There are four main values that could be used with the position property.<br \/>\n<code>static<\/code>: The default value of any element. This value renders the element in its normal order as it appears inside the HTML.<br \/>\n<code>relative<\/code>: This is similar to static but the element can still be moved from its original position with the properties <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code> and <code>left<\/code>.<br \/>\n<code>absolute<\/code>: This option removes the element out of the normal flow of the HTML and lets you control its position with <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code> and <code>left<\/code>.<br \/>\n<code>fixed<\/code>: This value pretty much behaves absolute but it will also position the element in reference to the browser window and not the webpage. So the fixed elements always stay where they are on the screen even when you scroll the page.<\/p>\n<p>With those options in mind we can create a two column layout easily with absolute positioning if we have something like the following HTML:<\/p>\n<div class=\"codeBlock\">\n<pre>\n &#60;div id=\"navigation\">\n    &#60;ul>\n        &#60;li>&#60;a href=\"#\">Link1&#60;\/a>&#60;\/li>\n        &#60;li>&#60;a href=\"#\">Link2&#60;\/a>&#60;\/li>\n        &#60;li>&#60;a href=\"#\">Link3&#60;\/a>&#60;\/li>\n\t&#60;li>&#60;a href=\"#\">Link4&#60;\/a>&#60;\/li>\n    &#60;\/ul>\n &#60;\/div>\n &#60;div id=\"content\">\n    &#60;h1>Header of Column2&#60;\/h1>\n    &#60;p>Some Text inside column 2&#60;\/p>\n &#60;\/div>\n<\/pre>\n<\/div>\n<p>By applying the following simple CSS:<\/p>\n<div class=\"codeBlock\">\n<pre>\n#navigation {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 200px;}\n#content {\n    margin-left: 200px;}\n<\/pre>\n<\/div>\n<p>We will see that this will set the navigation bar to the left and set its width to 200 pixels. Because the navigation is absolutely positioned, it has nothing to do with the flow of the rest of the page. All that is needed is to set the left margin of the content area to be equal to the width of the navigation bar.<br \/>\nIsn&#8217;t that easy? And the good news is we&#8217;re not limited to this two-column approach. With clever positioning, we can arrange as many blocks as we like. If we wanted to add a third column, for example, we could add a \u201cnavigation2\u201d block to the HTML and change the CSS to:<\/p>\n<div class=\"codeBlock\">\n<pre>\n#navigation {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 200px;\n}\n#navigation2 {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 200px;\n}\n#content {\n    margin: 0 200px;\n}\n<\/pre>\n<\/div>\n<p>The only downside to absolutely positioned boxes is that because they live in a world of their own, there is no way to accurately determine where they end. If we were to use the examples above and all of our pages had small navigation bars and large content areas, we would be okay, but, especially when using relative values for widths and sizes, we often have to abandon any hope of placing anything, such as a footer, below these boxes. If we wanted to do such a thing, one way would be to float the <code>div<\/code>s, rather than absolutely positioning them. Which brings us to the second part of our tutorial.<\/p>\n<p><strong>The <code>float<\/code> CSS property<\/strong><br \/>\nFloating a box will shift it to the right or left of the container <code>div<\/code>, with any surrounding content flowing around it.<br \/>\nFloating is normally used to shift around smaller <code>div<\/code>s within a page, some navigation links to the right of the container, but it can also be used with bigger <code>div<\/code>s, such as navigation columns.<\/p>\n<p>The float property takes only two values, either <code>float:left<\/code> or <code>float:right<\/code>.<br \/>\nUsing the same HTML we wrote earlier, we could apply the following CSS:<\/p>\n<div class=\"codeBlock\">\n<pre>\n#navigation {\n    float: left;\n    width: 200px;\n}\n#navigation2 {\n    float: right;\n    width: 200px;\n}\n#content {\n    margin: 0 200px;\n}\n<\/pre>\n<\/div>\n<p>However, floating introduces a small problem with container boxes. That means, if you have a container with all floating elements inside it, the container box won\u2019t wrap around the boxes. Its height or width won\u2019t increase to take the full size of the floating elements inside. Luckily, there is a fix for that, the clear property.<\/p>\n<p><code>clear:left;<\/code> will clear left floated boxes<br \/>\n<code>clear:right;<\/code> will clear right floated boxes<br \/>\n<code>clear:both;<\/code> will clear both left and right floated boxes.<\/p>\n<p>Adding an extra <code>div<\/code> inside the container with the CSS property <code>clear:both<\/code> will clear the floating elements and allow the container to wrap correctly around them. So if, for example, we wanted a footer in our page, we could add a footer <code>div<\/code> in the HTML as follows:<\/p>\n<div class=\"codeBlock\">\n<pre>\n&#60;div id=\"footer\">\n    &#60;p>Footer Text&#60;\/p>\n&#60;\/div>\n<\/pre>\n<\/div>\n<p>and then add the following CSS<\/p>\n<div class=\"codeBlock\">\n<pre>\n#footer {\n    clear: both;\n}\n<\/pre>\n<\/div>\n<p>There we have it! A footer that will appear underneath all columns, regardless of the length. Hope you enjoyed this tutorial. Check this <a href=\"http:\/\/codepen.io\/anon\/pen\/XJYqQa\" title=\"codepen\" target=\"_blank\" rel=\"noopener noreferrer\">codepen<\/a> for a full preview.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<\/p>\n<p>.preview-block{position:relative;background:#f8f8f8;padding:20px;margin-bottom:20px;border:1px solid #dedede;text-align:center;transition:all .5s}<\/p>\n<p>\nBefore CSS was out, people used tables in order to layout their webpages. Now, the introduction of CSS changed all that. CSS provides us with a lot of flexibility to position the elements in a webpage. In [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/how-to-manage-your-webpages-layout-with-css\/\" title=\"Click to read 'How to Manage Your Webpage&#8217;s Layout with CSS'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,178],"tags":[124,318,323],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1271"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1271"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1271\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}