CODEWITHSUNDEEP
htmlcss
swiper192
swiper192

Reputation: 57

set webpage content to default width, but also resizable

I am trying to make a completely responsive website, but I need the pages to have a default width of 960px. The structure I have is as follows:

<div id="container">
<table id="content">
all the content is here
</table>
</div>

now I want the table to be a default width of 960px, but I want it to be able to re-size as well, just like its width and height were auto and its position relative. These are the styles I have now

#container{
margin: 0 auto;
position: relative;
}
#content{
width: 960px;
height: auto;
box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
-webkit-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
-mox-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
}

If I set the #content width to auto, then the webpage is fully responsive but has no default width. If I set it to 960px like I have above, the entire webpage has a fixed width. I have been struggling with this for quite a while, any help is appreciated, thanks!

Upvotes: 1

Views: 583

Answers (2)

PatrikJarl
PatrikJarl

Reputation: 118

I see that albertxing already gave you an awsome answer, but I wanna recommend you to get to know Ethan Marcotte - the Godfather of responsive webdesign (rwd).

He has composed some great articles at Alistapart that you may want to begin with. Great stuff!

Upvotes: 2

Albert Xing
Albert Xing

Reputation: 5788

Try this:

#content{
    max-width: 960px;
    width: 100%;
    height: auto;
    box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
    -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
    -mox-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
}

Note that I've set 960 as the max-width, but then set the width to 100%. This would make the website responsive, but still have the width to be 960px (unless the browser size is smaller than this).

Upvotes: 3

Related Questions