Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Location
    Pernambuco, Brazil
    Posts
    8
    Thanks
    0
    Thanked 1 Time in 1 Post

    Question Fluid page "side borders"

    Hello!

    Well, I made a layout and, while trying to transform it from PSD to CSS, I came across a difficulty that I cannot solve.

    This page has the following structure:

    [WRAP = min-width:1022px; max-width:1250px]
    [HEADER]
    [LEFT = float: left]
    [RIGHT = float: right]
    [CENTER = float: left]
    [SIDEBAR = float: left]
    [CONTENT = float: left]
    [FOOTER]
    The LEFT and RIGHT div's are the borders of each side (with background images) were supposed to shrink down it's width if the user's screen resolution is small. I tried anything I could but I cannot get this done!

    Right now, they're fixed-width, as I cannot find a solution to this problem.

    If anyone can help me, I appreciate so much!

    Thanks in advance!
    Alex.

    [EDIT] Oh, I forgot the link! http://cisneiros.com/tests
    Last edited by Cisneiros; 11-26-2009 at 12:13 AM. Reason: Forgot to post the link!

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    try using 'em' or '%' instead of 'px' if you are concern about screen resolution.

    vineet

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Location
    Pernambuco, Brazil
    Posts
    8
    Thanks
    0
    Thanked 1 Time in 1 Post
    vineet, that's a good ideia, I'll try it.

    But the point here is how to make the page borders (LEFT and RIGHT div's) fluid.
    Like: if you have a big screen, the boders show up fully. If you have a smaller screen, the borders shrink, so you won't get scroll-bars. I tried min-width = 0 and max-width = (the correct width) on the borders, but if I do it, they just disappear.

  • #4
    New to the CF scene
    Join Date
    Sep 2008
    Location
    Pernambuco, Brazil
    Posts
    8
    Thanks
    0
    Thanked 1 Time in 1 Post
    Well, I found no CSS solution, so I'm appealing to JavaScript :/

    http://cisneiros.com/tests/test.html
    This was the way I found, but there must be a way to do this with CSS!


  •  

    Tags for this Thread

    Posting Permissions

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