My table currently contains a default profile image. Initially, there might not be any text content and I have set up the CSS styling to allow text to wrap around the default image.
I am facing an issue when trying to position the image statically in a way that allows the text to wrap around it while also starting the vertical positioning of the text near the top of the cell.
The CSS code I'm using for the image looks like this:
.TextWrap {
float:right;
margin:10px;
height:100px;
width:100px;
}
Then, I'm creating my div elements for the image and text content as follows:
<img class="TextWrap" src="@ViewBag.Photo" />
<div id="bio" style="position:relative;top:0px;">
<div style="color:#FFFFFF;text-align:left;margin-left:15px;margin-right:15px;">@Model.Bio</div>
</div>
You can view the problem here: http://jsfiddle.net/2mT4X/
In the Full Text example, both the text and image are positioned relatively at the same distance from the top of the page, which is what I aim to achieve.
In the Partial Text example, you can observe that due to less text content, both elements have dropped closer to the center of the cell.
My goal is to control the positioning of the text and image so that they are always a set distance from the top of the cell (including text wrapping) regardless of the length of the input text.
I desire something akin to vertical alignment to the top, but Table Cells seem to disregard that styling attribute.
While I have some proficiency in CSS, I'm no expert and would appreciate some guidance on how to tackle this issue.