Member Avatar for Just-in

Im actually making a calender like one of the other post but just to try and get the just of it. i have 4 months on each page and there are forward and back buttons but i came crossed a problem how do i space them equally ??? any help is appreciated

  • 2 Contributors
  • 1 Reply
  • 127 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by edesigner

Dani AI

Generated

asked about spacing four months evenly; pasted table markup but didn’t address vertical distribution. HTML tables size rows to their content, so equal-looking rows require either an explicit container height or a different layout method. Two practical, reliable options are CSS Grid (preferred) or forcing heights on table rows when table semantics are required.

A straightforward grid approach (2x2) that forces equal row heights needs a fixed or viewport-based height on the grid container so the fractional rows (1fr) can divide that space evenly:

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  height: 80vh; /* or a fixed px value so rows can divide available space */
}

.month {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: auto; /* page stays tidy if month content is taller */
  padding: 8px;
}

If table semantics must be kept (for calendar days), set a wrapper height and distribute tbody space explicitly. That usually means setting the table or wrapper height, then assigning heights to rows (or using CSS grid inside each month cell) — otherwise table rows will grow to fit content and won’t be equal. Beware: forcing heights can produce clipped content; use overflow:auto inside month panels or allow the month header to size separately.

For responsive designs, prefer the Grid approach and let month internals scroll when needed. For reference and browser details see MDN’s CSS Grid documentation: CSS Grid.

Member Avatar for edesigner

hi dear plz follow this one it help 4 u

<span class="Emphasis">Interest rates</span><br />
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable">
<tr><th class="TableHeader"></th><th class="TableHeader">Current rate as at 31 March 2010</th><th class="TableHeader">31 December 2009</th><th class="TableHeader">31 March 2009</th></tr>
<tr class="TableRow"><td>Index1</td><td class="PerformanceCell">1.00%</td><td>1.00%</td><td>1.50%</td></tr>
<tr class="TableRow"><td>index2</td><td class="PerformanceCell">0.50%</td><td>0.50%</td><td>0.50%</td></tr>
<tr class="TableRow"><td>index3</td><td class="PerformanceCell">0.25%</td><td>0.25%</td><td>0.25%</td></tr>
</table>
<span>Source: Bt</span><br /><br />

<span class="Emphasis">Stock markets</span><br />
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable">
<tr><th class="TableHeader"></th><th class="TableHeader">As at 31 March 2010</th><th class="TableHeader">1 month change</th><th class="TableHeader">QTD change</th><th class="TableHeader">12 months change</th></tr>
<tr class="TableRow"><td>index1</td><td class="PerformanceCell">1169.43</td><td class="PerformanceCell">5.88%</td><td class="PerformanceCell">4.87%</td><td class="PerformanceCell">46.57%</td></tr>
<tr class="TableRow"><td>index2</td><td class="PerformanceCell">1958.34</td><td class="PerformanceCell">7.68%</td><td class="PerformanceCell">5.27%</td><td class="PerformanceCell">58.31%</td></tr>
<tr class="TableRow"><td>index3</td><td class="PerformanceCell">5679.64</td><td class="PerformanceCell">6.07%</td><td class="PerformanceCell">4.93%</td><td class="PerformanceCell">44.66%</td></tr>
<tr class="TableRow"><td>index4</td><td class="PerformanceCell">2943.92</td><td class="PerformanceCell">8.30%</td><td class="PerformanceCell">-0.98%</td><td class="PerformanceCell">44.52%</td></tr>
<tr class="TableRow"><td>index5</td><td class="PerformanceCell">978.81</td><td class="PerformanceCell">9.47%</td><td class="PerformanceCell">7.85%</td><td class="PerformanceCell">26.52%</td></tr>
<tr class="TableRow"><td>index6</td><td class="PerformanceCell">3177.77</td><td class="PerformanceCell">10.58%</td><td class="PerformanceCell">6.82%</td><td class="PerformanceCell">44.84%</td></tr>
</table>
<span>Source: B</span><br /><br />

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.