By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,809 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

CSS Table Replacement Question

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.