CODEWITHSUNDEEP
csshtmlresponsive-design
SoldierCorp
SoldierCorp

Reputation: 7700

max-width in div to make responsive design not working

I have a problem with my div to make a page with RWD. I need that my div has max-width: 800px So when resize the browser, the div also resizes and having a maximum is 800px, but doesn't work.

HTML

<div id="container>
    <div class="show-section">
        <h3>Section 1</h3>
    </div>
    <div class="show-section">
        <h3>Section 1</h3>
    </div>
    <div class="show-section">
        <h3>Section 1</h3>
    </div>
</div>

CSS

body {
    background-color: #fffff7;
    font: 16px/22px Helvetica, Arial, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
#container {
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    max-width: 800px;
}

max-width: 800px

enter image description here

width: 70%

enter image description here

When it reaches the 720 approx. not resized and is not as it should be centered on the screen, but if instead of max-width: 800px; would put width: 70% works. But I do not want it that way because when the screen is too large, so is the div and so I would like to have a size limit.

Upvotes: 0

Views: 4726

Answers (1)

Maikel D
Maikel D

Reputation: 301

Seems to work for me, I just needed to add a little double quote after the 'container' ID.

<div id="container>

To

<div id="container">

Fiddle: http://jsfiddle.net/mUCSz/1/. Just resize the preview pane.

Upvotes: 3

Related Questions