Jump to content

Convert this to <div>'s?


FrOzeN

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.

http://www.clananthrax.net/example2.html

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.)
Link to comment
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!

http://www.regisresidential.com/

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:

http://www.regisresidential.com/page2.html

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

http://www.regisresidential.com/rounded2b.php
Link to comment
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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.