Preventing overlap with browser width compression? (example in link)

Discussion in 'HTML & Website Design' started by tehshyt, Sep 24, 2012.

  1. #1
    Hi Digital point

    So I have this website that is really close to being done.

    http://www.nikuphoto.com

    The problem is that when the browser window is resized. The text and thumbnails on the right side of the screen overlap the main image on the left side of the screen.

    I've been looking for ages trying to figure out how to prevent this for ages with no luck.

    Does anyone know how I can prevent overlap regardless of the browser window size?

    Any help is much appreciated!;)
     
    tehshyt, Sep 24, 2012 IP
  2. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You essentially have a 2-column setup here. One of the columns has a known minimum width (the width of your image).

    I'd suggest you design around that, but float both columns to the left. See: http://www.alistapart.com/articles/holygrail/
     
    HBz, Sep 24, 2012 IP
  3. TwitTwit

    TwitTwit Active Member

    Messages:
    117
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    55
    Digital Goods:
    1
    #3
    set "float: left" to the .container div
     
    TwitTwit, Sep 24, 2012 IP
  4. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If you want two columns, I don't think setting one float: left and the other float: right is really good practice. I'm not an expert by any means, but that doesn't really scale well, does it? Let's say you have a huge window. The distance between the two floats is going to get really wide. Besides, does that prevent overlap?
     
    HBz, Sep 24, 2012 IP