Magentix
if (OP.statement == false) postCount++;
- Reaction score
- 107
EDIT: Solution found, it's "white-space: nowrap;" in CSS
All right, I ran into a CSS problem that's been bugging me endlessly.
Basically, whenever I place an absolute div, I expect it to take on the width of whatever I type in there.
This works fine in most of the cases, but it seems that when the parent container is smaller than the text in the child div, the child div starts applying word wrap... I do not want that :/
Save and open this code as a .htm file to see what I'm talking about:
All right, I ran into a CSS problem that's been bugging me endlessly.
Basically, whenever I place an absolute div, I expect it to take on the width of whatever I type in there.
This works fine in most of the cases, but it seems that when the parent container is smaller than the text in the child div, the child div starts applying word wrap... I do not want that :/
Save and open this code as a .htm file to see what I'm talking about:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div style="width: 500px; height: 24px;">
<div style="padding: 0px 10px; background-color: red; float: left; height: 100%; position: relative;">
<div style="padding: 0px 10px; margin-top: 24px; background-color: green; position: absolute; top: 0px; left: 0px; display: block;">
Word for word for word for word
</div>
This is long enough and thus doesn't cause word wrap
</div>
</div>
<br /><br />
<div style="width: 500px; height: 24px;">
<div style="padding: 0px 10px; background-color: red; float: left; height: 100%; position: relative;">
<div style="padding: 0px 10px; margin-top: 24px; background-color: green; position: absolute; top: 0px; left: 0px; display: block;">
Word for word for word for word for word for word
</div>
This causes word wrap
</div>
</div>
<br /><br />
<br /><br />
<br /><br />
"Hacked" example by using fixed width on child div
<div style="width: 500px; height: 24px;">
<div style="padding: 0px 10px; background-color: red; float: left; height: 100%; position: relative;">
<div style="padding: 0px 10px; margin-top: 24px; background-color: green; position: absolute; top: 0px; left: 0px; display: block; width: 350px;">
Word for word for word for word for word for word
</div>
This is desired
</div>
</div>
</body>
</html>
