{"id":2197,"date":"2012-08-24T11:04:57","date_gmt":"2012-08-24T11:04:57","guid":{"rendered":"http:\/\/www.adviceinteractivegroup.com\/?p=2197"},"modified":"2012-08-24T11:04:57","modified_gmt":"2012-08-24T11:04:57","slug":"responsive-web-design-working-with-a-fluid-grid","status":"publish","type":"post","link":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/","title":{"rendered":"Responsive Web Design: Working with a Fluid Grid"},"content":{"rendered":"

In my last post<\/a>, I introduced you to the concept of responsive web design. I want to take this one step further and begin the actual implementation. Just to refresh, responsive web design combines fluid grids, CSS3 media queries, and flexible images to allow a website to adapt to the screen size of the user. Today, we’ll start out with fluid grids. Once again, we have Ethan Marcotte<\/a> to thank for this information. He uses a slightly different method than I will use here, but he has definitely laid the foundation.<\/p>\n

For demonstration purposes, I’ve gone ahead and created a pretty little grid that spans 980 pixels wide.<\/p>\n

\"980grid<\/a><\/p>\n

This particular grid consists of seven columns that are 120 pixels each, with a 20 pixel gutter, and 10 pixels to the left and right of the outermost columns. Keep in mind, you can use any combination of number of columns and respective widths. A very popular width is 960 pixels because it easily divides into a multitude of column combinations.<\/p>\n

I’ve also created a very simple website layout that has a basic header, content, sidebar, and footer.<\/p>\n

\"980grid<\/a><\/p>\n

Again, this will vary with each site. Now, in order to achieve a fluid grid, we will have to manipulate this grid just a tad. It’s not very fluid at a fixed width of 980 pixels, so we’ll need to use percentages.<\/p>\n

The outermost wrapper of 980 pixels will become 100% since this is the widest element. To convert the rest of the layout, all we need is some basic math. The header can be calculated by dividing:<\/p>\n

960 pixels \/ 980 pixels = 0.97959184<\/p>\n

At this point, we convert our decimal into a percentage and we get 97.95%. For browser compatibility purposes, we’ll round this to 98%. We’ll need to do the same to get the percentage of our content, sidebar, and footer:<\/p>\n

content: 680 pixels \/ 980 pixels = 0.69387755 \u2192 we’ll round to 69%
\nsidebar: 260 pixels \/ 980 pixels = 0.26530612 \u2192 we’ll round to 26%
\nfooter: same as header \u2192 98%<\/p>\n

Let’s take a look at our layout now:<\/p>\n

\"980grid<\/a><\/p>\n

As you can see, our once fixed layout is getting closer to becoming a beautiful, responsive website. To take it a little further, I’ve created a basic web page as an example, aptly named \u201cA Responsive Site.\u201d If you shrink your browser window, you’ll notice that the elements adapt to their appointed percentages in relation to the window size. Keep in mind this is only one step in the right direction. There’s still some tweaking to do if we want this site to not only respond to users’ screens, but to also be visually pleasing and readable on all devices. Next time, we’ll delve into some CSS3 media queries to get us even closer to a fully functioning responsive website.<\/p>\n","protected":false},"excerpt":{"rendered":"

In my last post, I introduced you to the concept of responsive web design. I want to take this one […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[17],"tags":[],"class_list":["post-2197","post","type-post","status-publish","format-standard","hentry","category-web-development-design"],"yoast_head":"\nResponsive Web Design: Working with a Fluid Grid – Advice Local<\/title>\n<meta name=\"description\" content=\"In the last post, I introduced you to the concept of responsive web design. Lets take this one step further and begin the actual implementation. Call (214) 310-1356.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Web Design: Working with a Fluid Grid – Advice Local\" \/>\n<meta property=\"og:description\" content=\"In the last post, I introduced you to the concept of responsive web design. Lets take this one step further and begin the actual implementation. Call (214) 310-1356.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Advice Local\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/advicelocallistings\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-08-24T11:04:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2018\/02\/Advice-Local-Partners-FB.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Advice Local\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"In the last post, I introduced you to the concept of responsive web design. Lets take this one step further and begin the actual implementation. Call (214) 310-1356.\" \/>\n<meta name=\"twitter:creator\" content=\"@advice_local\" \/>\n<meta name=\"twitter:site\" content=\"@advice_local\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Advice Local\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/\"},\"author\":{\"name\":\"Advice Local\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#\\\/schema\\\/person\\\/24c2a8bbb06a68d8e0642a3283d7f1f4\"},\"headline\":\"Responsive Web Design: Working with a Fluid Grid\",\"datePublished\":\"2012-08-24T11:04:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/\"},\"wordCount\":461,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#organization\"},\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/\",\"name\":\"Responsive Web Design: Working with a Fluid Grid – Advice Local\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#website\"},\"datePublished\":\"2012-08-24T11:04:57+00:00\",\"description\":\"In the last post, I introduced you to the concept of responsive web design. Lets take this one step further and begin the actual implementation. Call (214) 310-1356.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/responsive-web-design-working-with-a-fluid-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Web Design: Working with a Fluid Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/\",\"name\":\"Advice Local\",\"description\":\"Local Digital Marketing Software Solutions and Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#organization\",\"name\":\"Advice Local\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo.png\",\"width\":265,\"height\":55,\"caption\":\"Advice Local\"},\"image\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/advicelocallistings\\\/\",\"https:\\\/\\\/x.com\\\/advice_local\",\"https:\\\/\\\/www.instagram.com\\\/advice_local\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#\\\/schema\\\/person\\\/24c2a8bbb06a68d8e0642a3283d7f1f4\",\"name\":\"Advice Local\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/?s=96&d=mm&r=g\",\"caption\":\"Advice Local\"},\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/author\\\/advice-local\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Web Design: Working with a Fluid Grid – Advice Local","description":"In the last post, I introduced you to the concept of responsive web design. Lets take this one step further and begin the actual implementation. Call (214) 310-1356.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Web Design: Working with a Fluid Grid – Advice Local","og_description":"In the last post, I introduced you to the concept of responsive web design. Lets take this one step further and begin the actual implementation. Call (214) 310-1356.","og_url":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/","og_site_name":"Advice Local","article_publisher":"https:\/\/www.facebook.com\/advicelocallistings\/","article_published_time":"2012-08-24T11:04:57+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2018\/02\/Advice-Local-Partners-FB.jpg","type":"image\/jpeg"}],"author":"Advice Local","twitter_card":"summary_large_image","twitter_description":"In the last post, I introduced you to the concept of responsive web design. Lets take this one step further and begin the actual implementation. Call (214) 310-1356.","twitter_creator":"@advice_local","twitter_site":"@advice_local","twitter_misc":{"Written by":"Advice Local","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/#article","isPartOf":{"@id":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/"},"author":{"name":"Advice Local","@id":"https:\/\/www.advicelocal.com\/blog\/#\/schema\/person\/24c2a8bbb06a68d8e0642a3283d7f1f4"},"headline":"Responsive Web Design: Working with a Fluid Grid","datePublished":"2012-08-24T11:04:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/"},"wordCount":461,"commentCount":3,"publisher":{"@id":"https:\/\/www.advicelocal.com\/blog\/#organization"},"articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/","url":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/","name":"Responsive Web Design: Working with a Fluid Grid – Advice Local","isPartOf":{"@id":"https:\/\/www.advicelocal.com\/blog\/#website"},"datePublished":"2012-08-24T11:04:57+00:00","description":"In the last post, I introduced you to the concept of responsive web design. Lets take this one step further and begin the actual implementation. Call (214) 310-1356.","breadcrumb":{"@id":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.advicelocal.com\/blog\/responsive-web-design-working-with-a-fluid-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.advicelocal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive Web Design: Working with a Fluid Grid"}]},{"@type":"WebSite","@id":"https:\/\/www.advicelocal.com\/blog\/#website","url":"https:\/\/www.advicelocal.com\/blog\/","name":"Advice Local","description":"Local Digital Marketing Software Solutions and Services","publisher":{"@id":"https:\/\/www.advicelocal.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.advicelocal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.advicelocal.com\/blog\/#organization","name":"Advice Local","url":"https:\/\/www.advicelocal.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.advicelocal.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2026\/04\/logo.png","contentUrl":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2026\/04\/logo.png","width":265,"height":55,"caption":"Advice Local"},"image":{"@id":"https:\/\/www.advicelocal.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/advicelocallistings\/","https:\/\/x.com\/advice_local","https:\/\/www.instagram.com\/advice_local"]},{"@type":"Person","@id":"https:\/\/www.advicelocal.com\/blog\/#\/schema\/person\/24c2a8bbb06a68d8e0642a3283d7f1f4","name":"Advice Local","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Advice Local"},"url":"https:\/\/www.advicelocal.com\/blog\/author\/advice-local\/"}]}},"_links":{"self":[{"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/posts\/2197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/comments?post=2197"}],"version-history":[{"count":0,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/posts\/2197\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/media?parent=2197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/categories?post=2197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/tags?post=2197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}