CSS box element positioning

Question

Here I have create one div box using css stlye.

Fiddle: Correct view

But if the description is small then content misaligned as below: Misaligned box

i tried changing the position and css values, but no luck.

Can some one tell me how can I keep footer part on it's position even if the content is small.

For everyone who hates codepen as much as me, fiddle: http://jsfiddle.net/5BmLE/ — SW4, Nov 22 '13 at 10:15
@ExtPro ROFL, I was making the same in jsfiddle, I tidied up the code, and when I was here, I saw your comment :) — Mr. Alien, Nov 22 '13 at 10:19
BTW you are not clearing your floats, `clear: both;` is all you need, read my answer [here](http://stackoverflow.com/a/12871734/1542290) for detailed info — Mr. Alien, Nov 22 '13 at 10:21
To OP: jsfiddle is for debugging, codepen is for showcasing. — Tim S., Nov 22 '13 at 10:27

Christoph · Accepted Answer · 2013-11-22T10:22:33.420

0

You need to clear the floats:

.footer-working-area {
    clear:both; /* this sets the element flow back to normal */
    background: transparent url(...) left 5px repeat-x; 
                                        /* /\ have some padding for the img */
}

Now the footer always stays below the picture, no matter how few text content you have.

Here you have the accordingly modified example fiddle.

edited Nov 22 '13 at 10:22

answered Nov 22 '13 at 10:17

Christoph

50,121
21
99
128

thanks buddy, I have one more small issue. Small box which shows `34%` can you please tell me how can I place in middle of top header? – Nov 22 '13 at 10:27
in fiddle header part does not looks correctly. Please see codepan – Nov 22 '13 at 10:29
@cyclic I don't know exactly how to handle codepens, but have a look at this: http://codepen.io/karimkhan/pen/uECjJ ? – Christoph Nov 22 '13 at 10:34
Thanks I could do it by setting top-margin! – Nov 22 '13 at 10:43

score 0 · Answer 2 · answered Nov 22 '13 at 10:17

0

You can give your text a min-height...

.text { min-height: 110px; }

... or a height if you don't expect longer texts

.text { height: 110px; }

... or clear the floats as Christoph mentioned in an other answer.

answered Nov 22 '13 at 10:17

Tim S.

13,597
7
46
72

score 0 · Answer 3 · answered Nov 22 '13 at 10:18

0

Add clearfix to the .text class

.text::after {
    content: "";
    display: block;
    clear: both;
}

EXAMPLE

answered Nov 22 '13 at 10:18

matewka

9,912
2
32
43

I didn't notice that the dotted belt is the part of the footer. Anyway, this is one of the solutions. – matewka Nov 22 '13 at 10:23

CSS box element positioning

3 Answers3