最大宽度px宽度100％

Question

Seems trivial but I seem to be struggling with this. I have a container div and content within. The page needs to be responsive so naturally I am using max width (in px) on everything.

I have added width: 100% to the div, h2 and p tags, but the width does not expand to the max-width. How can I get the divs to expand to their max size without explicitly setting the width to this fixed value?

css and html

 .container {max-width:1200px; width:100%;} .container h2 {max-width:400px; width:100%;} .container p {max-width:900px; width:100%;} 

 <div class="container"> <h2>Dynamically populated using PHP</h2> <p>Dynamically populated using PHP</p> </div> 

EDIT: It was css buried in other divs causing the issue, the code above works.

Answer 1

You forgot the semi-colons after the width rules.

<div class="container">
    <h2>Dynamically populated using PHP</h2>
    <p>Dynamically populated using PHP</p>
</div>

.container {max-width:1200px; width:100%; background-color: red;}
.container h2 {max-width:400px; width:100%; background-color: blue;}
.container p {max-width:900px; width:100%; background-color: green;}

http://jsfiddle.net/kr1b92mu/

I added the background colors to show that it's working :).

Answer 2

The max-width property is used to set the maximum width of an element. This prevents the value of the width property from becoming larger than max-width. It is a "limit".

The width property is the one how stablish the exact width of an element.

http://www.w3schools.com/cssref/pr_dim_max-width.asp