[RESOLVED]How to place a column to the rignt when the first column surround an image

In this piece of code where I have an image and some text that surround it. This work fine.
But now the code that is comment should be placed to the right and aligned horizonal with the text to the left.
I can’t make it work the code that should be placed to the right is instead placed below the code the the left.

<div style="text-align:center">
      <div style="width:550px; height:100%; overflow:auto;">
      <img style="float:left; height:100px; width:100px; margin:4px;" src="Images/todo.jpg" alt="" />
         <div style="width:500px; margin:0 450px 0 0;">
             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.

          </div>

         <%–<div style="width:160px; text-align:left; overflow:auto;" >
             <b>Last logged pending Tickets</b>
             <asp:BulletedList  ID="blPendingTickets" runat="server">
                <asp:ListItem>  This is our new case management system called Postit.

                </asp:ListItem>
             </asp:BulletedList>
          </div>–%>
      </div>
     </div>

//Tony

try setting the float property  to your div… 

And also its a good practice to put all your styles into classes so that your code is lot cleaner..

<div style="text-align:center">
    <div style="width:700px; height:100%; overflow:auto;">
	    <div  style="float:left;width:70%">
            <img style="float:left; height:100px; width:100px; margin:4px;" src="Images/todo.jpg" alt="" />
            <div style="width:500px; margin:0 450px 0 0;">
				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.
			</div>
        </div>
        <div style="float:right;width:28%">
			<div style="width:160px; text-align:left; overflow:auto;" >
				<b>Last logged pending Tickets</b>
				<asp:BulletedList  ID="blPendingTickets" runat="server">
					<asp:ListItem>  This is our new case management system called Postit.
					</asp:ListItem>
				</asp:BulletedList>
			</div>
		</div>
     </div>
 </div>

I have increased the width of the main div to 700px.. Because 550px is too small for it..

Also set the width in percentages for th eleft and right divs

I have seperated this into classes so that it makes more sense.. try this and check if it works

<div class="text-center">
    <div class="divMain" >
        <div class="divLeft" >
            <img  src="Images/todo.jpg" alt="" />
            <div>
                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 coming
                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.
            </div>
        </div>
        <div class="divRight" >
            <div>
                <b>Last logged pending Tickets</b>
                <asp:BulletedList  ID="blPendingTickets" runat="server">
                    <asp:ListItem>  This is our new case management system called Postit.
                    </asp:ListItem>
                </asp:BulletedList>
            </div>
        </div>
     </div>
 </div>

// This is the styles you need to put in the class file

.text-center
{
  text-align:center
}

.divMain
{
    width:700px;
    height:100%;
    overflow:auto;
}

.divLeft
{
    float:left;
    width:70%
}

.divRight
{
    float:right;
    width:29%
}

img
{
    float:left;
    height:100px;
    width:100px;
    margin:4px;
}

.divLeft > div
{
    width:500px;
    margin:0 450px 0 0;
}

.divRight > div
{
    width:160px;
    overflow:auto;
}

Hello!

No this was not correct you might missunderstood me. The text in the column to the left shall surround the image that is located up to the left and the column to the right must be alignt horizonal with the image and the text to the left.
I might have to use position and relative ?

//Tony

Think it does not make any sense to be .. Can you explain your problem more clearly.. By using the class names in the code above.. !!

This might be of help

http://jsfiddle.net/QcNTP/   you can edit your styles here

Here you have the aspx code. I use relative position to make it look the way I want you can just try it so you can see how it should look like. Just find a small image that you can use instead of mine.
I move to classes(external style) when the program is finished but keep the inline style.

<%@ Page Title="DefaultPage" Language="C#" MasterPageFile="~/MasterPages/Layout.Master"  AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="TicketSystem.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainColumnContent" runat="server">
    <h1 style="text-align:center;">News</h1>
  <div style="text-align:center">
      <div style="width:1000px; height:100%; overflow:auto;">
         <img style="float:left; height:100px; border:1px; border-color:black; border-style:solid; width:100px; margin:5px;" src="Images/todo.jpg" alt="" />
         <div style="width:650px; ">
             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.

         </div>

         <div style="width:280px; text-align:left; position:relative; bottom:141px; left:650px;">
            <b>Last logged pending Tickets</b>
             <asp:BulletedList  ID="blPendingTickets" runat="server">
             <asp:ListItem>
                 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 soo
             </asp:ListItem>

              <asp:ListItem>
                 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 soo
             </asp:ListItem>
             </asp:BulletedList>
         </div>
      </div>
     </div>
</asp:Content>

I removed the position:relative  for the div. Instead of that I have added the float:left to both the div’s . Also the div with width:650px has been moved above the image..  Check this and let me know If I understood you right..

<h1 style="text-align:center;">News</h1>
  <div style="text-align:center">
      <div style="width:1000px; height:100%; overflow:auto;">
         <div style="width:650px; float:left  ">
             <img style="float:left; height:100px; border:1px; border-color:black; border-style:solid;
                 width:100px; margin:5px;" src="Images/todo.jpg" 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.
         </div>

         <div style="width:280px; text-align:left;float:left;margin-left:5px ">
            <b>Last logged pending Tickets</b>
             <asp:BulletedList  ID="blPendingTickets" runat="server">
               <asp:ListItem>
                 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 soo
               </asp:ListItem>

              <asp:ListItem>
                 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 soo
             </asp:ListItem>
             </asp:BulletedList>
         </div>
      </div>
     </div>

Yes this was the layout that I wanted.
Many thanks.

Do you know a good book about CSS.

//Tony

Tojo

Do you know a good book about CSS.

To learn CSS you have lots of online tutorials if you want a quick grasp of it..

http://www.w3schools.com/css/

If you want to spend more time to study in detail

Eric Meyer on CSS: Mastering the Language of Web Design

The Zen of CSS Design: Visual Enlightenment for the Web

These are good books which you can start of with minimum CSS knowledge.

One more thing. Which class name would be suittabe to have on the divs according to you.

//Tony

Always make it a point to give class names which makes sense in the current context , so that if multiple developers are working on the same project it makes sense as what the css class means..

divRight and divLeft   or  divSummary  and divticket  can be used .. according to me. You can have better names if it makes good sense..

Leave a Reply