Do elements before they are part of the dom have the width and height set properly? ie if I create a div containing markup can I measure its intended width and height without appending it to the dom?
I don't formally know the answer, but a little gedankenexperiment lets us see that it can't, in general, happen. If you create an HTML element with a fixed width and height, then yes - you can know the width and height.
However, if you don't specify them (or they might not be obeyed), then the width and height are always going to be calculated by the contextual position of the fragment in the DOM; for example, a DIV with width: 50% cannot know it's actual width until it is added to the DOM and laid out - there's no other way to answer "50% of what?".
Related
Here and there I see suggestions that I should always set width on floated items. But when I'm exploring CSS of popular web-services (such as Twitter/Google), I see that almost nobody does that.
Is it still considered good style to always set width on floated items? In which cases should I set 'width' property and when it can be safely omitted?
Some quotes:
SmashingMagazine says that:
“You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.”
HTML and CSS: Design and Build Websites book says:
When you use the float property, you should also use the width property to indicate how wide the floated element should be. If you do not, results can be inconsistent but the box is likely to take up the full width of the containing element (just like it would in normal flow).
Well it really depends on the browser, you must check the results in multiple browsers to be sure that none of them "misunderstood" your settings. I'd set a width anyway, because no browser can misunderstood that.
Block element takes the full width of the parent. If you use float it will not take the full width, the width would be how much the element width it is.
i use width with floating elements in percentage of the containing div , the only problem you get is that the containing div might not wrap arround its content , so you have to put on the main div overflow:auto
So i have:
<body style="border:1px solid red;width:100%;">
<div style="position:absolute;left:2000px;">
1
</div>
<body>
Is there any way to make body width to be 100% of document (including "scrolling space") instead of 100% of inner window width in this case?
I mean i need the result as if i applied "width:2000px;" to the body, but without knowing this number.
I know, that it will take one line of code in js and still i wonder, if i can do this with pure css.
To clarify:
When i write "width:100%;" i expect, that body width will stretch up to 2000px (to include that absolutely positioned div), but it stretches only to 1024px (browser window width).
There is a logical puzzle with this layout.
<body style="background:red;width:100%;">
<div style="position:absolute;left:2000px;">
1
</div>
<body>
Because the inner div is positioned absolutely, it is out of the document flow, and therefore, the parent block container, <body>, cannot compute a width based on the absolutely positioned child element.
By assigning a percentage width of 100% to <body>, the width is actually being computed based on the width of the root element, in this case, <html>, which may in turn, inherit its height from the viewport.
This effect cannot be achieved by CSS alone.
If you need the inner div to be absolutely positioned, then you will need some JavaScript/jQuery functionality to determine the width of <body> based on some custom rules that you want to specify.
The problem is position: absolute what you can do is wrapping your div inside another one like this:
<body style="border:1px solid red;width:100%;">
<div style="width:2000px;">
<div style="position:absolute;left:2000px;">
1
</div>
</div>
<body>
because when you make any element absolute is not belongs to is parent anymore and it becomes separate element in document (in document flow). If this answer is not what you want, tell me what you want exactly to do (what is your design decision) then I can give you alternative designs to solve your problem.
The width property doesn't have anything to do with the objects' child elements. Additionally, by absolute positioning that element, it actually causes the parent to COMPLETELY ignore any size parameters of that particular child element. But even with a relatively positioned object with an offset, only the initial position of the element would have an impact on its parent and not the offset location of it.
Setting width to 100% will cause it to fill 100% of its parent container, in this case the <html> element. And by explicitly stating a width, even if you had a large amount of unwrapped content inside that container, your width would actually be locked at 100% (or the width of the browser window) regardless of said child content.
You could TRY and set the width to 200%, which would cause it stretch to the right beyond its parent container. But this width would not be driven by the absolute positioned child element, and may not be responsive enough for your needs.
As was already stated above, there is no pure CSS solution for what you're trying to do and you'll need to use at least some javascript to accomplish what it sounds like you're trying to accomplish.
I'm trying to create a table of rows, each of which has some content in some block element (I'm using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the "test" text on the right should have its containing grey DIV filling up the full height of the containing TD cell:
http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/
I don't want to explicitly set the height of anything (except maybe to a percentage) - setting height:100% on the child DIV doesn't change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell's rendered height, provides absolutely no way to size a child element to fill it without using Javscript!
NOTE: I'm aware that there are other questions similar to this but they don't seem to take into account CSS3's new flexbox functionality - perhaps that could solve this problem?
You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:
<div style="position:relative; width: 50px; height: 50px;">
some link
</div>
I'm told by Boris Zbarsky himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
You can see the example here: http://pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
proof of concept example is here
The Problem
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
A Potential Solution
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
Equal Height Columns with Cross-Browser CSS
I hope this helps.
The negative margin trick:
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden;
But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
Most of the times, the Previous parent has a heigt manually set, so you can use that value as reference, no other dirty tricks will be needed, and if the number is not the same for any reason maybe a comment can be added with the original number so in case you need to change it, by searching at the all the values, this one can be adjusted or even changed, in the time someone resolve this one for us.
Take this trivial example and open it:
<html>
<body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;">
<div style="width: 8000px; border: 3px solid red;">Demo</div>
</body>
</html>
The page is made so that the body has a top-centered background picture and a containing element which overflows window boundaries so there is horizontal scrolling (if you have a monitor wider than 8000px then you're really cool, please make the window smaller and refresh).
The problem is that for some reason the <body> doesn't stretch to contain the <div>. It just stays the same width as the viewport and the <div> overflows it. This in turn causes the background to be centered at the wrong place and crops it to the size of the viewport. Quite ugly when you scroll to the right.
I've already found a solution to this problem, but I'm wondering WHY this is so? It seems to be consistent across browsers too. But in my opinion this is quite counter-intuitive and basically plain wrong. The container element should be big enough to contain it's children - unless they are absolutely positioned of course in which case they don't participate in the layout calculations.
Blocks simply do not stretch horizontally to accomodate their child content, at all; never have.(1) That's something that only happens in the vertical axis.(2) Logically, both dimensions can't be stretchy; one has to be fixed (wrt parent). In CSS, the width of a block element in normal flow is derived solely from the parent (minus paddings, margins, borders), and then the height follows on from that, seeing how much content you can fit in the block's width and flowing it.
The background image can appear in a confusing place that misleads you to what is actually happening because of this quirk of CSS:
For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
This is a nasty hack put in place because people were used to putting backgrounds on ‘body’ and having it fill the viewport, even though the <body> element itself does not represent the viewport.
(1) except in a few special cases, like float and position: absolute elements without a declared width.
(2) unless you deliberately stop that by setting height/overflow.
The exception to expanding is the viewport. Nothing expands the viewport unless its direct or attached contents require it -- this includes that div and table elements (eg, display: table-cell on body) -- but not a block container.