text cascading to the right of a picture and then also beneath it RSS

• • Reply
  

  shai44

  Member

  99 Points

  55 Posts

  text cascading to the right of a picture and then also beneath it

  Dec 01, 2012 06:32 AM|LINK

  Hi everyone.

  I have a very interesting situation: I put a picture at the top-left corner of a cell in a table defined in HTML in my webpage .aspx layout. I need to write text that will start at top-right corner of the cell (a header) and then add more text that will appear to the right of the picture until it reaches the bottom of the picture and from there on, fill the entire cell's width. I'm looking for a simple way to do this.

  See the description below to see what I mean visually (sorry for the primitive way of action - I just can't find how to attach a file / picture here - but I'm sure you can see what I mean).

  I succeeded in placing the image and the header as I like, but then when I add the text itself (in a different element than the header), then the text starts beneath the picture and not to its right like what I need. I think this is because asp.net arranges elements in the cell horizontally, and when the space is filled, it goes down beneath the picture which is the element with the maximum height among the picture and header elements within the cell.

  Thanks to anyone who helps.

   

  picture picture picture                            header

  picture picture picture     text text text text text

  picture picture picture     text text text text text

  text text text text text text text text text text

  text text text text text text text text text text

  text text text text text text text text text text ...

   

  • Edited by shai44 on Dec 01, 2012 06:40 AM
• • Reply
  

  Afzaal.Ahmad...

  Contributor

  2660 Points

  1039 Posts

  Re: text cascading to the right of a picture and then also beneath it

  Dec 01, 2012 09:55 AM|LINK

  You will need two divs in a div of header you can try it out as 

  <div class="whole-header">
  <div class="header">
  </div>
  <div class="text">
  </div>
  </div>

  This way your whole of the text will be shown in the front of the picture. 

  Your error is that you are currently using a div or a span or an element that will be shown in front of the picture. However any other element from the cell will be shown as default on the bottom. No matter image is there or not.

  So try to use divs for the job!

  Please "Marks As Answer" if any answer helped you out!
  ~~! FIREWALL !~~
• • Reply
  

  Afzaal.Ahmad...

  Contributor

  2660 Points

  1039 Posts

  Re: text cascading to the right of a picture and then also beneath it

  Dec 01, 2012 09:57 AM|LINK

  Also try out this link please

  http://www.w3schools.com/css/tryit.asp?filename=trycss_float3

  Please "Marks As Answer" if any answer helped you out!
  ~~! FIREWALL !~~
  • Marked as answer by shai44 on Dec 01, 2012 12:18 PM
• • Reply
  

  shai44

  Member

  99 Points

  55 Posts

  Re: text cascading to the right of a picture and then also beneath it

  Dec 01, 2012 12:18 PM|LINK

  Thanks a lot!

• • Reply
  

  Afzaal.Ahmad...

  Contributor

  2660 Points

  1039 Posts

  Re: text cascading to the right of a picture and then also beneath it

  Dec 01, 2012 06:23 PM|LINK

  My pleasure.

  Please "Marks As Answer" if any answer helped you out!
  ~~! FIREWALL !~~