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
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts

    Simple (in theory) Layout Problem

    Okay, I thought this'd be easy but it's turned out to be another pain.

    I'm trying to create a classic fixed-width navigation, dynamic-width content design that'll have a max-width of 1000px. When the viewport is less than 1000 pixels wide, the content block should dynamically get smaller, filling 100% of the page width with the "columns" remaining side-by-side.

    The problem is that when I shrink the content div below the max-width (by resizing the window), that div, without an assigned width, is somehow too wide and gets wrapped to the next line, below the menu div. I at least got it to stay on the same line when the viewport is greater than 1000px wide so that the width of the content block is capped through a second max-width. I've done this kind of layout before but not with a dynamic width and I don't know how to fix this without giving it a width which defeats the point... Maybe I'm going about it wrong. Any ideas?

    HTML: http://www.angelfire.com/droid/plgaries/personal.html
    CSS: http://www.angelfire.com/droid/plgaries/master.css
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #2
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it to work by positioning the #menu absolutely, and then floating the #content to the right and giving it a left-margin of 202px. This might be more of a "work-around" type answer than you were looking for, but I couldn't figure out any other way.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Ah, I tried it out and it does indeed work in Firefox and Opera, but it doesn't work in Internet Explorer. However, this isn't a problem; since Internet Explorer doesn't support max-width anyway, I have that browser running the site in auto (full) width. I just used a conditional comment to revert the new CSS back to its original form which was already working as expected in that browser. It doesn't work in my WYSIWYG editor (GoLive) but hopefully that won't be a problem.

    Anyway, thanks! Forgot all about absolute positioning as I always try to avoid the position property due to past headaches, heh.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Banned
    Join Date
    May 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you

    Lol, if you can beleive it I had the same problem Thank you very much for your help and hope to see you 2 around more.


  •  

    Posting Permissions

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