PDA

View Full Version : Set block as small as possible

vk101
05-04-2007, 05:04 AM
Is there a way to set a block to be as small as possible while still having room for all its elements?

I'm finding that manually setting a width sometimes causes maintenance nightmares when I need to make a little change to one width but many other things on the page break.

An example of what I mean in my question is say you have a left-floated block with width 30%. You also have a right-floated block (sibling to the previous block) with a couple of elements within it. Rather than setting its width to, say, 40%, could I make it "as small as possible" while still containing its elements?

That way, if I needed to change the size of those elements within the right-floated block, the block itself doesn't need changes.

Thanks for your help.
BWiz
05-04-2007, 05:29 AM
I woulnd't set a width at all. Just leave padding in the CSS (that's so the elements don't touch the border), that way there is no definate size of it, and it'll just extend depending on how many elements you have inside of it.
vk101
05-04-2007, 05:34 AM
Thanks again for your quick reply. I tried this earlier and both IE7 and FF expand it to fill the entire available space. (In fact, FF seems to clear the whole block so it can get a whole line to itself.)
BWiz
05-04-2007, 05:36 AM
If your using <div> tags, its default setting is 'display:block;', meaning that it will clear both sides to fit itself. Set it 'display:inline'.
felgall
05-04-2007, 06:58 AM
Blocks automatically fill the whole width unless they have a specific width and are floated.

Inline elements will take up only the space that they require.
_Aerospace_Eng_
05-04-2007, 08:12 AM
But be aware on inline elements you can't add top or bottom padding or top or bottom margins on the inline element itself though elements inside it can have padding or margin on all sides.
VIPStephan
05-04-2007, 02:19 PM
Blocks automatically fill the whole width unless they have a specific width and are floated.

Or are positioned absolutely…
felgall
05-04-2007, 09:28 PM
Or are positioned absolutely…

Yes but using position:absolute is only useful when you use it inside of a position:relative in order to overlap elements or where you set up JavaScript to change toe position of the element continually so that it moves around the page. It just makes the page layout more complicated in other situations since resizing the browser will break most layouts that use position:absolute for anything else.
Arbitrator
05-04-2007, 09:49 PM
Is there a way to set a block to be as small as possible while still having room for all its elements?All of the following declarations can do that. Compatibility issues abound though.


display: run-in
display: inline
display: inline-block
display: inline-table
display: table
display: table-header-group
display: table-footer-group
display: table-row-group
display: table-row
display: table-cell
float: left
float: right
position: absolute
position: fixed


Live Example (http://www.jsgp.us/demos/CF113539.html)

You also have a right-floated block (sibling to the previous block) with a couple of elements within it. Rather than setting its width to, say, 40%, could I make it "as small as possible" while still containing its elements?

That way, if I needed to change the size of those elements within the right-floated block, the block itself doesn't need changes.A floated element should have a width that is “as small as possible” automatically. You can set tolerances such as min-width and max-width if you need finer control over the width without actually setting it. max-width may be what you need for the Firefox problem that you described.
vk101
05-05-2007, 01:46 AM
I tried placing the below code into my browser and seeing how I could get the div to be as small as possible on the right of the page. I've tried many different combinations of floats, display types, and aligns, but to no success...

I'd like to keep the markup as is in the HTML (i.e. textbox before submit button), rather than switching their positions (which could solve the problem by right-floating both elements), for reasons of accessibility and structural integrity.

How could I solve this? Thanks.


<html><body>
<style>
#div {
display: inline;
float: right;
}
#button {
float: right;
font-size: .75em;
}
#textbox {
float: left;
font-size: .75em;
width: 150px;
}
</style>
<div id="div">
<input type="text" class="submit" id="textbox">
<input type="submit" value="Button" id="button">
</div>
</body></html>
koyama
05-06-2007, 07:26 AM
All of the following declarations can do that. Compatibility issues abound though.
That was an interesting list, Arbitrator.

Then there is the opposite question to consider. How to make an element as wide as possible without overlapping adjacent floats? So far I only know of using the overflow property to do this. Even this seems to be an unknown use of this property.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>2-column layout. Shrink-width left column</title>
<style type="text/css">
#left {
float: left;
background: red;
}
#content {
background: yellow;
overflow: hidden;
}
/* IE6 */
* html #content {
zoom: 1;
}
</style>
</head>
<body>
<div id="left">left column</div>
<div id="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>
</body>
</html>
I don't know if there are problems with this code in some of the not commonly used browsers.

IE6 doesn't work as expected with the above code, but IE7 does. The difference is that overflow: hidden doesn't trigger 'layout' in IE6, but does in IE7.

Interestingly, one can fix IE6 by using #content {zoom: 1} as shown. So maybe there is hope for the above code?
Arbitrator
05-06-2007, 09:18 AM
I tried placing the below code into my browser and seeing how I could get the div to be as small as possible on the right of the page. I've tried many different combinations of floats, display types, and aligns, but to no success...

How could I solve this? Thanks.I don’t see why you are floating the input elements at all. Inline elements (those that behave like text) flow onto a single line by default. The following code seems to be what you want.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

<html lang="en-Latn-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo CF113539 #2</title>
<style type="text/css">
div { float: right; background: tan; }
#textbox, #button { font-size: 0.75em; }
#textbox { width: 150px; }
</style>

</head>
<body>

<div>
<input type="text" id="textbox">
<input type="button" id="button" value="Button">
</div>

</body>
</html>

And, please, use correct HTML. The HTML document that you posted contains four errors; it is (1) missing a document type declaration, (2) missing a title element, (3) missing a type attribute for the style element, and (4) has a style element that appears outside of the head element. All of those errors were corrected in the above code.

Then there is the opposite question to consider. How to make an element as wide as possible without overlapping adjacent floats? So far I only know of using the overflow property to do this. Even this seems to be an unknown use of this property.

[…]

Interestingly, one can fix IE6 by using #content {zoom: 1} as shown. So maybe there is hope for the above code?That technique seems to be obscure alright; I didn’t know about it anyway. The CSS2.1 Working Draft (http://www.w3.org/TR/CSS21/visuren.html#propdef-float) says:

The margin box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.Thus, the behavior would appear to be correct. It makes more sense if you think about it in the context of overflow: scroll though.

As for compatibility, I see a three pixel space between the boxes in my standalone version of Internet Explorer 6, so there may be issues with the technique. Oddly, Netscape’s implementation of Internet Explorer 6 doesn’t exhibit the space.
koyama
05-06-2007, 10:46 AM
That technique seems to be obscure alright; I didn’t know about it anyway. [...] Thus, the behavior would appear to be correct. It makes more sense if you think about it in the context of overflow: scroll though.
Thanks, glad that you could show that there is basis in CSS 2.1 Working Draft for such rendering. I do see usefulness in the technique. It is indeed a problem in columnar layout that one doesn't always in advance know which fixed width to use in ones sidebars. (One cannot always predict how long the longest word will be in ones sidebar.)

I see a three pixel space between the boxes in my standalone version of Internet Explorer 6, so there may be issues with the technique. Oddly, Netscape’s implementation of Internet Explorer 6 doesn’t exhibit the space.
You are right. This is the IE6 3-pixel gap (http://www.positioniseverything.net/explorer/threepxtest.html) (article is unfortunately confusing at several points). As such, it is a more general bug in IE6. It can be fixed by introducing a 3-pixel negative margin on the float fed to IE6.

Actually, most liquid templates for 2-column and 3-column layout where the center column is not floated suffer from that same bug.

Sounds interesting with AOL Explorer. I must admit I don't know much about that browser, but this may be the opportunity to check it out.