SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to align 4 pages horizontaly with css?

    Hi all,

    First of all I have a fluid layout. Now I want to publish 4 little teasers on one page and those have to be aligned to eachother but also in the middle of the mother page.

    So something like #wrapper, then #main in which those 4 little teasers have to be placed.

    With margin:auto; it will not work since it is fluid which will cause the container of those teasers fill in the whole page.

    Is there a solution and if there is what will it be?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you not give the 4 boxes width and margins that equal 25% of the space available to them.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They'll add up to 101% in some browsers if he does that.

    But yes, it is possible to do it.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies,

    However, it will not solve the problem. The 4 elements are floating which I want because this will cause them to scale with the browser. With a lower resolution this will cause the elements to pop under each other and with a very high resolution they will align next to each other. Without the float property there is no problem at all and everything kan be aligned in the middle.

    Using % margins will give a desired result with a 1024 view but it is nowere near in the middle when viewed with a wide laptop screen obviously.

    I dont want the 4 elements span the whole space there must be some room between them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •