CSS: Positioning child table using width percentage?

Issue

Page content, CSS Stylesheet

When you visit the page content link, take the sample code below and submit it. You will notice that the child table source_code does not stretch all the way to the right. If I add width: 100% to the syntax_table class, it fixes the problem but the source_code table aligns right and I can’t make it move to the left.

I’ve spent about 2 hours trying to fix it, I need some help now.

Here is some C# sample code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Test1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Calculate method.
        /// </summary>
        /// <param name="sender">Sender</param>
        /// <param name="e">Event Arguments</param>
        private void btnCalculate_Click(object sender, RoutedEventArgs e)
        {
            double weight;
            int heightf, heighti;

            Double.TryParse(this.txtWeight.Text, out weight);
            Int32.TryParse(this.txtHeightF.Text, out heightf);
            Int32.TryParse(this.txtHeightI.Text, out heighti);

            if (!(heightf >= 1))
                MessageBox.Show("A person is at least 1 foot tall.");
            else if (!(weight >= 1.0))
                MessageBox.Show("A person cannot weigh nothing.");
            else if (heightf >= 12)
                MessageBox.Show("A person is not taller than 12 feet.");
            else
            {
                double kg = weight * 0.45359237;
                int height = heighti + (heightf * 12);
                double bmi = weight / (height * height) * 703;
                double gbmi = Math.Round(bmi, 1);
                this.txtBMI.Text = bmi.ToString("n1");
            }
        }
    }
}

Solution

That’s because the 2 table cells on .syntax_table are sizing themselves, which your browser is going to guess on. You need to at least set a width of the table cell containing line_numbers

<table class="syntax_table">
     <tr>
           <td class="lines"><table class="line_numbers">...</table></td>
           <td><table class="source_code">...</table></td>
     </tr>
</table>

Styles

.source_code { width: 100%; } // add this to give source_code full width of it's cell
.lines { width: 50px } // or set to a percentage, then .code should take up the rest

Answered By – Doozer Blake

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.