Page 1 of 1
[solved]Simulate a table
Posted: Sat Mar 20, 2004 5:22 am
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 {
background-color: #676; border: 1px solid #000;
font-family: Verdana, Tahoma; font-size: 9px; color: #FFF; font-weight: normal;
padding: 1px; vertical-align: top;
}
.left { text-align: left; vertical-align: top; }
.right { text-align: right; }
Are there any CSS gurus out there who could help me?
Posted: Sat Mar 20, 2004 6:04 am
by markl999
Something like this?
Code: Select all
<html>
<head>
<style type="text/css">
<!--
#colleft {
float: left;
width: 50px;
}
#colright {
float: left;
width: 50px;
}
-->
</style>
</head>
<body>
<div id="colleft">left column</div>
<div id="colright">right column</div>
</body>
</html>
Posted: Sat Mar 20, 2004 6:06 am
by vigge89
i'll check it out, thanks!
Posted: Sat Mar 20, 2004 6:28 am
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...
Posted: Sat Mar 20, 2004 6:43 am
by markl999
Yeah, i think it just needs a spacer.
Eg, add the following css
div.spacer {clear: both;}
then add
<div class="spacer"> </div>
underneath the <div class="left" ... and before the in_tbl closing </div>
Posted: Sat Mar 20, 2004 6:46 am
by vigge89
that worked, but now i got a ugly little space below the image

Posted: Sat Mar 20, 2004 6:47 am
by markl999
Just <div class="spacer"></div> then ?
Posted: Sat Mar 20, 2004 6:48 am
by vigge89
great, works now, i thought you needed the space, becuase otherwise it would end up with nothing at all...
Thank you

Posted: Sat Mar 20, 2004 2:10 pm
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?

Posted: Sat Mar 20, 2004 2:18 pm
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 {
background-color: #676; border: 1px solid #000;
font-family: Verdana, Tahoma; font-size: 9px; color: #FFF; font-weight: normal;
padding: 1px; vertical-align: top;
}
.left { float: left; width: 80%; text-align: left; vertical-align: top; }
.right { float: right; text-align: right; }
div.spacer {clear: both;}
-->
</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>
Posted: Sat Mar 20, 2004 2:25 pm
by vigge89
thanks, works great now
