Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Basics (Retired) Making Decisions with Conditional Statements Introducing Conditional Statements

Posted by john larson
john larson
16,594 Points

fluid design, floats and refreshing page

I have been working on my fluid design with floats and images. I finding that i get the page layout just right, then i re-size my browser down and back up...and then I have to refresh the page to get the layout back where I want it. Is this a thing? or am i missing something?

Mario Mitchell
Mario Mitchell
18,789 Points

Your missing something. This isn't normal. Post your code or a link to the page.

6 Answers

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points 
body {
    text-align: center;
}
nav ul {
    list-style: none;
    padding: 0;
}
footer p {
    border: 5px double #000;
    display: inline-block;
    margin:30px 0;
    padding: 5px 10px;

}

@media screen and (min-width: 573px) {
    p {
        max-width: 573px;
        background: #fda;
        margin: 0 auto;
        border: 1px solid #000;
    }
}

@media screen and (min-width: 850px) {
    body {
        background: #f9f;
    }
    #p-1 p {

        padding: 10px 0;

    }
    #p-1 {
        float: left;
        width: 49%;
        clear: both;
        margin-bottom: 30px;

    }
    #p-2 {
        float: right;
        width: 49%;
        margin-bottom: 30px;
    }
    #p-3 {
        float: left;
        width: 49%;
        clear: both;
        margin-bottom: 30px;

    }
    #p-4 {
        float: right;
        width: 49%;
        clear: both;
        margin-top: -120px;
        }
    #p-4 p {
        padding: 7.5px;
    }
    #img-1 {
        margin: 50px auto;
        border: 1px solid #000;
        display: block;

    }
    #img-2 {
        margin: 50px auto;

        display: block;
        border: 1px solid #000;
    }
    #img-3 {
        margin: 50px auto;
        display: block;
        border: 1px solid #000;
    }

    #container {
        max-width: 850px;
        margin: 0 auto;
        border: 1px solid #000;
        background: #cac;


    }
    h3 {
        clear: both;
    }


}
@media screen and (min-width: 1200px) {
    body {
        background: #fdd;
    }

    #container {
        background: #caa;
    }
    .img {
        border: 1px solid #000;
        display: inline-block;
        margin: 0 auto;
    }
    #p-1 {
        float: left;
        width: 18%;
        clear: both;
        margin-bottom: 30px;

    }
    #p-2 {
        float: right;
        width: 18%;
        margin-bottom: 30px;
    }
    #p-3 {
        float: left;
        width: 18%;
        clear: both;
        margin-bottom: 30px;

    }
    #p-4 {
        float: right;
        width: 18%;
        clear: both;
        margin-top: -285px;
        }
    #p-4 p {
        padding: 7.5px;
    }
    #img-fix {
        margin-right: 155px;
    }
}
john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

mario, i posted the code. it kinda doesnt fit but...that's it

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

it's when i get up to 1200 px width that it starts to glitch on me

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

https://teamtreehouse.com/workspaces/7118732

link to the css

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

https://teamtreehouse.com/workspaces/7118732

link to the html

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

https://teamtreehouse.com/workspaces/7118732

oops, theres the link to the css