468,316 Members | 2,115 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

CSS Table Replacement Question

Hi,

Hopefully someone can help with my little problem. I am looking to
have replace a common table but am having trouble with the alignment.

I want to have 2 "columns" of information held within the parent <div>
as follows:

--------------------
| col1 col2|
| |
| col1 col2|
| col1 col2|
| col1 col2|
--------------------

What I am getting is the following:

--------------------
| col1col2 |
| |
| col1col2 |
| col1col2 |
| col1col2 |
--------------------

I am using the following code where col1 = .label and col2=.data

<html>
<style>
#Hrs2 { position:absolute; left:1; top:15; width:200;
background-color:white; font-size: 11px; color: #333366;
padding:5px;border: 1px solid #333366; text-align: left; z-index:52; }

#Hrs2 .label {font-size: 11px; color: #666666; font-weight:
normal; text-align: right; display:inline;}
#Hrs2 .data {font-size: 11px; color: #990000; font-weight:
bold; text-align: right; display:inline; position:relative;}
#Hrs2 .monthLabel {font-size: 12px; color: #666666; font-weight:
bold; margin: 5px, 0px, 5px, 0px;}

</style>
<body>
<div id="Hrs2">
<div class="label">Total for 2004-04-10 :</div>
<div class="data">12.25</div>
<div class="monthLabel">June Information:</div>
<div class="label">Expected :</div>
<div class="data">200</div>
<div></div>
<div class="label">minus Worked :</div>
<div class="data">150.00</div>
<hr>
<div class="label">Balance :</div>
<div class="data">50.25</div>
</div>
</body>
</html>

Thanks in advance.

Dave
Jul 20 '05 #1
1 2852
Dave wrote:
Hi,

Hopefully someone can help with my little problem. I am looking to
have replace a common table but am having trouble with the alignment. <div class="label">Total for 2004-04-10 :</div>
<div class="data">12.25</div>
<div class="monthLabel">June Information:</div>
<div class="label">Expected :</div>
<div class="data">200</div>
<div></div>
<div class="label">minus Worked :</div>
<div class="data">150.00</div>
<hr>
<div class="label">Balance :</div>
<div class="data">50.25</div>


This is tabular data. Use a <table>. <table>s are only evil when used
for layout; they are the correct element for presenting tabular data.

Your proposed solution replaces the perfectly good table with a hideous
<div> hack that is inappropriate. What happens if the user's UA doesn't
have CSS support?

--
Mark.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Paul Miller | last post: by
3 posts views Thread by J Trost | last post: by
5 posts views Thread by Michael G. Scott | last post: by
2 posts views Thread by Roy | last post: by
10 posts views Thread by Trevor | last post: by
11 posts views Thread by sam_cit | last post: by
1 post views Thread by =?ISO-8859-1?Q?S=F8ren?= | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.