The real magic going on here is the relationship between. We also set the position of this div to absolute with a top and right of 0. rightColumn will now have a fixed width of 18.75ems (300 pixels). And the width of the left column will stay fluid. This will remain intact regardless of how big or small the screen size gets, there will always be a right margin of 19.5em for screen sizes above 47.5ems. So we give him a little extra padding to make him feel safe inside of his purple circle. I like pretend that the left column has personal space issues and prefers an ample amount of padding between himself and others. We could have written a right margin of 18.5ems, but that would have made the columns butt up against each other. leftColumn will add a right margin of 19.5ems to allow for proper padding between the left and right column. The media query states that when the screen size is greater than 47.5ems, apply the rules inside the block. Let’s walk through what is going on here. Now we will have a layout that looks something like the following screenshot: moz-box-sizing: border-box -webkit-box-sizing: border-box box-sizing: border-box leftColumn for efficiency, but I have separated them out for clarity in this example. I could have combined some of the rules for. For the right and left column we’ll add some basic rules such as a 1 pixel border for demo purposes and padding to make everything look nice. This is important as it will come into play later when we make the left and right column align side by side. 5em margin and set the position to relative. The HTML is fairly simple with a container div to hold the left and right column.įor the default CSS (read: mobile), let’s add some rules for the column container such as a. A place for ads, links, or other ancillary content. The right column will be used for sidebar content. The left column will be for main content. Let’s imagine a layout that has a fixed right column of 300 pixels wide (or 18.75ems, if you are using 16 pixels as your baseline) and a left column that will be fluid. I don’t need the overhead of styles that I won’t use and I have no use for a 12 column grid system. Those frameworks are wonderful and very educational, but typically I don’t need an entire grid framework.
#Responsive design tutorial 2015 how to
I created this tutorial because there are many examples on how to use a grid framework for responsive layouts, but not enough examples on how to create a custom layout that doesn’t need a full blown grid framework.
We will later add media queries to make the columns sit side by side as screen size allows. We will start with a mobile first view that consists of the columns stacked on top of each other. The example is basic, but it can be expanded to have multiple columns, even fluid nested columns. This tutorial will explain how to create a two column layout with one fixed column and one fluid column. I highly recommend this tool for making quick wireframes.
#Responsive design tutorial 2015 update
UPDATE #2: Added navigation/menu section to the demos. Please read about the new version of the codebase if you want to avoid the document flow issues found in this tutorial.
UPDATE #3: A new article has been added that addresses the layout issue with this solution.
0 kommentar(er)
