SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page expanding as content is added

    I know this is a total newb question, but I'm blanking out. I've created a design (you can see it at test.askthekid.org) that won't expand as I add text. I do have rounded corners, so maybe it's the background image? I know it's something basic though. Solutions?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You need to take the height:90%; rule out of your #content and remove the height:90%; from your #navcontainer also.

    Or make them min-height, but then you will need to give IE6 a hack

    Your columns will not equalize, but that is another issue

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!

    That worked for the main content column, but it didn't work for the navigation column. Ideas?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your columns will not equalize, but that is another issue
    With your layout the best way to get equal columns and keep your round corners on the bottom is to create one image that repeats.

    Then cap off the bottom with another image that has the round corners. Since you have a fixed width layout it is your best bet.

    It is called the "Faux Columns" method.

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so I should just create a green background image that repeats? how do I use CSS to cap it then?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    so I should just create a green background image that repeats?
    Ok, it sounds like you are not familiar with faux columns. I'll explain it a little better then.
    The basic idea is that you are giving the appearance that both columns are the same length. The content (your right side) will most likely always be longer. This image has your navbar color on the left and your content color on the right. It only needs to be about 10px tall and you set it to repeat on the main wrapper or container div. That gets them equal but the bottom needs an image the same color but with the corners rounded.

    Let me see if I can find some links to some round corner demos for you.

    In the meantime this example will show you how faux columns work. Click in the content area and view the background image.

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. But is this really the best way? Is this a CSS bug?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  8. #8
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added this:

    #container{

    width: 800px;

    margin: auto;

    background: url(bg.jpg) repeat-y;

    height: 100%;



    }

    But it's still not working...
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    No it's not a bug. With CSS, divs do not automatically equalize like table cells do.
    Here is a complete explanation of what you have encountered.

    Faux columns are not the only way to get equal columns, it can be done with extra containing divs and negative margins. Here is a 2-column-demo that does not use images. But you can't use round corners with this method. Look at the code on that example and you will see the extra divs I'm talking about.

  10. #10
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've changed the CSS to a format where it should work, but it shouldn't. In the container div, I have a 'background: url(bg.jpg) repeat-y;" snippet, but it doesn't have any effect.
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    In the container div, I have a 'background: url(bg.jpg) repeat-y;" snippet, but it doesn't have any effect.
    That's what I'm trying to tell you, it's not going to work until you make a new image that takes the place of the two images you are using now.

    You have an image at the bottom of each column, the faux column example I linked to previously shows how one image simulates both sides.

    This is your left image

    This is your right image

    If you knitted them together in a graphics editor you would have the bottom cap with round corners. It would then be positioned at the bottom of your container div. Thats only half the battle though, you need another one with the identical color without round corners to repeat-y (down) and be the full width of your container div.

  12. #12
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so put the bottom cap in the html?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi max,
    It seems like you are having a hard time grasping everything I have explained about css and equal columns.

    The only other option you have is to put an equalizing javascript file into your page. This will not work if a visitor has their javascript turned off, the good news is that the vast majority of people leave it turned on.

    I have reworked your stylesheet and your html to work with the js file, I have put your whole site in a zip file.

    You Can Download It Here

    Hope that makes things easier for you

  14. #14
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi max,
    It seems like you are having a hard time grasping everything I have explained about css and equal columns.

    The only other option you have is to put an equalizing javascript file into your page. This will not work if a visitor has their javascript turned off, the good news is that the vast majority of people leave it turned on.

    I have reworked your stylesheet and your html to work with the js file, I have put your whole site in a zip file.

    You Can Download It Here

    Hope that makes things easier for you
    Thank you! I saw that solution while trolling the web, but I wanted to stay away from JS, just for compatibility issues.

    I'm still a greenhorn with this stuff, but each one of these problems solved gets me closer and closer to becoming an expert. Do you have any CSS book recommendations, besides the ones from sitepoint?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ok max, I took your images and stitched them together to make your faux image. There are two of them just like I previously explained.

    There is one for the bottom and it is the background for the new footer div that keeps it at the bottom. Then there is one that repeats on the y-axis of the container.

    Study the code to see what's going on.

    Here is the mindsmithfaux zip file.

    When you open it in your browser just increase the text size via browser and you will see it expand

  16. #16
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you so much, ray! Your final version was what I was imagining in my head. In fact, I was working on something similar in the mean time.

    it's terribly simple, and a lot easier than it sounded, but there is still one more problem. The main content shows up far down the page in IE7. How should I approach fixing that?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  17. #17
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The main content shows up far down the page in IE7. How should I approach fixing that?
    It works fine in IE7 for me, you have to use all of the new files in the .zip file. Don't mix them in with your old files, other than that I don't know what to say about the IE7 issue because I don't see it.

  18. #18
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Can someone download the mindsmithfaux zip file. And tell me if you have any problems with "main content showing up down the page in IE7"

  19. #19
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a screenshot:
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  20. #20
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Max It wasn't that I didn't believe you and the screenshot is proof, I am trying to troubleshoot this now.

    Do not reply back max until someone else checks this out also, I don't want my question bumped out of sight.

    Once Again,
    Can someone download the mindsmithfaux zip file. And tell me if you have any problems with "main content showing up down the page in IE7"

  21. #21
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ok Everyone,

    I put the files online and I would like for volunteers to view it in IE7, as I told max in previous posts, It works fine for me.

    Here is the site

    Please post your results

    @ tictike, thanks for trying to help with the .zip file, maybe the live files will make it easier.

    Thanks

  22. #22
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for putting it online and for the links for the zip software.

    It looks the same to me in both browsers.

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The page is displaying fine n IE7 for me also.

    We'd need to see the full code that was used when that jpg was posted

  24. #24
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to everyone who contributed to this thread, the problem is solved.

    I owe you one!
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org


Bookmarks

Posting Permissions

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