Converting a static layout to % percentage layout using css

HTML & CSS
1

Hi all,

I have put together a simple static layout where I would lilke to understand how to convert the static widths into percentages in order to eventually create a responsive web layout. Can anyone recommend the easiest way to work out layout widths, font-sizes, padding and margins in percentages? I have been so used to creating my layouts in static format but I would love a complete understanding on how to implement this % technique.

Link to my simple layout is here:

CSS

#container{
        max-width: 940px;
        width: 100%;
        margin: 0 auto;
        background: #000;
        padding: 0 10px;
    }

    .col_1{
        width: 300px;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
        background: #ededed;
    }

    .col_2{
        width: 100%;
        float: left;
        background: #ededed;
        margin-bottom: 20px;
    }

    .col_3{
        width: 460px;
        float: left;
        margin-right: 20px;
        background: #ededed;
    }

    .last{
        margin-right: 0;
    }

HTML

<div id="container" class="clearfix">
				
				
				<!-- Top Columns -->
					<div class="col_1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien a lacus convallis rhoncus. Pellentesque nibh libero, pulvinar accumsan ornare ac, dignissim ac velit. Donec lacinia ornare nisl eu sodales. Vivamus sagittis, ipsum sit amet ornare fringilla, mauris felis elementum tellus, eget sodales nisi purus at risus. Pellentesque consectetur magna non magna dignissim eleifend. Etiam imperdiet ultricies congue. Nunc in ante nunc, id tempor tellus. Ut vel sapien et nibh tincidunt gravida. Aenean gravida scelerisque justo sit amet malesuada. Praesent egestas ullamcorper lorem facilisis fringilla. Sed vitae hendrerit leo. </p></div>					
					<div class="col_1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien a lacus convallis rhoncus. Pellentesque nibh libero, pulvinar accumsan ornare ac, dignissim ac velit. Donec lacinia ornare nisl eu sodales. Vivamus sagittis, ipsum sit amet ornare fringilla, mauris felis elementum tellus, eget sodales nisi purus at risus. Pellentesque consectetur magna non magna dignissim eleifend. Etiam imperdiet ultricies congue. Nunc in ante nunc, id tempor tellus. Ut vel sapien et nibh tincidunt gravida. Aenean gravida scelerisque justo sit amet malesuada. Praesent egestas ullamcorper lorem facilisis fringilla. Sed vitae hendrerit leo. </p></div>					
					<div class="col_1 last"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien a lacus convallis rhoncus. Pellentesque nibh libero, pulvinar accumsan ornare ac, dignissim ac velit. Donec lacinia ornare nisl eu sodales. Vivamus sagittis, ipsum sit amet ornare fringilla, mauris felis elementum tellus, eget sodales nisi purus at risus. Pellentesque consectetur magna non magna dignissim eleifend. Etiam imperdiet ultricies congue. Nunc in ante nunc, id tempor tellus. Ut vel sapien et nibh tincidunt gravida. Aenean gravida scelerisque justo sit amet malesuada. Praesent egestas ullamcorper lorem facilisis fringilla. Sed vitae hendrerit leo. </p></div>
				<!-- //Top Columns -->
				
				<!-- Middle Column -->
					<div class="col_2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien a lacus convallis rhoncus. Pellentesque nibh libero, pulvinar accumsan ornare ac, dignissim ac velit. Donec lacinia ornare nisl eu sodales. Vivamus sagittis, ipsum sit amet ornare fringilla, mauris felis elementum tellus, eget sodales nisi purus at risus. Pellentesque consectetur magna non magna dignissim eleifend. Etiam imperdiet ultricies congue. Nunc in ante nunc, id tempor tellus. Ut vel sapien et nibh tincidunt gravida. Aenean gravida scelerisque justo sit amet malesuada. Praesent egestas ullamcorper lorem facilisis fringilla. Sed vitae hendrerit leo. </p></div>
				<!-- //Middle Colums -->
				
				
				<!-- Last Columns -->
					<div class="col_3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien a lacus convallis rhoncus. Pellentesque nibh libero, pulvinar accumsan ornare ac, dignissim ac velit. Donec lacinia ornare nisl eu sodales. Vivamus sagittis, ipsum sit amet ornare fringilla, mauris felis elementum tellus, eget sodales nisi purus at risus. Pellentesque consectetur magna non magna dignissim eleifend. Etiam imperdiet ultricies congue. Nunc in ante nunc, id tempor tellus. Ut vel sapien et nibh tincidunt gravida. Aenean gravida scelerisque justo sit amet malesuada. Praesent egestas ullamcorper lorem facilisis fringilla. Sed vitae hendrerit leo. </p></div>
					<div class="col_3 last"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien a lacus convallis rhoncus. Pellentesque nibh libero, pulvinar accumsan ornare ac, dignissim ac velit. Donec lacinia ornare nisl eu sodales. Vivamus sagittis, ipsum sit amet ornare fringilla, mauris felis elementum tellus, eget sodales nisi purus at risus. Pellentesque consectetur magna non magna dignissim eleifend. Etiam imperdiet ultricies congue. Nunc in ante nunc, id tempor tellus. Ut vel sapien et nibh tincidunt gravida. Aenean gravida scelerisque justo sit amet malesuada. Praesent egestas ullamcorper lorem facilisis fringilla. Sed vitae hendrerit leo. </p></div>
				<!-- //Last Columns -->	
	

			</div>

In the flexible grid example on a list apart http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html that beside the % widths there is comments like:

margin: 0 3.317535545023696682% 1.5em 0;			/* 21px / 633px */

are these comments some way of working out the conversion?

If anyone can help explain how I can achieve this I would be very grateful :slight_smile:

Thanks
Kyle

2

If you work purely in percentages for widths, it’s not really a matter of ‘converting’. You are really talking about a different kind of layout—a different concept of design, where elements will readjust themselves depending of the width of the viewport.

You could, for example, set the main page wrapper to width: 80%. In that case, its width will always be 80% f the window width … unless you set a max-width and/or min-width.

That 80% becomes the new 100% for elements inside the wrapper. So you could have three columns inside the wrapper, and their widths might be, say, 25% 50% 25% (although it might be better not to use us every last % as the broswer has to interpret the widths in px and a column may drop in some circumstances).

And so on.

An alternative—a nice half-way house—is to have an ‘elastic’ page, where the wrapper is measured in ems, but the columns inside are set in %, so that if the browser window narrows to less than the wrapper width the design will still squash down. I made up a tutorial on this a while back.