Grow your CSS skills. Land your dream job.

Weird window scaling issue

  • # June 30, 2008 at 3:30 pm

    So I’ve got this page: http://stuckpixelstudio.com/sandbox/troubleshooting/example.html.

    For some reason when you scale the browser window down, weird things start happening. I’m pretty sure it’s because I don’t completely understand relative positioning, because up until now I’ve been using absolute positioning. I just can’t figure out why this is happening.

    If you’ll notice, the top green bar behaves the way I would like for the rest of the page to behave, where when it reaches the left side it stops and the right side gets covered up by the rest of the window, however, the rest of my content does not behave this way.

    I also have a LOT of white space that shows up at the bottom. Not sure why that is either.

    Also, I can’t figure out for the life of me how to get the "Showing 1-10 of 20" to be on the left side, and the "Sort by" to be on the right side and still look right. Any time I’ve made this happen, the Sort by looks like it’s trying to be on a new line.

    Here’s my HTML:

    Code:

    top ad

    Showing 1-10 of 20
    Sort By:
    box ad
    Lorem Ipsum

    Lorem Ipsum

    Lorem Ipsum

    Lorem Ipsum

    And here’s my CSS:

    Code:
    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;
    }

    .everything
    {
    background:url(images/bg.jpg);
    background-position: center top;
    background-repeat:repeat-y;
    margin:-8px auto;
    }

    .searchbox
    {
    background:url(images/topgreen.jpg);
    background-repeat:no-repeat;
    height:30px;
    width:999px;
    text-align:right;
    padding: 3px 50px 0px 0px;
    background-position: center top;
    margin:0px auto;
    }

    .logobox
    {
    background:url(#);
    position:relative;
    left:-370px;
    width:175px;
    min-height:135px;
    background-position: center top;
    margin:0px auto;

    }

    .adbanner
    {
    position:relative;
    top:-120px;
    left:95px;
    min-height:90px;
    width:730px;
    background-position: center top;
    margin:0px auto;

    }

    .adbox
    {
    position:relative;
    top:-90px;
    left:300px;
    min-height:240px;
    width:300px;
    background-position: center top;
    margin:0px auto;

    }

    .contentbox
    {
    position:relative;
    left:-165px;
    top:-340px;
    width:560px;
    min-height:100px;
    padding: 5px;

    background-position: left top;
    margin:0px auto;

    }

    .floatleft {
    float: left;
    margin: 0px 10px 10px 0px;
    }

    .refine
    {
    background-color:#eeeeee;
    position:relative;
    top:-100px;
    left:0px;
    text-align:right;
    min-height:25px;
    width:890px;
    padding:5px;
    background-position: center top;
    margin:0px auto;
    }

    .resultnumber
    {text-align:right}

    Thanks guys.

    # June 30, 2008 at 9:29 pm

    Looks like you are making your layout much more complicated than it needs to be. You should give that "everything" div a static width and some padding, then all it’s decendents can live inside of it without the need for all that crazy positioning. That will solved your green bar problem, anyway. I would advise getting more comfortable using floats for positioning as well, that is how you will be able to solve your "showing" and "sort by" issue.

    # July 1, 2008 at 3:06 pm

    Yeah, I’m sure it’s all the relative positioning with negative values that’s making things screwy. Your design could easily be accomplished with floats and it would prevent all of these issues. I’ll admit floats are weird to work with at first, but once you get used to it they start to make sense :lol:

    For your design I would do something like this (really simple, just as an example):

    Code:
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum

    Float .column_left and .column_right to the left, put some padding on #content to create the space from the edge and you’re pretty much done :P

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

You must be logged in to reply to this topic.

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