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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Trying to control 2 elements when browser size is adjusted.

    I've almost finished upgrading my layout and am pretty happy with it. There's only one issue I can't solve. I really want to keep the layout variable width. For what we're trying to accomplish cramming the information into 800-900 pixels just doesn't do justice to everyone who has larger monitors.

    So, my problem is this. I've designed the two main content blocks using variable width (by %). I'm VERY happy with the way it looks on any browser window > 1000 pixels. Unfortunately, as you shrink the window smaller and smaller the two content blocks (which are side by side) begin to overlap.

    Is there any way to prevent this? I've tried working with the min-width tags, but that only controls the container, not other elements related to it. I also read up on the clear: left/right construct, but it doesn't seem to apply here either.

    Is there some solution I'm missing? Or can I define a minimum page width but no maximum? So frustrating to be so close but still have a major problem.

    Sample page is: http://www.infolists.com/testnew.htm

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    just set it as a width and float it to the left

    if you want to make a page width: 100%;
    http://www.maxdesign.com.au/articles/liquid/

    you gotta set gutters. Inless you use tables, or elements will collapse. I've never made one column a % and another px, but I would assume that the large column should be the %.
    Last edited by Sammy12; 07-03-2011 at 04:28 AM.


  •  

    Posting Permissions

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