How do I center my site?
So, I want to focus my site, but I really don't know how. I tried align="center"
on container div in HTML but it didn't work.
My other idea was to change the width of the header and footer to min-width
and it worked. Then I tried to set width
from middle column ( col2
) to min-width
so that it expands. But that didn't work because it doesn't do anything with the width col2
. Adding float:right
to col3
didn't work either. And now I have no idea what to 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;
}
source to share