Page Wrap doesn't grow

[restfulsilence]

Hello everybody,

I am sure it is a typical beginner mistake (and I am a total beginner), but it would be great if somebody could help me.

http://codepen.io/anon/pen/GJRomW

If I put text in my little red box, the page wrap grows with it. But if I start using top:10px; for example, to move the box around, the box moves down, but the page wrap doesn’t grow with it.
In the real page, I would like to create a footer part within the page wrap, but as long as I can not move the content (my little red box in this case), I stuck.

I am glad for any help.

Thank you in advance.

[restfulsilence]

Thank you for the advice. I read the article about float before, but is there not a way to use float and keep it in the flow? If it was in the article too, maybe I missed the part.

Could you/somebody maybe post the code, so that it works? Just for this example.
I tried some methods after your advice, but it still seems not to work.

Thank you in advance.

[restfulsilence]

I did try it. Actually I have used all the examples. In general I understand the problem. But I do not see a solution for my problem. Because, if I use position:relative; in the wrap container and try to move the inner part with top:; etc., it can happen, that it leaves the wrap container. If I use margin-top etc. instead on the inner part, I do not have the problem, and the wrap container grows with the moving inner part.

But I would like to use position:relative; in the wrap container and would like to move the inner part with top:; etc.
And this is the point I do not understand. Is there way to fix this? Even with clearfix it doesn’t seem to work, or does it not work at all and there is no workaround?

[Paulie_D]

If I use margin-top etc. instead on the inner part, I do not have the problem, and the wrap container grows with the moving inner part.

So problem solved.

But I would like to use position:relative; in the wrap container and would like to move the inner part with top:; etc.

Why is using position:relative so important? It’s a very poor method of laying out elements unless it’s for a specific effect.

The point of position:relative is that it moves the element visually but not in actuality. That’s why the wrapper doesn’t grow.

You can see the difference here:

http://codepen.io/Paulie-D/pen/IuLfJ

[Paulie_D]

In the real page, I would like to create a footer part within the page wrap, but as long as I can not move the content (my little red box in this case), I stuck.

Not sure what you are going for here.

If the footer element is inside the wrap you should be fine..not sure why you would need to move it at all.

[jakecarpenter]

@shaneisme, the clear: both; is on the correct element. It’s the only reason the #wrap has the height of the floating #one. I’ll admit that the use of an extraneous element to contain a float is ugly and bad practice. The cleafix method is decent but so is changing the block formatting context with overflow.

@restfulsilence, as Paulie points out, relative positioning retains the element’s normal position in the document flow and only moves it visually relative to that position – it has no effect on other elements. The best way to accomplish what you want is with top margin (not sure why you want to avoid it) or top padding on the parent. Normally the top margin of a child will extend outside of its parent unless the parent has a top padding or border, or in my example, if the parent has new block formatting context (not vitally important to know other than overflow: hidden will set this).

https://codepen.io/anon/pen/gpOWmj

[Author]

Posts