I see that float tags can be left, right or none -- why can't we float center? If I need something to be centered, what are my options? Thanks PB
Well, if it's a inline element, all inline elements are affected by text-align:center; ... and if IE is in quirks mode or if you care about IE5.x, those INCORRECTLY will center a block level element as if it was inline. If it's a block level element, set the margins on both sides to auto. The only other choice is the CENTER tag, which one really shouldn't use anymore being presentational, or using a table which is SOMETIMES the only reasonable cross-browser solution (despite wild claims to the contrary)... Though tables are more useful for VERTICAL centering, something at which CSS is a total /FAIL/ unless all your heights are fixed.
Float will not center. The float property basically tells the browser where to put the image AND how to wrap text. Since there is no real need to have a float: center property. It would still be nice though.
Foo, you've got a cool name. Though not as cool as Caveman Lawyer. Your honour, I am but a simple cave man... Phil Hartman for the win.
Huh? The float property can apply to a lot of elements (block level or inline), regardless if they're an <img> element or if they have text inside them.
Floats can't center because they actually remove the element from the html flow. This is why you can't even use a margin 0 auto on a floated element, because it's margins aren't related to any other elements.
Floats don't really make elements get completely out of the normal flow like absolutely positioned elements. I would consider them to be "in-flow" because they still take up space...anything coming afterwards (or before if you're using negative margins) will still respect the dimensions (if specified) of the float.
Yes and other blocks can find themselves hidden underneath a floated item. If you place three blocks, one on top of each other, inside of a container with a top vertical alignment, and you float the first or top box, the second box will slide underneath it (and be hidden) to fill the top spot because it no longer knows that the floated element is already there, so it thinks it needs to take the spot as part of top aligned flow control, and the third box slides up as well..
When would a "block" be hidden underneath a floated item, unless it is absolute/fixed/relative? I think you're confusing FLOATS with ABSOLUTELY POSITIONED elements. http://205.209.146.77/floats.html http://205.209.146.77/absolutely-positioned.html
Quite often. A block level element WILL wrap under a float that is kin to it... the CDATA and inline level elements inside the block level may in fact wrap the float, but the block itself will not... otherwise it's content could not wrap completely around the float... This is why you often see code including a margin to ride under the float. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> * { margin:0; padding:0; } .float { float:left; width:100px; padding:8px; margin-right:8px; border:4px solid #000; } .nonfloat { padding:8px; background:#DDF; } </style> </head><body> <div class="float"> This box floats </div> <div class="nonfloat"> This box's cdata and inline content will wrap around the float, however if you'll notice it's background extends BENEATH the floating box to the left. If it did not, you couldn't wrap anything. </div> </body></html> Code (markup):
"Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist." w3.org on floats "In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). " w3.org on absolutes Yes its not in the "normal flow", but the width and height are still respected, so it's not COMPLETELY out of flow, unlike absolutes which are completely out of flow. Maybe my definition of "flow" is fucked up. That definition from w3 for floats could fit absolutes perfectly, but they do have impact on later siblings. When referring to "hidden underneath" I immediately think of this... (an absolute.. where dimensions are not respected). http://205.209.146.77/out-of-flow.gif /me holds shield steady awaiting the next hit.
Remove the text, assign a background image and height to the non-float equal to the float... and a background to the float. Ta-da, the block level non-float is hidden beneath the float. Floats are out of flow for block level elements, but in flow for inline and cdata - a confusing state at best.
Hey all, sorry for this off-topic post, but I really didn't want to open/create a whole new thread just to ask this question ... You see, I am just curious: do the terms box and block mean the same thing?? Oh and mind you, I am not a native english language speaker; in fact that's (at least partially) one of the main reasons for this post of mine (i.e. to be sure 100% in knowing exactly what they mean), so please bear with me!! tayiper
In general English, they could be the same thing, but I think here they are trying to talk about two different blocky things and they distinguish them. Maybe a better way to say that is an element is explicitly offset with respect to its container. Here element means the html thing (<p>, <div>, whatever). Container is also an element which has other elements inside it (<div><p>Stuff.</p></div>) Container here is the div. It contains the <p>aragraph. In English, a container is usually also a box, hence the confusion. The term "Box Model" is referring to web pages being built out of groups of rectangles usually called boxes, with other "boxes" around them (border, padding, margin).
Yeah, I was confused because as we all know, we differentiate between "block level" and "inline" elements. So I would think that one would refer to for instance a div element as "a block" (or "a div block"), but I see that some times people use the term "blocks", but other times "boxes" for basically the very same thing ... tayiper
I think in the specification they are actually referring to two different things when they say box and block... a distinction I take further by calling them "render box" and "Flow box" respectively. The 'render box' as I call it, or 'box' in the specifications is everything from the border inward - in other words what actually gets rendered on the page. The 'flow box' on the other hand is the entire thing with margins, which is how it's handled in 'flow'. The thing about the flow box is that not only be bigger than the render box, you can also make it smaller (negative margins) or even position completely off (position:relative) - that's something a LOT of people miss about position:relative is that it moves the 'render box' but leaves the 'flow box' exactly where it was. The concept of a 'flow box' as far as floats go is where things get interesting as it appears that block level elements (as my example above shows) ignore a floats 'flow', but CDATA and inline elements obey it. Put a left margin on a float:left, put a normal paragraph next to it, and set a background color on it... the text will wrap around the float, but the background of the paragraph will show on the opposite side. The CDATA obeys the float, the paragraph container does not. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> * { margin:0; padding:0; } #floatme { float:left; width:200px; height:200px; background:#AAA; margin:20px; } p { background:#FDD; padding:20px; } </style> </head><body> <div id="floatme"> This is floated </div> <p>Some test text</p> </body></html> Code (markup): Notice that the paragraph wrapper itself is NOT obeying the float, even though it's text is. That's because it's a block, and if the block was long enough to go past the float, the text SHOULD wrap back under... You can't have a non-rectangular float, so this is the correct behavior and as I said before why if you are using float for columns you either need them all to float, or you need to put a margin in place... The margin-left equal to the width of the float would work because the block is ignoring the float, so it's margin would slide right under it. So basically a float is NOT in flow for anything set to display:block; but is in flow for CDATA (text), anything set to display:inline; or anything set to float. Cute, huh? A quirk of the box model few understand or even think about - even when they use it...
margin: 10px auto; Remove the float code and replace it with the above. Change the 10 to whatever you want the left and right margin to be.
Here is an example - when the function midiNavDevelopment() is called (via perhaps an onclick event), then element with id "midiNav" will have its css background property changed function midiNavDevelopment() { document.getElementById("midiNav").style.backgroundImage="url(http://www.web3graphics.co.uk/images/midiNavBack_development.gif)"; } Code (markup): Put the javascript in an external .js file
You cannot float to center - sorry, but there is a better solution for that. In CSS you can add a margin to any element - it cen be in percentage, pixels, ems or auto. If you add both left and right margin to your element it will be center. So this is how you do it: .centered-div { margin-left: auto; margin-right: auto; } And you are done