CODEWITHSUNDEEP
htmlcss
John Anderson
John Anderson

Reputation: 1075

How do I create a div with 100% width AND left and right margins?

I want to have a div that is 100% width and height, but with left and right margins (I also want top and bottom margins, but one thing at a time). I have been able to achieve a div that is 100% in width and height with a top and left margin, but the bottom and right margins are not recognized. I'm not sure what I'm doing wrong. Here is the css I have used:

#link_wrapper {
    margin:32px 73px 45px 73px;
    width:100%;
    height:100%;
    position:fixed;
    z-index:1;
}

Upvotes: 2

Views: 400

Answers (3)

Robert Niestroj
Robert Niestroj

Reputation: 16151

maybe yo can achieve the desired effect by setting the padding of the parent container with the values of the margin you use for your #link_wrapper.

#parent_container{ padding:32px 73px 45px 73px; }

Then the #link_wrapper doesnt needs any margin.

Upvotes: 0

corymathews
corymathews

Reputation: 12619

You can use css box-sizing to accomplish it (IE8+). Here is it in an example http://jsfiddle.net/Z9xHs/

HTML

<div class="content">hi</div>

CSS

body, html { height:100%; }
.content { 
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding:32px 73px 45px 73px;
    width:100%;
    height:100%;
}

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15619

take a look. i guess this is what you're looking for -> http://tinkerbin.com/qslYAlq8 set width to auto and left and right to 0;

Upvotes: 0

Related Questions