Centering Floating Children

HTML & CSS
1

Hey,

I got six children that are floating left and a wrapper that contains them. When seen on desktop, everything is fine. When resizing the window to a width that causes the children to form two columns with 3 items each, the children won’t align. I tried to put a second wrapper around them (#projectwrapper2). I aligned it and though that it would align the children as well, but for some reasons the projectwrapper2 is wider than the children are seen through Site Inspector.
How can I align the children with a resized window?
Thank you for your help :slight_smile:

Here is the site than the problem is on: www.phermann.me/p/

2

Your media queries doesn’t give the projectwrapper2 any narrower width in a narrower than 650px window. Try 2*283px and 283px respectivly in the media query.

3

That wasn’t too clear, I think. Try add something like this:

@media screen and (max-width: 849px) {
    #projectwrapper2 {
        margin: 0 auto;
        width:566px;
    }
}
@media screen and (max-width: 565px) {
    #projectwrapper2 {
        width:283px;
    }
}
4

Thank you! It worked out perfectly. So what the wrapper needed was a certain width set to align properly.

5

Yes, you are right.

The auto-centering needs a width (of any value that fits within its container) to calculate the auto-margin lengths. A sole min/max-width will do only when it is applied. Otherwise, without a declared width or an intrinsic object width auto centering can’t work…

6

Something didn’t felt right so I went back to your page for a second look.

It was the scrollbar making the floats drop before the narrowing window reached the 849px max-width.

Solution is to set a default width on #projectwrapper2 when screen is wider than 849px. Then the eventual scrollbar doesn’t cause a floatdrop.

Just add this rule block:

#projectwrapper2 {
    margin: 0 auto;
    width: 850px;
}

Now I’m ok again. :smile:

7

Hey thank you again. I don’t want to start a new thread, I guess it’s just a minor mistake:
When you check my website, try to hover the .projects. .caption is supposed to flip in, and it does sometimes but I don’t know when it does. It certainly doesn’t work every single time. Also, I want the .caption to fade out when the mouse is leaving the .project. It sometimes does, but sometimes doesn’t. Why is the reaction so inconsistent?

Thanks! :slight_smile:

8

Tried in Cromium and Firefox. Both times the .caption flips in on hover and fade out when mouse leave. Wait… now on Cromium the fading isn’t.

I have to leave this for a while, sombody else can step in?

9

It appears to only run once. I wonder if this is due to the page needing some sort of repaint or restarting the CSS animation

http://www.ivanthevariable.com/restarting-css-animations-javascript/

10

In Safari, which I am using, it works multiple times but I really can’t predict when and when not.

It seems to be random but since its tech it can’t be random at all D:

11

I tried the animation reset thingy, but it didn’t work.

Any further ideas on how to solve this? :confused:

12

Is there a way to do it with jQuery? Will it work even with Animate.css?

14

Why not try ask this in the javascript forum. :smile:

15

Hi,

If you comment out the transition on the .caption then the flip works every time in safari.

.caption {
	visibility: hidden;
	opacity: 0;
	height: 175px;
	width: 233px;
	font-family: Open Sans;
	position: absolute;
	color: white;
	border-radius: 4px;
	margin: 0;
	/*-o-transition:.6s;
	-ms-transition:.6s;
	-moz-transition:.6s;
	-webkit-transition:.6s;*/
	/* ...and now for the proper property */
  /* transition:.6s;*/
	text-align: center;
}
16

I just had to reply with this little bit of thought, every time I see this topic I immediately think of the kid holding the balloons for the balloon guy and floating away. :laughing:

3 Likes
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.