4 replies [Last post]
pacha
Offline
newbie
Last seen: 18 years 21 weeks ago
Joined: 2004-05-07
Posts: 3
Points: 0

hi how can i format 2 vertical boxes like <tr> for table, so that the second box underneath the firstbox move down if the first box has more content. now the firstbox overlap the secondbox. thanks

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Something like this maybe?

Not sure exactly what you want but this will give you vertical boxes. Of course you wil need to do your own styling..

<style type="text/css">
/* Heading used alone or with subbox below */
.heading {
background:#808;
border:0px solid #808;
padding:5px 8px;
font-weight:bold;
text-transform:uppercase;
color:#fff;}
/* Subbox should be used with the Heading style above */
.subbox {
border-bottom:1px solid #808;
border-left:1px solid #808;
background:#fff;
padding:5px;}
</style>

<div class="heading">News Items</div>
<div class="subbox">Put stuff here
and more stuff<br>
and even more stuff</div><br>
<div class="heading">Today</div>
<div class="subbox">Put more stuff here</div><br>

pacha
Offline
newbie
Last seen: 18 years 21 weeks ago
Joined: 2004-05-07
Posts: 3
Points: 0

two flexible vertical boxes

thanks, i meant if i use table would be like this:
<table>
<tr><td>content 1 here</td><td>another content for the first row</td></tr>
<tr><td>content 2 here</td><td>another content for the second row</td></tr>
</table>

how can i transform that into div and css without table. my problem is that the second row is overlaped by the content from the first row.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

two flexible vertical boxes

If you still want to use a table design check this out for css and tables
http://www.bowdoin.edu/templates/tables.html

or if you want only divs and css google for css layouts or go to positioniseverything and learn about floats

Maks
Offline
Regular
Afghanistan
Last seen: 18 years 21 weeks ago
Afghanistan
Joined: 2004-05-08
Posts: 21
Points: 0

two flexible vertical boxes

If you make position: relative, then all the content will follow the html flow of the page and should not overlap. When you make position: absolute, this allows overlap with divs. Position: relative does affect vertical spacing. if the first div is set to top: 10px; and the second is done the same, expect a 10px vertical space between divs.

Any guru's please correct me if I'm wrong, I'm pretty new myself.

When strong, feign weakness
When weak, feign strength
When on deadly ground, Fight!