12 replies [Last post]
ruijoel
Offline
newbie
Last seen: 5 years 42 weeks ago
Timezone: GMT+1
Joined: 2008-12-03
Posts: 4
Points: 0

Hello,

I want to display a box around a div, and I want it's size to adjust to the text width.
In Firefox, this code works as I want. In IE6/IE7, the box is as big as possible. I want to make this work for IE6 and IE7 (I actually care less about FF, because it's for an intranet).
I tried different values for display and width (which only has one value anyway), but none does what I need.

Here's the relevant CSS code:

/* Div acting like a box */
div.box {
	border: solid 1px #CCCCCC;
	background-color: #f9f9f9;
	display: table;
	padding: 4px;
	margin: 4px 4px 0px 4px;
}

My DOCTYPE is:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

I am allowed to choose whatever DOCTYPE I want.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 2 years 28 weeks ago
Dallas, TX
Timezone: GMT-5
Joined: 2008-01-18
Posts: 227
Points: 36

You can float it to achieve

You can float it to achieve that affect. Not sure if that's exactly what you're looking for.

 div.box {
	border: solid 1px #CCCCCC;
	background-color: #f9f9f9;
	padding: 4px;
	margin: 4px 4px 0px 4px;
	float:left;
}

ruijoel
Offline
newbie
Last seen: 5 years 42 weeks ago
Timezone: GMT+1
Joined: 2008-12-03
Posts: 4
Points: 0

Thanks for the suggestion.

Thanks for the suggestion.
I tried that but it didn't quite do what I was looking for.
The code you gave made it occupy as little space as possible, and the rest of the document wraps around it.
I added float: left; and I even added clear: both; but it didn't do what I want.

I don't want any objects to appear on the left or the right.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 2 years 28 weeks ago
Dallas, TX
Timezone: GMT-5
Joined: 2008-01-18
Posts: 227
Points: 36

I guess I'm a little unclear

I guess I'm a little unclear what you're looking for. You can define a min-width for it if you don't want it to be as small as possible. Do you have other elements floated on the page? One thought that came to mind, is that you could wrap your box div in a container div that has a 100% width property. I think you'll have to define a height for that though. For Instance:

CSS:

div.box {
	border: solid 1px #CCCCCC;
	background-color: #f9f9f9;
	float:left;
	padding: 4px;
	margin: 4px 4px 0px 4px;
	min-width:1000px;
}
.container {
        width:100%;
        height:200px;
}

HTML:

<div class="container">
	<div class="box">
	CONTENT
	</div>
</div>

nonbreakingspace
Offline
Enthusiast
Auckland, New Zealand
Last seen: 4 years 13 weeks ago
Auckland, New Zealand
Timezone: GMT+12
Joined: 2008-02-24
Posts: 64
Points: 1

You could try using a <p>

You could try using a

tag and putting the padding and such onto that element...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 34 weeks 6 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

float it and clear the next

float it and clear the next element in the source (not the floating div itself).

ruijoel
Offline
newbie
Last seen: 5 years 42 weeks ago
Timezone: GMT+1
Joined: 2008-12-03
Posts: 4
Points: 0

Screenshot of expected result

@wolfcry911:
I can't modify stuff outside the div, because it's for a dynamic website.

@downtap:
hmm, that didn't do at all what I needed. And besides, I don't want any constraint on the size. The box still has to be as large as possible to accomodate the contents.

@nonbreakingspace:
I tried using a

instead of a

, but nothing changed.

I attached two images.
The example ff.jpg file is the result I want to obtain. It's a screenshot from Firefox
The example ie.jpg file is the result I have now. It's a screenshot from IE7 (note: I must make it work for IE6 and IE7)

Here's the full code of the page:

<!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>
    <title>Example</title>
    <style type="text/css">
        div.box
        {
            border: solid 1px #CCCCCC;
            background-color: #f9f9f9;
            padding: 4px;
            margin: 4px 4px 0px 4px;
            display: table;
        }
    </style>
</head>
<body>
    <div style='width: 100%; border: solid 2px black;'>
        this is a higher level container<br />
        <div class='box'>
            this is some text
            <br />
            which isn't long enough
            <br />
            to cover the whole width
        </div>
        there's some stuff here and there.
    </div>
</body>
</html>

Good (Firefox):

Bad (Internet Explorer):

AttachmentSize
Internet Explorer 7 (the result I have) 26.47 KB
Firefox screenshot (the result I want) 31 KB
trumpman
Offline
newbie
Campbell, CA, USA
Last seen: 5 years 44 weeks ago
Campbell, CA, USA
Timezone: GMT-8
Joined: 2008-12-17
Posts: 1
Points: 0

re: Screenshot of expected result

I concur with ruijoel's screenshot. I've been wondering how to do this using CSS for such a long time now. Here's a verbal description:

- Have one or more lines of text of arbitrary length, separated by 's.
- Using CSS, display a box (border) with padding around the text, having the end of the longest line of text define the right boundary of the text "block".
- Text lines may be aligned center within this block.

Has anyone got this to work? Maybe with use of the display property with attributes of "block" or "inline" or 'inline-table", or container divisions, or ???. The only way I've found to do this is by use of a table to enclose the paragraph of text.

Please, is there a elegant way to do this using just CSS???

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 1 year 44 weeks ago
Adelaide, Oz
Timezone: GMT+10.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I too have the same problem

I too have the same problem with the text box not taking any notice of my margins. I want it as is but an em or two away from the right as well. I put a Conditional Comment on it for good measure. Smile

msavers

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 5 days ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

If that inner blue box were

Of course IE will make that box 100% wide-- it's a normal block element as far as it's concerned.

        div.box
        {
            border: solid 1px #CCCCCC;
            background-color: #f9f9f9;
            padding: 4px;
            margin: 4px 4px 0px 4px;
        }

That's what IE sees. No set width. Therefore 100% wide. The display: table is ignored as it's not a property IE recognises.

If that inner blue box were given A width for IE6, a small width, then it shouldn't become 100% width--- and if the text is wider than that width, IE6 will expand that box to accomodate the content's width, due to expanding-box bug. Normally we don't want this but it's exactly what you're looking for here.

For IE7, you may need a max-width or the float. Display: table is working for modern browsers (wonder if it's working in Safari though).

Although floating it *should* also work, but IE doesn't shrink-wrap floats the same way modern browsers do. For instance if those br's weren't there and the text was one long line and box were floated, IE would accommodate the line instead of wrapping it. Modern browsers would wrap the text as soon as possible (too soon). But you have manual br's in there so I wonder why floating gives the wrong result (and if floating is too small in width you could still try some padding on the side or something to help. Min-width doesn't work on floats though (in all browsers, I've had it work in FF2 before but I guess that was a bug).

If the containing box with the black border has overflow: hidden on it, the rest of the document shouldn't be wrapping around everything. Everyone coming after this bordered box should see its bottom and react normally.

I'm no expert, but I fake one on teh Internets

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 34 weeks 6 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

do you have any control of

do you have any control of the html at all? What you've posted is terrible - no semantic value at all (not to mention the inline styling and breaks).
Your page may be only an example, but it would be better marked up like so:

<div>
  <p>this is a higher level container</p>
  <div class='box'>
    <p>this is some text<br />
       which isn't long enough<br />
       to cover the whole width</p>
  </div>
  <p>there's some stuff here and there.</p>
</div>

ruijoel
Offline
newbie
Last seen: 5 years 42 weeks ago
Timezone: GMT+1
Joined: 2008-12-03
Posts: 4
Points: 0

response to previous comments

@Wolfcry911
I was just trying to produce the shortest most readable example possible.

I do control the html. It's for a web application, so I have no problem changing the html inside the innermost box, but it would be troublesome to do it on the container only sometimes.

This means I could change the inner box to
<div class='box'><p>stuff</p></div>
but I can't do the same outside the box.

I'll do that when I modify that part of the code.

====

@Stomme poes
I set the box width to 1%, but I don't have what I want either. I only tested in IE6, but it wraps around every word, when I want it to wrap at the line break (or the end of line, 100%, if the text is really long). I attached the result with IE6 when the box width is set to 1%. It's more or less like you described: in FF, the text overflows from the box, in IE6 the box grows to accomodate the text.

I don't feel like floating the box because the document seems to ignore the floated box when it does its layout, meaning that the floating box covers the document below it.

AttachmentSize
IE6 width 1 percent.jpg 18.54 KB
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 5 days ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yeah sorry I shouldn't have

Yeah sorry I shouldn't have said "any width" as IE6 will let wrappable inlines wrap-- it displays the width expanding box bug when it's unwrappable content (like a very long word) while other browsers would let that long word hang out without affecting the width of the actual container.

You could, for IE6 only, set the white-space to nowrap (however this would only be useful if you're still manually adding br tags), in which case the longest line will set the width.

This could also work for the other browsers with a float, since the float shrink-wraps. However it would kinda suck to have to set a br tag manually.

.box p {
  white-space: nowrap;
  float: left;
}
* html .box p {
  float: none;
}

The HTML br's should override the white-space: nowrap declaration in the css. You may also not need the * html declaration (I haven't tested any of this, but if IE6 acts correctly with the float then just leave it in). As said earlier if you float p then .box will need to wrap that float (with haslayout set on the .box for IE and overflow: hidden or something for the modern browsers (note, this triggers haslayout in IE7 anyway).

I'm no expert, but I fake one on teh Internets