Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts

    center + float left

    is there a way to have something (A) horizontaly centered, and then float left attached to it ,something else (B) ?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'm not sure what you've asked, but I guess you have a floated element and a sibling for it having margin-left & margin-right set as auto. If that's the case, you may need to use absolute position instead of float for the first element.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello BubikolRamios,
    Give this a try -
    Code:
     <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    .centered {
    	width: 1px;
    	height: 10px;
    	float: left;
    	margin: 0 0 0 50%; /*adjust this left margin as needed*/
    }
    #one {
    	border: 1px solid #000;
    	}
    #two {
    	border: 1px solid #000;
    }
    	#two p {float: left;}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="one">
            	<div class="centered"></div>
            		<p>centered stuff</p>
            <!--end one--></div>
                <div id="two">
               		<div class="centered"></div>
                		<p>centered stuff</p> <span >'left floating text'</span>
                <!--end two--></div>
        <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 12-04-2009 at 06:19 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts
    'centered stuff' does not come into the center of screen.

  • #6
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    do you mean vertically AND horizontally?

    this is slightly more tricky to achieve but is well demonstrated here: http://www.pmob.co.uk/pob/vertical-center1.htm

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This is very buggy. You probably need some js to center your centered stuff. Have a look though, see if it gives you any ideas -
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    	text-align: center;
    }
    .centered {
    	float: left;
    	margin: 0 0 0 50%;
    	overflow: visible;
    	background: #fff;
    }
    .centered p{
    	margin: 0 0 0 -100%;
    }
    #one, #two {
    	margin: 5px 0;
    	border: 1px solid #000;
    }
    	#one {background: #0f0;}
    	#two {background: #f00;}
    		#two span {float: left;}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="one">
            		<p>centered stuff</p>
            <!--end one--></div>
                <div id="two">
               		<div class="centered"><p>centered stuff</p></div> 
                    <span >'left floating text'</span>
                <!--end two--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts
    made something myself, what do you think ? You just have to manualy set widths of three centered spans, and the centered stays where it is, in center.

    http://86.61.66.17/AgroZoo10/test16.html

    tested in IE and FF
    Last edited by BubikolRamios; 12-05-2009 at 09:20 PM.

  • #9
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    either you or we are confused

    to center something in css you just need to assign a width and add margin:auto to it, assuming a correct doctype.

    not really sure what you're attempting to acheive?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by met View Post
    either you or we are confused

    to center something in css you just need to assign a width and add margin:auto to it, assuming a correct doctype.

    not really sure what you're attempting to acheive?
    He's trying to center an element (block or inline doesn't seem to matter) that has another element next to it. Margin auto doesn't work for that.

    And I thought it needed to be more fluid than setting the width on 3 spans like the op's solution.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by BubikolRamios View Post
    made something myself, what do you think ? You just have to manualy set widths of three centered spans, and the centered stays where it is, in center.

    http://86.61.66.17/AgroZoo10/test16.html

    tested in IE and FF
    Looks like a valid solution to me! You just need to clear your floats.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by BubikolRamios View Post
    made something myself, what do you think ? You just have to manualy set widths of three centered spans, and the centered stays where it is, in center.

    http://86.61.66.17/AgroZoo10/test16.html

    tested in IE and FF
    It's entirely depend upon the fixed width and margin:0 auto; applied on the container element of those three divs. Thus you can't change/zoom your text, after setting a layout. AFAIK, you'd need to use an absolute position for to make a flexible one.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    The method you use really does depend on what you will be putting in there to replace the place-holder text, and what the rest of the layout is going to be doing.

    Another option would be to use display:block and width:auto for the spans containing the left and right text and then float those blocks left and right respectively.

    Leave the centered text as inline text so it just gets centered in the containing div (or maybe use display:inline-block for that).

    Then use a min-width on the whole page (or the containing div) to keep the container from getting so small it breaks the layout, and maybe a max-width on the left and right blocks and the centered inline span, just to keep those blocks and the centered text from becoming so wide that they start pushing each other around (due to added content or different text sizes).

    That should be a little more fluid I think, though some of that won't work at all in IE6 as is, there are workarounds for each issue that IE6 would have with it. As you have it now that centered text is actually floated left but there is no need to float that - it seems that what you have is working now but it is a pretty fragile setup that is likely to break when you try to use it in a real page.

    It also seems to me that you could just as well adapt any number of standard 3 column layout templates for this. You have a header with centered text and then 3 columns with the left column's text aligned right the center column's aligned center and the right columns aligned left.

    I wish I still had the test page that I'm working on up for you to look at because it is doing a lot of this kind of thing and it is completely fluid. But I could lose my job if I show it to people before it goes live, without first changing all the names, numbers, photos of real people, etc..
    Last edited by linehand; 12-06-2009 at 06:03 PM.

  • #14
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey bro,

    If u want to align main div or table horizontally centered, use the class with property margin: 0 auto; which will align main container centrally for any browser and any resolution. remove floating frm it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •