/    Sign up×
Community /Pin to ProfileBookmark

Text spilling out of the box in firefox

Copy linkTweet thisAlerts:
Jul 03.2006

Hi,

Please, help me how can I have flexible box with background color in css that will expand according to the contents. Following is the test code that I have used, it is working in IE but in firefox contents come out of the box. I am looking for the cross browser fix for this:-

The CSS File I am using contains the following:-

div#content{margin-left:190px;margin-top:5px;}
div.box
{
width: auto;
min-width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;

white-space: nowrap

}

following is my html file:-

<html>

<head>
<link href=”test.css” rel=”stylesheet” type=”text/css” media=”all” />
<title>TEST PAGE</title>
</head>

<body>

<div id=”content”>

<div class=”box”>

<H1>Sam</H1>
<H1>Sam</H1><H1>Sam</H1><H1>Sam</H1><H1>Sam</H1>

<p>The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology </p>
</div>
</div>

</body>

</html>

I know one fix is overflow:auto; property of css but this brings scroll bar in firefox which i don’t want.

Kindly, help as soon as possible.

Thanks,
sameer.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@kessaJul 03.2006 — Hi,

I haven't had a chance to try this out, but just a couple of thoughts which may help:

1) width: auto;

I'm not sure if you need to include that in this instance as I believe the width is auto by default. Try removing it to see if that helps.

2)When content pops out of an element it's often because of a floating issue (or sometimes lack of floats). Does the "p" element have a width or float specified anywhere else in your stylesheet? If so, I've try removing that.

3) Another possibility would be to add a "float:left;" to both the "div.box" and "div.box p" elements. That should hopefully force the inner p element to say within the floated div.box - you'll probably need to "clear:both;" after the box but how you do that symantically will depend on the rest of your code an layout.

Hopefully that will give you something to go on and no doubt some others here may be able to help out too. ?

Good luck!

Kessa
Copy linkTweet thisAlerts:
@toicontienJul 03.2006 — Kessa is on the right track. You see Internet Explorer expand the box because the contents don't fit when in fact that's the incorrect behavior. Firefox, Opera, Safari and Netscape will all show the text spilling over the edge. See the paragraph and bulleted list under the heading "Overflow and clipping" from the Web Standards themselves: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

And width: auto; is the default for all block level elements, of which a DIV is a member of. If you want the DIV to expand with the contents, Kessa was correct in saying you need to float it. Just be sure you having a clearing element below the floated DIV you the remaining page contents ride below the floated DIV.
[code=html]<div style="clear: both;">&nbsp;</div>[/code]
But floating an element will also cause it to "shrink wrap" to fit its contents, meaning if there isn't enough content to make it X pixels wide, then it will only be as wide as it needs to fit the content. Instead of floating the DIV, you may be able to give it a minimum width (Ex: min-width: 100px).

But Internet Explorer doesn't support the min-width property. So, what you'll need to do:
div.box
{
width: 40px; /* For IE-Wim */
min-width: 40px; /* For Moz and the Boyz */
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}

/* What Moz and the Boyz can handle, hidden from IE-Win */
html&gt;body div.box {
width: auto;
}
Even after all that, the width of the .box DIV is still hindered by it's containing block. In a nutshell: Make sure the contents fit the block. This all depends on what you're trying to achieve.
×

Success!

Help @sameer2k spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...