[solved]Simulate a table

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

[solved]Simulate a table

Post by vigge89 »

I need a 2-celled table on my site, with one left cell and one right cell

Code: Select all

-----------
|  1 |  2 |
|  1 |  2 |
-----------
but i can't come up with how to do it.

I've tried using a div for the "main"-table, and then used 2 <span>s for creating cells, but this don't work.

Code: Select all

<div class='in_tbl'>
<span class='left'>left column</span>
<span class='right'>right column</span>
</div>
Here's the CSS for it:

Code: Select all

.in_tbl &#123;
background-color: #676; border: 1px solid #000;
font-family: Verdana, Tahoma; font-size: 9px; color: #FFF; font-weight: normal;
padding: 1px; vertical-align: top;
&#125;

.left &#123; text-align: left; vertical-align: top; &#125;
.right &#123; text-align: right; &#125;
Are there any CSS gurus out there who could help me?
Last edited by vigge89 on Sat Mar 20, 2004 2:25 pm, edited 3 times in total.
User avatar
markl999
DevNet Resident
Posts: 1972
Joined: Thu Oct 16, 2003 5:49 pm
Location: Manchester (UK)

Post by markl999 »

Something like this?

Code: Select all

<html>
<head>
<style type="text/css">
<!--
#colleft &#123;
  float: left;
  width: 50px;
&#125;
#colright &#123;
  float: left;
  width: 50px;
&#125;
-->
</style>
</head>
<body>
<div id="colleft">left column</div>
<div id="colright">right column</div>
</body>
</html>
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

i'll check it out, thanks!
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

Yep, it appears right, but now the parent div for the cells only shows up above the text & image, instead of how it should look like (like an normal table)

In IE, the parent Div is as heigh as the text, but the image is outside, while it in Firefox appears above both elements.


http://vigge89.mine.nu/mgs3/?p=m_equip - here it is...
User avatar
markl999
DevNet Resident
Posts: 1972
Joined: Thu Oct 16, 2003 5:49 pm
Location: Manchester (UK)

Post by markl999 »

Yeah, i think it just needs a spacer.
Eg, add the following css
div.spacer {clear: both;}

then add
<div class="spacer">&nbsp;</div>
underneath the <div class="left" ... and before the in_tbl closing </div>
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

that worked, but now i got a ugly little space below the image :?
User avatar
markl999
DevNet Resident
Posts: 1972
Joined: Thu Oct 16, 2003 5:49 pm
Location: Manchester (UK)

Post by markl999 »

Just <div class="spacer"></div> then ?
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

great, works now, i thought you needed the space, becuase otherwise it would end up with nothing at all...

Thank you :D
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

now after some time, i've discovered that if i have text which is longer than the left column, the text continues over to the right column, making the right columns image position itself further down.

does anyone know how to fix this? :?
User avatar
markl999
DevNet Resident
Posts: 1972
Joined: Thu Oct 16, 2003 5:49 pm
Location: Manchester (UK)

Post by markl999 »

Hmm..shouldn't happen if you provide a width for the left div ..
Eg

Code: Select all

<html>
<head>
<style type="text/css">
<!--
.in_tbl &#123;
background-color: #676; border: 1px solid #000;
font-family: Verdana, Tahoma; font-size: 9px; color: #FFF; font-weight: normal;
padding: 1px; vertical-align: top;
&#125;

.left &#123; float: left; width: 80%; text-align: left; vertical-align: top; &#125;
.right &#123; float: right; text-align: right; &#125;
div.spacer &#123;clear: both;&#125;
-->
</style>
</head>
<body>
<div class='in_tbl'>
<div class='left'>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer eu odio in pede
ornare hendrerit. Etiam tempus, libero sed mattis aliquam,
massa ante vestibulum sapien, sed ullamcorper orci erat at leo.
Nunc posuere fringilla nulla. Morbi sodales. Vestibulum urna mi,
tincidunt eget, ultrices a, vehicula eu, lectus. Duis wisi lectus,
fringilla ac, imperdiet ac, vehicula et, nulla. Duis ultricies.
Nam sagittis commodo sem. Maecenas nunc erat, euismod sed, congue ut,
consequat et, dolor. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Curabitur convallis.
Aliquam imperdiet ante quis urna. Donec sollicitudin malesuada purus.
Integer non erat. Nulla arcu. Nullam nisl. Nulla eros sem, suscipit
ac, dapibus eu, molestie sed, lorem. Sed in arcu.</div>
<div class='right'><img src='knife.jpg' height="125"/></div>
<div class="spacer"></div>
</div>
</body>
</html>
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

thanks, works great now :D
Post Reply