Jump to content


Convert this to <div>'s?

  • Please log in to reply
2 replies to this topic

#1 FrOzeN

  • Members
  • PipPipPip
  • Advanced Member
  • 70 posts

Posted 05 October 2006 - 07:37 AM

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

#2 dbrimlow

  • Members
  • PipPipPip
  • Advanced Member
  • 712 posts

Posted 08 October 2006 - 12:52 AM

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


I am always amazed by no matter how much I know, I know I don't know as much as I thought I knew.  - D. Brimlow.

#3 ToonMariner

  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 08 October 2006 - 01:02 AM

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

follow me on twitter @PHPsycho

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users