Jump to content

[SOLVED] Border Troubles


flowingwindrider

Recommended Posts

I'm trying to learn to replace the tables on my website with div tags. I've figured out some of the positioning to make it look like my old table, but I can't seem to get a border around the entire thing. Below is my code (this is just a test page for experimentation). Can anyone help me to understand why this border doesn't go around the whole thing?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Employment Listings</title>
<style type="text/css">
#border {
border: 3px solid #FFFFFF;
}
.s2, .s3, .s4, .s6{
font-family: "Poor Richard";
font-weight: normal;
font-size: 16pt;
text-align: center;
background-color: #FFFFFF;
position: relative;
float: left;
}
.s2{
width: 10%;
}
.s3{
left: 6px;
width: 20%;
}
.s4{
left: 9px;
width: 15%;
}
.s5{
text-align: center;
font-family: "Poor Richard";
font-size: 18pt;
}
.s6{
left: 3px;
width: 53%;
}
</style>
</head>

<body style="background-color: #0ACCF5; background-image: url('../../../images/InsetBackground.jpg')">

<p class="s5">Employment Listings</p>

<div id=border>
     <div><span class="s2">#</span></div>
     <div><span class="s6">Type of Job</span></div>
     <div><span class="s3">Posted On</span></div>
     <div><span class="s4">Details</span></div>
</div>

</body>
</html> 

Link to comment
https://forums.phpfreaks.com/topic/61142-solved-border-troubles/
Share on other sites

Based on the code you posted, I suspect you're trying to create something with 4 columns and probably a number or rows .... exactly why html has the table element.

 

Tables are perfect for tabular data and 'wrong' for layout

 

CSS is perfect for layout and makes no sense for tables (except for content presentation styling)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.