Floating block level element: is it necessary to set the width, if so, how?
Let's say I have text boxes, dropdownlists, and submit buttons. These are all inline elements. This means that "officially" margins, padding, width and height properties should be ignored (in practice, they are not). If I had to make the right path to set the height on the button, I would write something like display: block and then determine the height. But there are considerations that a block level element will expand unexpectedly, so I would be better off setting its width to some fixed value. The problem is that I don't know its width, as it can be dynamically determined from the button text.
Another scenario: I want to create a menu via <ul>
and <li>
. I want this to be horizontally aligned, with some elements grouped to the left and a few stretched to the right. Both <ul>
and <li>
are block-level elements. Since I want my menu to have all the available horizontal space, then to play with the height of the elements and have the menu items shifted on both sides, block mode is fine for me. I just use float: left and float: on the right to accomplish the task. But again, the use would have to set the width of the menu items since they are block items. I don't know their widths, because the text of the elements may differ. But it seems that everything turns out fine, as it is.
I didn't notice any issues with both inline elements being forced to render as block elements without being floated or set to width, or with the list element example. It works great in IE7, FF3, Opera 9 and Safari regardless of the current version. The question remains: should we worry about these inline-to-block elements, or actual block elements but no width set, or just leave it as it is? Am I missing something or is this another one of those things that you just shouldn't expect to get right?
source to share
Let's say I have text boxes, dropdownlists and submit buttons. They are all inline elements. Which means that "officially" the margin, padding, width and height properties should be ignored (not really practical). If I were to get the height right up to the button I would write something like display: block and then determine the height. But there are considerations that the block-level element will expand unexpectedly, so I would rather set its width to some fixed value. The problem is that I don't know its width since then it can be dynamically defined on the button text.
Unless you're paying attention to Internet Explorer's quirky browsing patterns , you shouldn't worry about anything expanding or ending unexpectedly. If you take care of the normalization for the browser version you should be fine. If you have an unexpected and unwanted side effect on your path to fame, you debug it as this is a programmer error you are encountering. CSS may be fancy, but that's not a good excuse 95% of the time for most major browsers. The remaining 5% we do not speak.
This is how I understand your problem:
You want a floating point menu <li>
so that you have a horizontal menu that spans the width of the viewport (what your user sees in the browser window) to be a constant width of the viewport.
It sounds like you are thinking in terms of a fixed width design, when what really looks like what suits your purposes is a wave width design. This means that you are creating a project that is "resilient" and expands and shrinks relative to the size of the user's browser window. If you've created your design with pixel widths set for each element, you can probably find an elegant way to maintain header widths and navigation, but have a fixed width main content area. You can find a happy environment without a complete reorganization. This step-by-step guide will probably be what you are looking for. Good explanation of the terms fixed width and fluid width can be found here if you are unfamiliar with the jargon and would like to take a closer look at these ideas.
Another road:
Setting the width for all floated elements is not only recommended but also part of the CSS2 standard according to the W3C.
- Angelina
If we take the "Official" line that you mentioned, then life is easy, since we don't have to worry about widths, heights, and for these elements.
Don't think a pixel is perfect, don't worry about presentation details, adhere to standards, let the browser and its users define styles ...
(if it were really so right in the "non-offline" real world)
source to share
Ok, I suppose my question was not understood correctly. What happens if I have not set the width for floating boxes? I canโt install it, I donโt know. because it depends on the content. Will all boxes just shrink to fit their content width? This is how it works in practice. And I'm happy with that. Is there any official confirmation that this behavior should be expected?
Added: I want something interesting here: http://www.webmasterworld.com/css/3811603.htm
I suggest checking the guidelines for a more technical explanation of the differences, but simply put, the behavior of the floats changed between css2 (1998) and css2.1 (a couple of months in 2005 and then 2007). Per css2 it was mandatory to set the width on the floats, while the "squeeze-wrap" you see in ff3 is css2.1. This means browsers prior to July / 2007 are compliant with their build time guidelines when they stretch a div # to the full width of the viewport. (Which Opera doesn't explain, but it always did the trick.)
If so, then I affirm. As I mentioned, it works in current IE7, FF3, Opera 9 and Safari.
More comments?
source to share
(if I understand your problem)
In most cases, you don't need to set the width on the list items. But (yes, there is, but here), if you have a link with display: block (say you want to use a sliding door), you need to do a little trick:
html:
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
And the CSS:
.menu li {
float:left
}
.menu li a {
display:block;
}
/* ===================== */
/* = and the IE6 trick = */
/* ===================== */
* html .menu li a {
width:1%;
white-space:nowrap;
}
If you don't, LINK will be stretched across all parents. LINK is not a LIST element;) This way you set the "minimum width" for IE6 and you won't have any other problems.
source to share