...

View Full Version : Resolved Div top left aligned inside div with aligned overflow



nobackseat88
07-12-2011, 08:29 PM
Hi everyone. This is basically what I am trying to achieve.

http://i51.tinypic.com/1znv0o4.png

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.



<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

teedoff
07-12-2011, 09:16 PM
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??

nobackseat88
07-12-2011, 09:57 PM
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

Tech.Inno
07-12-2011, 10:03 PM
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

teedoff
07-13-2011, 12:52 AM
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.

nobackseat88
07-13-2011, 03:33 AM
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

Sammy12
07-13-2011, 07:27 AM
why not just use



.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?

Sammy12
07-13-2011, 07:30 AM
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?



.img {
float: left;
}

vikram1vicky
07-13-2011, 10:13 AM
NO need to use postioning.... use following 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. :)

alykins
07-13-2011, 03:07 PM
NO need to use postioning.... use following 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

SB65
07-13-2011, 07:26 PM
#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.

nobackseat88
07-14-2011, 09:52 AM
#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. :thumbsup:

(and thanks everyone else too for your replies)

NBS

vikram1vicky
07-14-2011, 09:58 AM
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:



<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>
:cool:

alykins
07-14-2011, 05:22 PM
Dear,

It works.. just try following 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>
:cool:

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)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum