Center image with css with floats?

@Baby_JaiJul 07.2011

[code=html] <div align=”center”><div class=”stating”> <? include(“stats2/stat_display.php3″); ?></div><div class=”banner”><img src=”images/Banner-Header.png” alt=”Logo” /></div> </div>[/code]

ok thats the code, what im trying to do is…

well pretend there are 3 things, with an image DEAD smack in the center, float right will be whatever, float left will be to the left of the image

Float Left Center banner Float Right
IIIIIII Image IIIIIII

I cannot seem to get this, with the code above i got it to float to the right but the image isnt centering, here is the actual css for whats above…

[code=html].stating { font-size: 10px; text-align: right; float: right; position: relative; display: inline-block; overflow: auto; }

.banner { width: 600px; margin-left: auto; margin-right: auto; display: inline-block; }[/code]

of course this is only for the floated right box, but i cant even get that to work, assistance would be so greatly appreciated

to post a comment

CSS

4 Comments(s) _↴

@Cory_RJul 11.2011 — #

[code=html]<div style="float: left; width: 200px; height: 100px; background: red"></div><div style="position: absolute; text-align: center; width: 100%"><img src="images/Banner-Header.png" alt="Logo" /></div><div style="float: right; width: 200px; height: 100px; background: red"></div>[/code]

There's an example that worked for me.

@WonDer9Jul 11.2011 — #Welcome to my little friend called Margin. When using float you have to really pay attention to what place elements are script on your script to control position in page.

in your situation, margin will help to maneuver an element where there's nothing else around it. Percentages rather then points or pixels will ensure that the positioning stays consistent when viewed in other sizes. if the element is about 50% of the space to its parent, apply 25% to -left and -right. all should add up to 100% or whatever specified in parent. the is no left:, right:, css for float. so margin is your best bet. and shadow div(no content inside) to control positioning with float.

@Cory_RJul 11.2011 — #Wouldn't my method be more foolproof? I've tried using a margin in situations like this and it gives mixed results on resolutions. Also, couldn't you specify "auto" on the left and right sides to center content?

@WonDer9Jul 14.2011 — #Well auto does not work they way you and I would imagine. Try placing auto for the height of any element and you will notice noting happens unless something is inputted inside the area of the element.

So Auto is generally used for adaption not to set or change size. Like if the screen resolution changed auto will do nothing to compensate because there is no change to the element.

% in the other hand adapts to the aspect of the resolution as oppose to the content set inside an element. And the size of the element does pay into the size of what is left for % to play with.

Auto deals with element size : % deals with area size or screen resolution size.

when dealing with divs it is important to understand 3 things:

1) when in float, size must be specified or the natural width of an element will be about 40% of screen size.

2) when both are set to float, children divs(div inside a div) use the size of parent divs(the div that has a div inside it) to calculate the amount when using %.

++ So width: 100%; for a child div is not 100% of the body but of the parent div it is inside, both must be set to float for this to work.

3) height must also be set or content will over flow out of area. auto will work for when content is entered, but if no content nothing will happen same applies for width.

Now: I did a little research and I'll give you some solutions; cause situations may be different, try each and see what happens.

1)specify the size of your parent div, remove or specify the left-side margin form you centering div and/or specify it on to you left side div.

++ the div to the left controls that area now, its body size and the margin on its left determine how much space is left to the right for the center div to be calculate. Keeping margin-left on your center div will only make it lop sided because there's nothing to be determined unless you specific a fixed width size for your left div or fixed size to "separate" your center div "from" the left div.

2)change your center div to float right. and specify auto to the right, remove left again. Float only takes into consideration the side it is floating to. so margin left will only push the left div away, not spcefiy or do math to calculate how much untill i hits center.

"it might so try"

3) remove align center from your parent div. This aligns the parent to center. limiting the amount of space for it to work with. and your children div's might or should be inheriting this throwing them off.

++ You could probably just use that on your child div and see what happens.

++ Basically parent divs don't need to be aligned when in float because they pretty much become like the body itself. float makes sure the div moves likes it div children in the page together, so make sure all element have the same positioning style. float, absolute, fixed, etc...

I usually do as Cory above to help, align center, give divs equal measure in width, and they usually just center them selves, or use on dive place one child inside. Float the child howerver. and apply what ever I need to the parent, because all media starts from the left, I just gotta move the child out of the way.

So in closing it all depends on your style. but all will pretty much give you the same technique. Remember that a parent is now the body tag, and controls what a child can do, in relation to size and movement. Yet both must have the same positioning style and this must be specified for each one separately in CSS or they as in structure will not be aligned. There is inherit yes!, but that would mean that the body tag or parent alone styles would have to be specified. because body is the parent of all the children will inherit.

Parents control everything shout!!

Also in #CSS _↴

2 Column Fluid Layout Problem..need help!Editing Two Parts of A "File" Input Drop down buttons?

Success!

Help @Baby_Jai spread the word by sharing this article on Twitter...

Tweet This

Center image with css with floats?

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Center image with css with floats?

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴