css bottom poperty works strange

Question

I know that im missing something simple, but i can't get what exactly

HTML:

<div class="form-captions">
  <div class="form-text">
    Caption
  </div>
  <div class="form_error" style="display: block;">
    sfgsdfg
    asdf safgsafdgsdfgsdfgsdfghsdfhsdghs
    asfdasssssssssssssssssssssssssssssssssssssssssssssssssss
    sssssssssssssssssssssssssssssssssssssssfgsdf
  </div>
  <div class="clearfix"></div>
</div>

CSS:

.clearfix{
  clear: both;
}
.form-captions {
    width: 100%;
    height: auto;
    display: block;
    clear: both;
    padding-top: 20px;
    min-height: 20px;
    position: relative;
}

.form-text {
    width: 100px;
    font-size: 16px;
    height: 20px;
    color: rgb( 29, 29, 29 );
    text-align: left;
    position: relative;
    float: left;
    clear: left;
    bottom: 0;
}

.form_error {
    color: darkred;
    float: right;
    display: none;
    margin-left: 5%;
    width: 65%;
}

For the form-text block bottom works not from the bottom of the form-captions block (same position "with top: 0;"). But it works and reacts on value changes.

jsfiddle

How can i make it works from the bottom or how can i move the text to of this block to the bottom of the "form-captions"?

Thanks

do you mean something like that https://jsfiddle.net/181Lky0n/6/? — silviagreen, Feb 21 '16 at 10:14

score 2 · Accepted Answer · edited May 23 '17 at 10:28

2

If I understood right your question, the solution I found is based on display:table solution described here

In form-caption I added display:table-row, while in form-text I removed all fide sizes and make it display as table-cell.

.clearfix{
  clear: both;
}
.form-captions {
    width: 100%;
    height: auto;
    display: table-row;
    clear: both;
    padding-top: 20px;
    min-height: 20px;
    position: relative;
}

.form-text {
    
    font-size: 16px;
   
    color: rgb( 29, 29, 29 );
    text-align: left;
    
    display: table-cell;
    bottom: 0;
}

.form_error {
    color: darkred;
    float: right;
    display: none;
    margin-left: 5%;
    width: 65%;
}

<div class="form-captions">
<div class="form-text">
                        Caption
                    </div>
                    <div class="form_error" style="display: block;">sfgsdfg
                    asdf safgsafdgsdfgsdfgsdfghsdfhsdghs
asfdasssssssssssssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssfgsdf</div>
<div class="clearfix"></div>
</div>

edited May 23 '17 at 10:28

Community

1
1

answered Feb 21 '16 at 10:24

silviagreen

1,679
1
18
39

This one helped me, thank you. Strange that there was no solution on relative display type. – CrazyWu Feb 21 '16 at 10:57
I am glad to be helpful! – silviagreen Feb 21 '16 at 11:51
the only thing, i've got a problem with width 100% this way, but i've found the solution [here](http://stackoverflow.com/questions/24153473/css-table-based-layout-row-is-not-extending-100-width) – CrazyWu Feb 21 '16 at 12:18
ofc i was going to write block instead of relative in 1st comment – CrazyWu Feb 21 '16 at 12:26

score 2 · Answer 2 · answered Feb 21 '16 at 10:24

May be you can try this -

.clearfix {
  clear: both;
}

.form-captions {
  width: 100%;
  height: auto;
  display: block;
  clear: both;
  padding-top: 20px;
  min-height: 20px;
  position: relative;
  border:1px solid red;
}

.form-text {
  width: 100px;
  border:1px solid red;
  font-size: 16px;
  height: 20px;
  color: rgb( 29, 29, 29);
  text-align: left;
  position: absolute;
  float: left;
  clear: left;
  bottom:0
  
}

.form_error {
  color: darkred;
  float: right;
  display: none;
  margin-left: 5%;
  width: 65%;
}

<div class="form-captions">
  <div class="form-text">
    Caption
  </div>
  <div class="form_error" style="display: block;">sfgsdfg asdf safgsafdgsdfgsdfgsdfghsdfhsdghs asfdasssssssssssssssssssssssssssssssssssssssssssssssssss sssssssssssssssssssssssssssssssssssssssfgsdf
  </div>
  <div class="clearfix"></div>
</div>

"position: absolute;" moving this block out from containing element, i've already tried this — CrazyWu, Feb 21 '16 at 10:29
@CrazyWu what's wrong with this solution? it seems to do what you are asking for. — Aziz, Feb 21 '16 at 10:46
@Aziz only if you have no more html on the page after this block. — CrazyWu, Feb 21 '16 at 10:59

Rajshekar Reddy · Answer 3 · 2016-02-21T10:48:16.977

1

I have updated your JsFiddle https://jsfiddle.net/RajReddy/181Lky0n/2/ .Let me know if this is what you were looking for. Also the changes was just increasing the div width.

.form_error {
    color: darkred;
    float: right;
    display: none;
    margin-left: 5%;
    width: 100%; // this is the change
}

EDIT: here is the updated JsFiddle and the result is

edited Feb 21 '16 at 10:48

answered Feb 21 '16 at 09:51

Rajshekar Reddy

18,647
3
40
59

No, this block doesn't needs to be changed at all, i'm talking about moving .form-text to the bottom, please look [here](http://i.imgur.com/5Am1fM2.png) – CrazyWu Feb 21 '16 at 09:57
"position: absolute;" moving this block out from containing element, if you have more html after this block it wouldn't work – CrazyWu Feb 21 '16 at 11:00
"position: absolute;" will make the element to be absolute to the parent and only then you can place it on bottom. what I suggest is use `"position: absolute;" ` and then try to fix the thing that breaks after this. `sometimes css issue is not really where you think it is` – Rajshekar Reddy Feb 21 '16 at 11:27

score 1 · Answer 4 · answered Feb 21 '16 at 10:15

1

Why don't you just use margin?

.form-text {
    margin-top: 20px; 
}

answered Feb 21 '16 at 10:15

Jeremy John

1,665
3
18
31

because height of the .form-error might be different – CrazyWu Feb 21 '16 at 10:16

css bottom poperty works strange

4 Answers4