Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member Jasoncw's Avatar
    Join Date
    Jan 2004
    Location
    Detroit, MI, United States
    Posts
    254
    Member #
    4401

    Liquid - Fixed - Liquid layout without overlap

    I'm having trouble getting a layout to work right.

    6WDgMAc.jpg

    1 - This is how it should look on larger monitors. A fixed width centered div with the page content on it, a left div with navigation in it, and a right div that would more than likely be empty.

    2 - This shows what happens when the screen is too small, and this is my problem. The center div stays centered and overlaps with what is inside of the left div.

    3 - This is how I'd like it to be. When there's not enough space for the center div to stay centered without overlapping, I'd like for it to start eating up the empty space in the right div and be forced off-center. Eventually it would resemble a two column layout.

    I've tried doing this with normal positioning stuff, and I've tried doing it with flexbox, but I don't think I know enough about either to know what to do.

    I could manually make different css for different window sizes to literally make it a 2 column layout in small windows but I feel like this is something simple that shouldn't require that.


    So I'm not sure what to do. If someone could even just point me in the right direction it would help a lot. Thank you
    Jason

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Sounds like you're looking for what's known as responsive design. The oversimplified explanation is that CSS is used to control the appearance of layout elements depending on different screen resolutions.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Jasoncw's Avatar
    Join Date
    Jan 2004
    Location
    Detroit, MI, United States
    Posts
    254
    Member #
    4401
    Thanks. I thought that was something I could do without getting into @media stuff, but I guess that's what I'll have to do.
    Jason

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    If that's what you were looking to avoid...unfortunately, you're right. You can't. But it's not so bad. It's basically just repetitive CSS. If you've ever designed a print stylesheet before, it's basically the same idea. It's just horribly explained, as is the case with a lot of good technical ideas.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:08 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com