CODEWITHSUNDEEP
htmlcss
CrazyWu
CrazyWu

Reputation: 687

css bottom poperty works strange

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

Upvotes: 1

Views: 55

Answers (4)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

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

enter image description here

Upvotes: 1

CodeRomeos
CodeRomeos

Reputation: 2448

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>

Upvotes: 2

silviagreen
silviagreen

Reputation: 1729

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>

Upvotes: 2

Jeremy John
Jeremy John

Reputation: 1715

Why don't you just use margin?

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

Upvotes: 1

Related Questions