CODEWITHSUNDEEP
htmlcss
spentak
spentak

Reputation: 4727

HTML Min width works max width doesn't

Min width always works. I switch between resolutions 1024x768 and 1400x900. It shrinks to fit the 1024 just fine. The problem is it won't expand in my 1400x900 resolution.

Here is my code:

#page-wrap {
min-width: 1024px;
max-width: 1260px;



}

#main-content {
width: 100%;
margin-left: -295px;
position:relative;
width: 1000px;
}
#main-content-inner {
left: 580px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
background-color:#000000;
position:absolute;
top:100px;
min-width:70%;
max-width:100%;
}

main-content is inside of page-wrap. main-content-inner is inside of main-content.

When on a 1400x900 resolution, I simply want main-content-inner to stretch to 1000px (which is tested and definitely fits within the 1400x900 width)

Thoughts?

Upvotes: 2

Views: 598

Answers (1)

Jason Gennaro
Jason Gennaro

Reputation: 34855

Not tested but I think this is the problem:

#main-content has a width:1000px;.

#main-content-inner probably cannot expand to fill this entirely because of

  1. 2px border width (on each side = 4px) AND
  2. 20px padding (on each side = 40px)

So you will always be at 956px max.

Upvotes: 2

Related Questions