The Forum has been Updated
The code has been upgraded to the latest .NET core version. Please check instructions in the Community Announcements about migrating your account.
Ok I have a customer that no matter what I tell him wants tabular data in divs these are 2 big tables and I am having a beast of a time making this somewhat dynamic so that no matter what content is put it that it can grow. Some help would be much appreciated.
This is the code I have in an HTML page
This is my styles that are controlling the divs
You can see the result here:
http://client.logoworks.com/imgdc/schedule.html
As you can see everything looks ok until there are 2 lines of text then the border does not grow. I have no idea anymore how to get this to grow. Very Frustrating.
I found some techniques online that say to use display:table-cell and so forth but nothing works.
Any Ideas? <
This is the code I have in an HTML page
Code:
<div class="table">
<!-- Row 1 Start -->
<div class="rows">
<div class="t1Title">TIME</div>
<div class="r1t2"><strong><a href="design_track.html">Design Track</a></strong></div>
<div class="r1t3"><strong><a href="development_track.html">Development Track</a></strong></div>
<div class="r1t4"><strong><a href="business_track.html">Business & Legal Track</a></strong></div>
</div>
<!-- Row 1 End -->
<!-- Row 2 Start -->
<div class="subRows">
<div class="t1Main">8:00 - 10:30</div>
<div class="t2Main">Registration</div>
</div>
<!-- Row 2 End -->
<!-- Row 3 Start -->
<div class="subRows">
<div class="t1Main">8:45 - 9:00</div>
<div class="t2Main">Welcome/Opening<br />
<strong>Jonathon Stevens</strong>, Last Straw Productions</div>
</div>
<!-- Row 3 End -->
<!-- Row 4 Start -->
<div class="subRows">
<div class="t1Main">9:00 - 10:00</div>
<div class="t2Main">Indie Keynote<br />
<strong>Jay Moore</strong>, The Stategery Group</div>
</div>
<!-- Row 4 End -->
<!-- Row 5 Start -->
<div class="subRows">
<div class="t1Main">8:00 - 10:30</div>
<div class="t2Main">Break</div>
</div>
<!-- Row 5 End -->
</div>
This is my styles that are controlling the divs
Code:
/* Tables that are DIV's */
.table { width: 500px; float: left; }
.rows {float: left; width: 500px; height: auto; border: 1px solid #999;}
.subRows {float: left; width: 500px; height: auto; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999;}
.t1Title {
float: left;
width: 95px;
height: auto;
text-align: center;
font-weight: bold;
border-right: 1px solid #999;
line-height: 35px;
}
.r1t2 {
float: left;
width: 125px;
height: auto;
text-align: center;
font-weight: bold;
padding: 0px 4px;
border-right: 1px solid #999;
line-height: 35px;
}
.r1t3 {
float: left;
width: 125px;
height: auto;
text-align: center;
font-weight: bold;
padding: 0px 4px;
border-right: 1px solid #999;
}
.r1t4 {
float: left;
width: 125px;
height: auto; 35px;
text-align: center;
font-weight: bold;
padding: 0px 4px;
}
.t1Main {
float: left;
width: 85px;
height: 100%;
text-align: center;
font-weight: normal;
padding: 5px;
border-right: 1px solid #999;
}
.t2Main {
float: left;
width: 384px;
height: auto;
text-align: center;
font-weight: normal;
padding: 5px;
}
You can see the result here:
http://client.logoworks.com/imgdc/schedule.html
As you can see everything looks ok until there are 2 lines of text then the border does not grow. I have no idea anymore how to get this to grow. Very Frustrating.
I found some techniques online that say to use display:table-cell and so forth but nothing works.
Any Ideas? <
