1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

can we float middle?

Discussion in 'CSS' started by cavemanlawyer15, Oct 8, 2007.

  1. #1
    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
     
    cavemanlawyer15, Oct 8, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    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.
     
    deathshadow, Oct 8, 2007 IP
  3. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    ChaosFoo, Oct 9, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Stomme poes, Oct 9, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    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.
     
    soulscratch, Oct 9, 2007 IP
  6. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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.
     
    Arnold9000, Oct 9, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #7
    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.
     
    soulscratch, Oct 9, 2007 IP
  8. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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..
     
    Arnold9000, Oct 9, 2007 IP
  9. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #9
    soulscratch, Oct 9, 2007 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    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):
     
    deathshadow, Oct 9, 2007 IP
  11. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #11
    "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.
     
    soulscratch, Oct 9, 2007 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    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.
     
    deathshadow, Oct 9, 2007 IP
  13. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #13
    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
     
    tayiper, Oct 14, 2007 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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).
     
    Stomme poes, Oct 14, 2007 IP
  15. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #15
    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
     
    tayiper, Oct 14, 2007 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    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...
     
    deathshadow, Oct 14, 2007 IP
  17. CNC Machines

    CNC Machines Guest

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    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.
     
    CNC Machines, May 8, 2009 IP
  18. Koochook

    Koochook Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    hey i heard you could automate css values with javascript... does anyone here do that?
     
    Koochook, May 11, 2009 IP
  19. web3seo

    web3seo Banned

    Messages:
    81
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #19
    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
     
    web3seo, May 11, 2009 IP
  20. caffeinatedworld

    caffeinatedworld Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    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 :)
     
    caffeinatedworld, May 19, 2009 IP