Minimum width

  • symantix

    (@symantix)


    21 years, 11 months ago

    Is there a way to create a style to where the width of the content is based on the width of the window (%), but there is a minimum width, so that it can’t get any narrower than, say 600px? My blog has a lot of photography in it, and on lower resolution monitors, it looks really crazy, because the content space gets really narrow, but the pics stay the same width, so the menu on the left side starts overlapping the images.
    Any ideas how to do this, or any other ideas as to what I can do to solve this problem? I really want an expandable style, because it looks much better on larger monitors when there is a lot of room around the pictures.
    Thanks in advance.
    http://speakbold.com

Viewing 15 replies - 1 through 15 (of 29 total)
1 2
  • Anonymous

    21 years, 11 months ago

    #div {
    width: 90%;
    min-width: 600px;
    }

    Thread Starter symantix

    (@symantix)

    21 years, 11 months ago

    sweet sweet SWEET 🙂 That worked perfectly.
    One last problem. My menu is on the right side and its position is based on a 5% distance from the right side of the window. When the window gets small, or on small monitors, the content area maintains a minimum width now that I have implemented your min-width setting, but the menu will still overlap it. How can I get the same affect with the menu, where it will stay a given distance away from the content area at all times?

    Root

    (@root)

    21 years, 11 months ago

    That was me. Forum cookies are playing up. Glad it worked.
    As to your q with a graphic that size the layout is going to break sooner or later.
    My take? I would reduce the graphics size. You would be surprised at how the whole look will come together. Then you need to fine tune the min width. It needs to be what you really need. Adjust accordingly.

    Thread Starter symantix

    (@symantix)

    21 years, 11 months ago

    I think you’re right, Root. I’ll probably end up reducing my picture sizes.
    But I’m still going to need to figure out the issue with the menu. No matter how small I make the pictures, the menu will still start overlapping the content area after a certain minimum window size. If I can stop the menu from moving over when the content area reaches its minimum width, that’s what I need. I’ve tried setting up the content and menu as float: left; , but that causes the menu to jump down below the content area for some reason. Any ideas?

    Root

    (@root)

    21 years, 11 months ago

    Well since Zeldman held forth on this subject – I float both my content and my menu. But you need to fix the min width to stop the overlap. Or abandon the idea and just set a width instead. Maybe get right on top of fixed width floats before we go flexible. Just my two cents.

    Thread Starter symantix

    (@symantix)

    21 years, 11 months ago

    Oh, I can do fixed width floats; it the flexible I’m having trouble with.
    I have the fixed with set right on my content area now, but that doesn’t stop the menu from overlapping the content area in smaller windows. It’s not the width of the *menu* that I’m concerned about; it’s stopping the menu from moving any further to the left once the minimum width of the content area is reached.

    Thread Starter symantix

    (@symantix)

    21 years, 11 months ago

    Actually, if you’re going to do a float, as I understand it, you really should set an explicit width. So I guess my question is: Is there another way to do this? Right now, neither my content nor my menu are in floats; I was just bringing that up as a possibility…probably a bad idea though.

    Root

    (@root)

    21 years, 11 months ago

    I go float. Every time.

    Thread Starter symantix

    (@symantix)

    21 years, 11 months ago

    Even with flexible styles? How? Especially when, like mine, the menu is on the right side?

    Root

    (@root)

    21 years, 11 months ago

    Well you could do the same thing but fix the widths in em or percent.
    Alternatively if you want to be over the bleeding edge with a fixed menu and flexible content why not use negative margins? The heads up by Ryan Brill is at alistapart

    Thread Starter symantix

    (@symantix)

    21 years, 11 months ago

    I think that the reason why my menu drops below the content area is because, instead of my content area having a width based on percentage, it has no width defined, with a right margin of 180 to make room for the menu, which has an explicit width defined in terms of pixels (170px). When I remove the “position: absolute” property from the menu, and put a “float: left;” in there, if wraps to the bottom. I’m thinking that the margin still counts as part of the box that the content is in, so there is no room for the menu.
    hmmm….

    Root

    (@root)

    21 years, 11 months ago

    One. You should not mix percents and pixels in one layout. Two. The drop down effect is sometimes caused by the content / menu being in the wrong order or by miscalc as to width. Both are solveable. Negative margins would do what yo want. No doubt.

    Thread Starter symantix

    (@symantix)

    21 years, 11 months ago

    The guy that you referenced is mixing pixels and percentages in one layout.
    Also, when I tried the negative margin on the right side, like he did, it pushed my content area in the opposite direction (as far over the right side of the rap as it could go until it hit the right side of the window). It’s setting the margin on the right side to a positive that pushes it in. I’m not doubting that it’s working for him, but he also has a container around only his content area, and as I understand it, the rap in wordpress encompasses just about everything. Correct me if I’m wrong.

    Root

    (@root)

    21 years, 11 months ago

    Well yes. But no reason why you shouldn’t adjust the rap or add adiv if you need it The index is not sacrosanct. The clever thing is that the method does appearto use pixels and percentages together but they are cleverly separated in the css. That is the beauty.

    Thread Starter symantix

    (@symantix)

    21 years, 11 months ago

    Sweet. I had already set a minimum width for the rap. I added an extra div and used a negative margin. It works brilliantly.
    I’ll probably reduce the size of my photos soon. Thanks a billion for your help, Root.

Viewing 15 replies - 1 through 15 (of 29 total)
1 2

The topic ‘Minimum width’ is closed to new replies.