Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts

    Div top left aligned inside div with aligned overflow

    Hi everyone. This is basically what I am trying to achieve.



    I have got the div in the top left corner done, but I can't get the text to overflow. This is what I have.

    Code:
    <style type="text/css">
    #wrapper {
        border-style:solid;
        border-width:1px;
        width:600px;
        min-height:200px;
    }
    #inner {
        border-style:solid;
        border-width:1px;
        vertical-align:text-top;
        height:100px;
        width:100px;
    }
    </style>
    <div id="wrapper">
    	<div id="inner">
    		 Inner
    	</div>
    	 Outer
    </div>
    Should I be using some absolute/relative positioning?

    Thanks for any help.

    NBS
    Last edited by nobackseat88; 07-14-2011 at 08:55 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Not sure I'm following the logic or neccessity of what you're trying to do. You want an empty white bix 100px by 100px in dimension, but then you want your text to overflow over that empty box??
    Teed

  • #3
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    Not just a 'white box'... it's a div, so I'll be putting an image (think a stamp) or text. I want the text in the outer div to go around the 'white box'.

    Thanks.

    NBS

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Try here, I think it has just the solution you need.
    http://www.echoecho.com/htmlimages08.htm

    or here
    http://www.monkeydoit.com/wrap-text-images-html.php

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You know since image is an inline element, you can just put an image right in the same element as the text. You dont need another div just to insert an image.
    Teed

  • #6
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    Thanks for the replies. Your links aren't what I'm looking for. I need it to be a div, and I need it exactly in the top left corner. If I just left aligned it, it would move according to how much content there is. In some cases I want text as well.

    NBS

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    why not just use

    Code:
    .inner {
     position: relative;
    }
    
    div.box {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     width: 100px;
     height: 100px;
    }
    EDIT: what?? wait what are you trying to do?
    Last edited by Sammy12; 07-13-2011 at 06:29 AM.

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by nobackseat88 View Post
    Thanks for the replies. Your links aren't what I'm looking for. I need it to be a div, and I need it exactly in the top left corner. If I just left aligned it, it would move according to how much content there is. In some cases I want text as well.

    NBS
    ? I don't get it. floating the img?

    Code:
    .img {
     float: left;
    }

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    NO need to use postioning.... use following code:

    Code:
    .parent_element_of_img {
      text-alignLleft; /* it keeps image left*/
    }
    .your_image {
    vertical-align: top; /*it keeps image top */
    }
    hope this is what you are looking for.

  • #10
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by vikram1vicky View Post
    NO need to use postioning.... use following code:

    Code:
    .parent_element_of_img {
      text-alignLleft; /* it keeps image left*/
    }
    .your_image {
    vertical-align: top; /*it keeps image top */
    }
    hope this is what you are looking for.
    i highly doubt that will work, since an img is not text... replace with float:left; clear:left; ... also you may need to add to the parent div display:table-cell; to get vertical-align:top; to work... not sure though

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    #wrapper {
        border-style:solid;
        border-width:1px;
        width:600px;
        min-height:200px;
    }
    #inner {
        border-style:solid;
        border-width:1px;
        vertical-align:text-top;
        height:100px;
        width:100px;
        float:left
    }
    should suffice. Make sure #inner is the first element within #wrapper.

  • Users who have thanked SB65 for this post:

    nobackseat88 (07-14-2011)

  • #12
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by SB65 View Post
    Code:
    #wrapper {
        border-style:solid;
        border-width:1px;
        width:600px;
        min-height:200px;
    }
    #inner {
        border-style:solid;
        border-width:1px;
        vertical-align:text-top;
        height:100px;
        width:100px;
        float:left
    }
    should suffice. Make sure #inner is the first element within #wrapper.
    YES! This is perfect. So simple too.

    Thanks so much.

    (and thanks everyone else too for your replies)

    NBS

  • #13
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by alykins View Post
    i highly doubt that will work, since an img is not text... replace with float:left; clear:left; ... also you may need to add to the parent div display:table-cell; to get vertical-align:top; to work... not sure though

    Dear,

    It works.. just try following code:

    Code:
    <p><img src="abc.jpg" alt="image" style="vertical-align:top;" />some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...</p>

  • #14
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by vikram1vicky View Post
    Dear,

    It works.. just try following code:

    Code:
    <p><img src="abc.jpg" alt="image" style="vertical-align:top;" />some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...some text...</p>
    try re-reading... i said that text-align:left; will not move an image. then said that i am not sure if you need to add table-cell (which shouldn't, but i do not normally use vertical align and wanted to throw it out there if it didn't work off the bat)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •