3

So I want to center my website, but I really don't know how to do that. I tried align="center" in container div in HTML but it didn't work.

My other idea was to change widths of header and footer to min-width and it worked. Then I tried to set width of middle column (col2) to min-width to let it expand. But it didn't work too because it does nothing with col2's width. Adding float:right to col3 didn't work either. And now I have no idea what I should do.

HTML

<!Doctype html>
<html>
<head>
  <meta charset = "utf-8"></meta>
  <title>Site</title>
  <link rel = "Stylesheet" type = "text/css" href = "style.css">
</head>
<body>
  <div id = "container" >
    <div id = "header">header</div>
    <div id = "col1" >col1</div>
    <div id = "col2" >col2</div>
    <div id = "col3" >col3</div>
    <div id = "footer">footer</div>
  </div>
</body>
</html>

CSS

body{
  background-color: red;
}
#container{

}
#header{
  width:1000px; /*min-width:1000px*/
  background-color:white;
  height:100px;
}
#col1{ 
  width:300px;
  height:100px;
  background-color:white;
  float:left;
}
#col2{
  width:400px; /*min-width:400px;*/
  height:100px;
  background-color:blue;
  float:left;
}
#col3{
  width:300px;
  height:100px;
  background-color:white;
  float:left; /*float:right; */
}
#footer{
  clear:both;
  background-color:white;
  width:1000px; /*min-width:1000px; */
  height:100px;
}
Badacadabra
  • 8,043
  • 7
  • 28
  • 49
Daniel1490
  • 79
  • 6
  • Possible duplicate of [How to center body on a page?](http://stackoverflow.com/questions/10872688/how-to-center-body-on-a-page) – roberrrt-s May 22 '17 at 05:46

2 Answers2

3

Try This :

#container{

    width: 100%;
    max-width: 1000px;
    margin: 0 auto;

}
Ehsan
  • 12,655
  • 3
  • 25
  • 44
  • I don't know cause your answer is right and it works so thank you so much for help But if you use 960px it makes little problem so its needed to set it for 1000px. – Daniel1490 May 21 '17 at 12:50
  • I have less than 15 rep or something and my votes can't be displayed – Daniel1490 May 21 '17 at 12:53
-1

You can use this:

#divClass{
   width: 100%;     
   max-width: 1000px;     
   margin: 0 auto; 
 }
bonyem
  • 1,148
  • 11
  • 20