ts10
08-26-2003, 10:26 PM
Ok, after years of table corruption :) I am going to try my first 100% css based website. Loving every second of it, except this second. I can't seem to get this to work.
Here's my page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Who's Who User Management</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="center">
<h1>Who's Who User Management System</h1>
<form>
<div id="leftside">
First Name: <input type="text">
</div>
<div id="rightside">
Address: <input type="text">
</div>
</form>
</div>
</body>
</html>
Here's my CSS file:
#center
{
background: skyblue;
width: 600px;
border: 1px solid black;
padding: 10;
}
#leftside
{
position:absolute; left:10px; top:70px;
background: yellow;
width: 250px;
border: 1px solid black;
padding: 10;
}
#rightside
{
position:absolute; left:300px; top:70px;
background: yellow;
width: 250px;
border: 1px solid black;
padding: 10;
}
h1
{
font-family: arial;
color: black;
}
form, input
{
font-family: arial;
font-size: 12px;
font-color: black;
}
Here's the problem, (you can see my attachment for the pic) I need the two yellow boxes to be INSIDE the blue box as a part of it. If I do relative instead of absolute, the first box works great, however the second box becomes relative to the first box, not to the skyblue box as it should. I have the yellow box <div> inside the original <div> but it doesnt seem to matter. How can I make BOTH boxes relative to the blue, or a part of the blue box. Do you see what I mean?
Here's my page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Who's Who User Management</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="center">
<h1>Who's Who User Management System</h1>
<form>
<div id="leftside">
First Name: <input type="text">
</div>
<div id="rightside">
Address: <input type="text">
</div>
</form>
</div>
</body>
</html>
Here's my CSS file:
#center
{
background: skyblue;
width: 600px;
border: 1px solid black;
padding: 10;
}
#leftside
{
position:absolute; left:10px; top:70px;
background: yellow;
width: 250px;
border: 1px solid black;
padding: 10;
}
#rightside
{
position:absolute; left:300px; top:70px;
background: yellow;
width: 250px;
border: 1px solid black;
padding: 10;
}
h1
{
font-family: arial;
color: black;
}
form, input
{
font-family: arial;
font-size: 12px;
font-color: black;
}
Here's the problem, (you can see my attachment for the pic) I need the two yellow boxes to be INSIDE the blue box as a part of it. If I do relative instead of absolute, the first box works great, however the second box becomes relative to the first box, not to the skyblue box as it should. I have the yellow box <div> inside the original <div> but it doesnt seem to matter. How can I make BOTH boxes relative to the blue, or a part of the blue box. Do you see what I mean?