Home/ Questions/Q 6641385
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:48:17+00:00

I am trying to create a fluid/responsive layout where the same HTML would render

  • 0

I am trying to create a fluid/responsive layout where the same HTML would render differently on different devices…Now I am aware of how to use CSS Media queries (for desktop/iPad,etc), fluid grids and all that stuff..

My question is let’s say these are the 2 layouts i have for desktop/iPad..I need to design using a single HTML and have 2 separate CSS (which would be ofcouse through the media query device-width, etc)…How do I code my HTML such that the CSS would be able to render it differently?

Desktop layout
enter image description here
iPad layout
iPad layout

I have already gone through many articles like the one on;
http://www.alistapart.com/articles/responsive-web-design/

But my question is is it possible to create extremely different views from a single HTML just through CSS (By that I would mean say a particular set of sections/cols showing on desktop is at a very differnt position for a different device)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Last I checked, you could add the media tag in the CSS file and it would automatically do this for you.

    <link rel="stylesheet" href="" type="text/css" media="Screen" />
<link rel="stylesheet" href="" type="text/css" media="handheld" />

    Example

    <div id="header"></div>
    <div class="centerSection"></div>
    <div class="centerSection"></div>
    <div class="centerSection">
        <div></div><div></div>
    </div>
<div id="footer"></div>

    Desktop

    .centerSection { float:left; }

    Mobile

    .centerSection { clear:both; }

    See here: W3 CSS Media

    • 0