CODEWITHSUNDEEP
csshtmllayout
dweeman
dweeman

Reputation: 89

How can I stop divs getting pushed down?

I am trying to figure out how to get divs that I want on the same line to stay there, rather than getting pushed below when the screen is resized.

For example, I have a sidebar and a main body on all the pages in my website that I will give a defined width. They will sit directly next to each other, with the same height.

Sidebar CSS 

#sidebar {

    width: 380px;
    margin-left: 50px;
    float: left;    
    background: #cee7f7;
    padding: 1%;

}

Body CSS 

.container {
     width: 1125px; 
     margin-right: 10%; 
     float:right; 
     background: #fff; 
     padding: 1%;
}

You can see an example at www.dweeman.com/eb/sitetemplate.html (Ignore the bad design).

Basically what I want is for all my divs (logo, phone, sidebar, body, footer etc) to all remain in their respective positions regardless of the screen size, yet with defined sizes. Does this have something to do with the position property?

Any help would be greatly appreciated. (Also how would I best describe this for the title of my question?)

Upvotes: 0

Views: 370

Answers (1)

LoneChaos
LoneChaos

Reputation: 203

Try setting the min-width and min-height of the divs if you want them to stay a specific size regardless of the screen size.

Upvotes: 1

Related Questions