I am trying to make a new tab page for Chrome. I have three columns, and I want one of them (the one with ID col1) to be centered. I've tried to set the side margins to auto, but instead of this:
I get this:
Is there a way to get the col1 div to be centered?
EDIT: I realize the problem is the absolute positioning.
My HTML/CSS:
<html>
<head>
<style>
body {
background-color: #F1F1F1;
}
I get this:
Is there a way to get the col1 div to be centered?
EDIT: I realize the problem is the absolute positioning.
My HTML/CSS:
<head>
<style>
body {
background-color: #F1F1F1;
}
#col, #col1, #col2 {
position: absolute;
top: 0px;
bottom: 0px;
width: 20%;
background-color: #FFF;
z-index: 2;
border-style: solid;
border-left-width:1px;
border-right-width:1px;
border-top-width: 0px;
border-bottom-width: 0px;
border-color:#aaa;
}
#col {
left: 10%;
}
#col1 {
margin: 0 auto;
}
#col2 {
right: 10%;
}
#shadow, #shadow1, #shadow2 {
position: absolute;
top: 0px;
bottom: 0px;
width: 20%;
border-radius: 60%;
box-shadow: 0px 0px 25px 15px #777;
z-index: 1;
}
#shadow {
left: 10%;
}
#shadow1 {
margin: 0 auto;
}
#shadow2 {
right: 10%;
}
</style>
</head>
<body>
<div id="col">
</div>
<div id="shadow"></div>
<div id="col1">
</div>
<div id="shadow1"></div>
<div id="col2">
</div>
<div id="shadow2"></div>
</body>
</html>