Jump to content

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)

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.