Grow your CSS skills. Land your dream job.

Sizing help

  • # November 21, 2008 at 4:32 am

    I have recently added a reviews page to my site, but I have found that when resize the page it causes everything to reposition itself.

    Does anyone know how to make it so that no matter how much the browser is resized it will always be scaled and won’t squash up?

    Here’s the link

    http://www.macbook4u.co.uk/reviews.html

    # November 21, 2008 at 4:46 am

    Set a minimum width to your wrapper div (the div around the whole site)

    min-width: 900px;

    # November 21, 2008 at 5:04 am

    Ok its great that you’re using divs over tables but you using them the wrong way. Wayy too many <br> tags (<br />)

    Why did you use margin: 0 auto; to center the div and you put center on it?

    #body {
    width : 80%;
    background-image:url("background.gif");
    margin: 0 auto;
    border: 0px solid; if border is 0 you dont have to say its solid.
    }

    You should really try checking out grid frameworks, Yahoo has a great one and I’m sure you’d find it useful
    http://developer.yahoo.com/yui/grids/

    # November 21, 2008 at 5:05 am

    Thanks!

    worked a treat.

    # November 21, 2008 at 5:13 am

    I’ve gone through and cleaned up the things that I can for each of those points.

    Apart from the <br>

    is there any way that I can get the same spacing without using loads of <br> tags?

    box
    # November 21, 2008 at 5:32 am
    "beezer123" wrote:
    …is there any way that I can get the same spacing without using loads of <br> tags?

    That’s what CSS is for! You should never have to add html mark-up in order to force a display (although the very occasional <div> is forgivable). HTML is for marking up content and not for display. Display is controlled entirely with CSS. So if you need extra space, you’ll apply it with CSS.
    <center> is also bad mark-up. If you wish to centre an area, then you apply this via CSS and not HTML.
    Do not use <center> tags. Do not use <br> tags.

    # November 21, 2008 at 5:40 am

    I’ve taken away as much of the <br> as I can see possible for just now and replaced it with padding on the 3 div columns.

    Hopefully it’s starting to look a bit cleaner now. I’m quite new to all this CSS stuff so just picking things up as I go.

    # November 21, 2008 at 7:32 am

    Did you check out the Yahoo grid system?
    Trust me just looking at it should give you an understanding how divs work.

    # November 21, 2008 at 7:44 am

    I’ve been having a look at it, but there is a lot of information there to try and intake.

    Perhaps I’ll give it a good read through when I’m not at college.
    :)

    Thanks for the tips though

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".