Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts

    converting a static layout to % percentage layout using css

    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 Code:

    Code:
    #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 Code:

    Code:
    <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/responsi...-flexible.html that beside the % widths there is comments like:

    Code:
    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

    Kyle

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    103
    Thanks
    0
    Thanked 14 Times in 14 Posts

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 601 Times in 600 Posts
    To find percentages you divide the part by the whole.
    What percent of 100(the whole) is 25(the part) = 25/100 = .25 <= this is a decimal. Convert it to percent by moving the decimal point two places to the right and add the percent sign. So, .25 is 25%.

    For your parts you have .col_1 and .col_3 at 300px and 460px respectively and the whole is 940px.

    To get whole number percents I changed the whole to max-width: 960px; and got .col_1 width: 31%; and .col_3 width: 48%;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •