CODEWITHSUNDEEP
htmlcss
jonasnas
jonasnas

Reputation: 3580

css min-width and margin/padding with absolute positioning

I'm using absolute positioning to have 100% height of the screen. I also want to limit the resizing of my page so I add min-width in my header and content divs. The problem I'm facing is that once resizing reaches the min-width boundary, right side margin disappears. Any suggestions how to make it work?

HTML:

<div id="header">Header</div>
<div id="content">Content</div>

CSS:

html, body{
    background: blue;
    padding:0px;
    margin:0px;

}

#header{
    height:30px;
    background: yellow;
    position: absolute;
    top:20px;
    right:20px;
    left:20px;
    min-width:500px;
}

#content{
    background:green;
     position: absolute;
    top:50px;
    right:20px;
    left:20px;
    bottom:20px;
    min-width:500px;
}

jsfiddle

Upvotes: 1

Views: 4144

Answers (2)

jonasnas
jonasnas

Reputation: 3580

I found a solution my self. The problem is that if you apply min-width on the element which has padding or margin, that padding or margin collapses when you resize the window. So the solution was to wrap that element inside root element and set min-width on the root element.

P.S. I also tried box-sizing approach suggested by Sam but effect was almost the same: margin shrinks but doesn't disappear all. Applying min-width on outer element solves the issue as well.

Here is an example

updated fiddle

Upvotes: 1

SUDO Los Angeles
SUDO Los Angeles

Reputation: 1635

You can use the CSS box-sizing property to accomplish this in modern browsers (IE8+)

Upvotes: 0

Related Questions