CODEWITHSUNDEEP
css
NaN
NaN

Reputation: 1306

How to get a margin around the page without content being pushed out

I want to have a somewhat fluid site where the min-width would be 1000px and the maximum width would be 1200px. Can someone either show me how to do this or point me to a tutorial?

The issue that I was having was that if I gave a 10px margin on the body, whatever was on the page was being pushed off the right side of the page by 10px. How do I correct this?

Upvotes: 0

Views: 175

Answers (3)

Shiridish
Shiridish

Reputation: 4962

Here is one good website that should help you to see the CSS for creating a fluid and fixed layout website-

http://csslayoutgenerator.com/

Regarding your 10px margin issue, here is a Test fiddle- (CLICK here), that I have made. What is the issue in it?

css-

body
{
    margin:10px;
    min-width:400px; 
    max-width:450px;
}
#test
{
background-color:yellow;
}

Upvotes: 1

Cody Guldner
Cody Guldner

Reputation: 2886

add the border-box property to you're element. This ensures that no matter what border, margin, or padding you place on the element, it will always produce a width that you specify

#element{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
min-width:1000px;
max-width:1200px;
}

Upvotes: 1

JuSchz
JuSchz

Reputation: 1198

If you want to apply your margin, only if your width if more than a specific value, you can use media queries : 

@media screen and (min-width: 1200px) {
    margin:10px;
}

Upvotes: 1

Related Questions