CSS box around box technique
- by webzide
Dear Experts,
I was trying to make an CSS division box with content in it as well as a border around it.
Instead of using the box-border technique, I was trying out a new box to box technique instead.
<html>
<head>
<style type="text/css">
#outer{
height: 20px;
width: 20px;
background-color:#233D78;
}
#inner{
height:18px;
width: 18px;
background-color: #FFF;
font-size: 1em;
text-align:center;
font-family:'Bookman Old Style', serif;
padding: 0px;
margin-top: 1px;
margin-right:auto;
margin-left:auto;
margin-bottom:1px;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="outer"><div id="inner">TEXT</div></div>
</body>
</html>
Somehow the borders are just not showing up right with FireFox.
I tried everything. Setting up the Paddings of both boxes, margin, and messing around with the width.
TO be honest, it took me around 30min to do this and I still can't get it right :(
I know that a way to achieve the same result would be setting up a border around just one box. But I just wanna learn this box around box background-color technique.
THanks in advance
