Forum Moderators: not2easy
I dont usually post on forums but I have a problem that I cant find the answer too!
Im experienced in CSS but this little problem has been annoying me for a while!
Say I have a div 100px wide by 100px deep with some text inside. In IE when you increase the font size the div expands because of the larger font (even though its a set width and height) BUT BUT BUT... in Firefox the text flows out and over the edges of the div and the div stays the set width and height applied to it?
How do I make firefox expand in size like IE does?
Ta
Mark
Rather than giving your item a fixed height, you might consider a more fluid layout that allows users to size the text to their comfort level.
PS- Welcome! :)
Say I have a container Div and insied 2 more divs. If one div has a h1 h2 etc in, how do I make the other div stretch to the height of the other div?
Ive tried height : 100%, ive tried one of those 'clearing' divs but I just cant seem to make the other div grow to the same height as the other with the content?
Ta
Mark
Thanks for the link. It looks promising at first sight.
I will dig deeper into it so see if it will fit my needs.
Arjan
Here's my test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div em test</title>
</head>
<body>
<div style="background:#ccc; width: 5em; height: 5em;">A bunch of text.</div>
</body>
</html>
You just have to make sure your height is long enough to enclose the text initially. If it is, then the <div> will expand and enclose the text.
The other alternative is to simply not declare a width or height and the <div> will naturally enclose the text.
Hope this helps!
One div that holds 2 divs floated left and right. The one on the left has text in and I want the one on the right to expand in height inline with the one on the left.
yeah, unfortunately there's no surefire way to do that.
I would recommend doing what Fotiman suggests and try out the Faux Columns technique.
Best of luck!
One div that holds 2 divs floated left and right. The one on the left has text in and I want the one on the right to expand in height inline with the one on the left.
and
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div em test</title>
</head>
<body>
<div style="background:#ccc; width: 5em; height: 5em;">A bunch of text.</div>
</body>
</html>
Off the top of my head (and this isn't tested out, so I'm not sure how well it would work, but it may be a starting point!) - what if you had an outer wrapping div, set with a background color of red (for example). Then you have your left hand column in there, floated left, and set at 100% of the outer wrapping div - background color of gray. Then add in your clearing thing for the float at the bottom of the wrapping div.
In this scenario, whichever side has the most content will cause the outer wrapping div to stretch to fit it - thus expanding your red (right side) content. The left, being at 100% height of the encapsulating div, would expand to 100% height, thus making *both* cooumns stretch to the length you want.
Now, I know there's going to be issues with this in IE, but I think that can be wroked out with conditional comments (in fact, I think I may have soemthing like this in my "CSS playing" files" - I'll have to look)
But hopefully that'll get you started :)
html, body {font-size: 100.01%;}
This is a trick that BigJohn from Pie taught me a long time ago, and has worked great. I just answered the same thing on another forum today. And someone else posted the following quote:
From: css-discussSimply put, IE for Windows' relative font size inheritance cascade is broken. The simplest workaround is to not use relative sizes, such as using keywords instead, except on base level containers. If you find it necessary to size through cascade, you'll find % works more reliably than ems. If you prefer using ems to %, then at least set the initial size using % instead, thus: html {font-size: 100.01%;} or body {font-size: 100.01%;} . This eliminates most size inheritance errors. Using 100.01% instead of 100% avoids size inheritance bugs in some versions of Opera.
Also, it is best to work in ff etc. first and then tweak in IE.
