[RESOLVED]Have should I use CSS so that top right column is aligned horizontally with top left column

Hello!
You can see at the end how it look like when the right column is filled with many rows. If the amount of text is small it looks ok but not now.
Here is the content page that is creating this text. I use master pages.
<asp:Content ID="Content2" ContentPlaceHolderID="MainColumnContent" runat="server">
    <h1 style="text-align:center;">News</h1>
    <table>
       <tr>
         <td style="width:650px">
            <img style="float:left; margin: 5px;"  src="Images/todo.jpg" height="130" width="130" alt="" />
            This is our new case management system called Postit. We have been working with this new system

            for several month and we can now present you with the first version that have been thoroughly tested so it

            should not have any bugs. In this first version we will use windows authentication and
            give you access to every page in the website. We will soon be comming with a new version of this ticket system
            <br /><br />
            In the unlikely that you happen to run into any kind of problem call ITsupport.

            You have the telephone number/E-mail at the bottom of every page that you visit.

         </td>

          <td style="padding-left:50px; float:right">
              <b>Last logged pending Tickets</b>
              <asp:BulletedList  ID="blPendingTickets" runat="server" />
          </td>
       </tr>
    </table>
</asp:Content>

Here is the code behind that is filling the bullet list with data

public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string LastloggedTickets = ConfigurationSettings.AppSettings["LastloggedTickets"];
                DBHandling cEngine = new DBHandling();
                DataSet ds = cEngine.GetLastTickets(LastloggedTickets);

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    string ticket = ds.Tables[0].Rows[i]["HeadLine"].ToString() + ":: " + ds.Tables[0].Rows[i]["Description"].ToString();
                    blPendingTickets.Items.Add(ticket);
                }
            }
        }
    }

This is our new case management system called Postit. We have been working with this new system for several month
and we can now present you with the first version that have been thoroughly tested so it should not have any bugs. In this first version we will use windows authentication and give you access to every page in the website. We will soon be comming with a new
version of this ticket system

In the unlikely that you happen to run into any kind of problem call ITsupport. You have the telephone number/E-mail at the bottom of every page that you visit.

Last logged pending Tickets

  • Tony test1:: testing Här skriver jag nu en lång mycket lång beskrivning av felet. Vi har haft dett afel flera gånger föut.
  • TonyTest1:: Reseportalen kraschar vid inloggning adfgasdfsdf testing testing ewrewr qwerqwe qweqwer qwer qwer Tony testar test test test test.
    Det var en gång en drottning som bodde på stora berget. Dett aberg var mycket högt därför får man inte ramla ned ifrån detta jätte berg. Jag provar med att lägga till en ytterligare rad så får vi se hur det ser utpoerpoiqwe wqeurire wqeuqwer qweireir
    qierqer roqwer .
  • ticket 991122:: testing
  • ticket88:: system är trögt
  • ticket99:: this is my description

Last logged pending Tickets

  • Tony test1:: testing Här skriver jag nu en lång mycket lång beskrivning av felet. Vi har haft dett afel flera gånger föut.
  • TonyTest1:: Reseportalen kraschar vid inloggning adfgasdfsdf testing testing ewrewr qwerqwe qweqwer qwer qwer Tony testar test test test test.
    Det var en gång en drottning som bodde på stora berget. Dett aberg var mycket högt därför får man inte ramla ned ifrån detta jätte berg. Jag provar med att lägga till en ytterligare rad så får vi se hur det ser utpoerpoiqwe wqeurire wqeuqwer qweireir
    qierqer roqwer .
  • ticket 991122:: testing
  • ticket88:: system är trögt
  • ticket99:: this is my description

You need to make a "DIV container" it will combine all the content you page . And in CSS you need to set

.container { display: block; }

Then you need to set widht, padding and margin for ID="blPendingTickets.

After that your all content will be displayed as block and then you will have a nice alignment, which then will be able to work with. My advice to you is do general CSS file with which you can work.

You have my file where I use relative position. Can you just change and post the version that is working without using relative position

//Tony

Hello

If you are using position:relative, you can then use the properties like top, bottom, left, right to control the distances to other HTML elements. To get full understanding, refer to this tutorial,
http://www.barelyfitz.com/screencast/html-training/css/positioning/

Leave a Reply