Home/ Questions/Q 6530133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T09:43:08+00:00

I am designing a fluid layout and am thinking on the right approach to

  • 0

I am designing a fluid layout and am thinking on the right approach to code the layout ..Below is the structure which i am thinking;

<body>
<div id=container>
<div id=col1></div>
<div id=col2></div>
</div>
</body>

For the CSS, I am thinking of coding the container as {width:90%;margin:0 auto;overflow:hidden}

For the 2 cols, they would be floated left with some % widths..

As you can see, since i want a fluid layout, i am not using px value anywhere..

My other requirements are;

1 It should adjust based on viewport automatically e.g. Same html page when viewed on desktop or iPad (to some extent mobile phone) should adjust proportionally with respect to viewport..

2 It shoukd be compatible across most of the desktop browsers and iPad with easily extensible in future for other tablets..

3 The page should appear center aligned (not sure if There would be enough space for this on iPad)

Pleasepoint any issues you may think can Be caused by the above structure or css..

Please suggest if my HTML and CSS code (specially the container) are coded correctly..I am a bit aprehensive about getting this right, as the same is going to be applied to almost 500+ htmls…So woukd not want to get into any kind of major issues at a later stage..

Please suggest as many ideas..I am open to all of them..

Thank you..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could do that quite easily in terms of it being flexible:

    (I have left the styles inline because i’m lazy right now!)

        <div id="container" style="width:90%; margin:0 auto; overflow:hidden">
        <div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div>
        <div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div>
    </div>

    The 90% width on the container with be 90% of the viewport. The columns will be 50% of the calculated 90% width whatever that may be.

    I would use masterpages or similar so if you did indeed need to change things around you would have to apply it across each html page 🙂

    Also although the columns will be fluid your content could determine minimum widths – e.g. if you have an image in one column that is 500px wide then the minimum width of that column will be 500px when resized and might cause you issues. In short you need to consider the type of content you will have of the site and how that could potentially affect layout.

    • 0