...

View Full Version : centering a float:left div



ali haydar
05-29-2012, 12:10 PM
hi everybody;

is there a way to center this page without removing "float:left" and without adding an exact width somewhere..

thank you..






<html>
<head>
<title>Page Title</title>

<style type="text/css">


.image {
overflow: hidden;
position: relative;
float: left;
}
.image .cover, .image .cover img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

</style>

</head>
<body>
<div class="image">
<img src="image.jpg" alt="Image" />
<div class="cover"><img src="imageCover.gif" alt="" /></div>
</div>
</body>
</html>

abduraooft
05-29-2012, 12:26 PM
Why do you need to apply a float on an element that need to get centered?

LearningCoder
05-29-2012, 01:35 PM
What you could do is set a width on the div element and then after declaring the width, you can set margin to auto, this should center the div.

As an example:



.image {width: 30em;
overflow: hidden;
margin: auto;}


If you ever center things using this technique in the future, make sure to set a width on that element first otherwise margin: auto will not work.

If you have problems come back and we can help more.

Regards,

LC.

ali haydar
05-29-2012, 04:41 PM
Why do you need to apply a float on an element that need to get centered?

i want the transparent imagecover.gif to cover image.jpg, and if i remove float:left, it doesn't cover the image if the image is wider than the browser screen..

ali haydar
05-29-2012, 04:56 PM
What you could do is set a width on the div element and then after declaring the width, you can set margin to auto, this should center the div.


thank you, i was looking for a solution without declaring a width but i guess i will use your technique, thank you very much..

LearningCoder
05-29-2012, 04:59 PM
No problem.

What is the reason you do not want to set a width on the element?

Regards,

LC.

ali haydar
05-29-2012, 05:05 PM
for different images i will have to use different width's in this case, but when using float:left without declaring width, it covers every image beautifully no matter what width the image has..

LearningCoder
05-29-2012, 05:14 PM
Why don't you give the images an id and set the individual width's as required?

Regards,

LC.

ali haydar
05-29-2012, 05:18 PM
yes, that will work :)
thank you very much for your time..

LearningCoder
05-30-2012, 02:37 AM
Anytime bud, I have had more than enough help from people on this forum, it's about time I started helping others! I can't explain a lot of things but if I find opportunity I like to help out!

Regards,

LC.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum