...

View Full Version : center + float left



BubikolRamios
12-04-2009, 03:46 PM
is there a way to have something (A) horizontaly centered, and then float left attached to it ,something else (B) ?

abduraooft
12-04-2009, 04:05 PM
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.

BubikolRamios
12-04-2009, 06:12 PM
example, what I want:
http://86.61.66.17/AgroZoo10/test16.html

Excavator
12-04-2009, 07:17 PM
Hello BubikolRamios,
Give this a try -
<!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>

BubikolRamios
12-05-2009, 06:21 PM
'centered stuff' does not come into the center of screen.

met
12-05-2009, 06:41 PM
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

Excavator
12-05-2009, 07:20 PM
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 -
<!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>

BubikolRamios
12-05-2009, 10:14 PM
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

met
12-05-2009, 10:54 PM
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?

Excavator
12-06-2009, 01:19 AM
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.

Excavator
12-06-2009, 01:20 AM
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.

abduraooft
12-06-2009, 12:58 PM
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.

linehand
12-06-2009, 06:58 PM
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..

funkyideas
12-07-2009, 07:06 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum