attach to bottom of parent element and float so text wraps
Moderator: General Moderators
attach to bottom of parent element and float so text wraps
Does anybody know a way (javascript is OK in this case) that I can attach an element to the bottom right of its parent element, and have the parent element's text wrap around it (IE have it float to the right)? I can't figure out how to do it. 
Are the elements a certain width? Without that it's not easy I guess.
Code: Select all
<div id="content">
<p>Bla bla</p>
<p>Bla bla</p>
<p>Bla bla</p>
<div class="someitem">..</div>
</div>
Code: Select all
#content {
position:relative;
width:800px; /* or %, or em */
padding: 0 0 X Y; /* depending if you need the room for someitem */
}
.someitem {
position:absolute;
bottom:0;
right:0;
width:400px; /* or % or em */
height: ?;
}
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
That solution would put the item in the bottom right, but text wouldn't wrap around it.
Unless an element is floated, text doesn't wrap around it.
I haven't tested this, but try:
Might work.
Unless an element is floated, text doesn't wrap around it.
I haven't tested this, but try:
Code: Select all
<div id="container">
<div id="bottom">
<div id="floater"></div>
</div>
</div>Code: Select all
#container {position: relative;}
#bottom {position: absolute; bottom: 0; height: 200px;}
#floater {float: right; height: 200px;}I want the student portrayed here:
http://mc2design.info/proofs/butte/
to be anchored to the bottom of the content area. I do not care if I need to use javascript, because if it's not available, I just wont even show an image at all. Not that big of a deal.
http://mc2design.info/proofs/butte/
to be anchored to the bottom of the content area. I do not care if I need to use javascript, because if it's not available, I just wont even show an image at all. Not that big of a deal.
I would set it as the background image of he content area (bottom right) and then give the last paragraph(s) a bit of margin/padding right.
Second option: leave it as it is. I don't think it would improve the design much if you put him in the bottom corner. It's kind of nice that you see the picture "above the fold"
Or, position it absolutely and give all text in that content area a right margin/padding to prevent overlap. The extra whitespace wouldn't be bad, in my (humble)opinion.
In many cases like this you'd want some sort of combination of float and positioning behavior, wouldn't you?
Second option: leave it as it is. I don't think it would improve the design much if you put him in the bottom corner. It's kind of nice that you see the picture "above the fold"
Or, position it absolutely and give all text in that content area a right margin/padding to prevent overlap. The extra whitespace wouldn't be bad, in my (humble)opinion.
In many cases like this you'd want some sort of combination of float and positioning behavior, wouldn't you?
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Yeah, what you're asking for isn't possible regularly. What you'd have to do is actually have the element exist near the last paragraphs in your HTML, and then float against them. However, this causes a problem when users change text size, as the image's size remains.
You'd really just have to fake it.
If you wanted, you could have two floating elements against the whole section, one the size of the picture, and the other would be the height from the top of the section to the picture (which would change depending on the browser).
However, there are two problems. One is which event you would use to determine with the height changes (onresize maybe?), and the other is that an elements style attributes (when defined in CSS rather than JavaScript) seem to be inaccessible through JavaScript. So... You'll have to come up with some way to determine the heights, and the you'd be set.
You'd really just have to fake it.
If you wanted, you could have two floating elements against the whole section, one the size of the picture, and the other would be the height from the top of the section to the picture (which would change depending on the browser).
Code: Select all
<div id="normalizer"></div><div id="student"></div>Code: Select all
#normalizer { float: right; width: 1px; height: whatever; /* Height will be dynamic through JS */ }
#student { clear: right; float: right; width: whatever; height: whatever; }Code: Select all
var containerHeight = document.getElementById('container').style.height;
var studentHeight = document.getElementById('student').style.height;
var normalizer = document.getElementById('normalizer');
normalizer.style.height = containerHeight = studentHeight;