Jump to content


This topic is now archived and is closed to further replies.


Convert this to <div>'s?

Recommended Posts

I want the page to take up 100%, except for 70px padding either side. But when a user resizes it so small that the middle* section is only the width of the banner, I then want the padding to become resized, and once it reaches 0px it then creates a horizontal scrollbar.

middle* - being the page body excluding the side padding.


As seen above, it's quite easily achieved with a table, but I'm wondering if I can set this up the same using a <div> instead?
(The blue border is just to determine where the middle section sides are whilst working with it.)

Share this post

Link to post
Share on other sites
Sounds like you want a "liquid" or "floating" layout. Not easy if you don't know how and even then you need to cheat by seeing how someone else does it.

Here is a liquid layout I am working on that works in all browsers including IE 5.23 for Mac!


Feel free to copy the css and layout.

Here is something similar that blows up in IE 5.5 and below, but works fine in every other:


Here is a less flexible, more px based fixed fonts and widths with a non graphic corner rounding technique, displays dynamic database driven content without using table cells Works in all browser versions (except IE 5.5 and below don't like using the rounded corner divs).

This is great for dynamic database content using php (not finished using a regex to filter the php url paths yet, but the layout is flexible while fixed to a certain extent):


Share this post

Link to post
Share on other sites
Set the width of your div to a value that would leave the desired margin (about 90%) then give that div a margin...

margin: 10px auto;

This will yeild a fluid page, give you some nice whitespace eitherside until the window is reduced - the page will only go as small as the banner shoudl teh user attempt to reduce size further the dreaded bottom scrollbar will appera

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.