Не могу прикрепить div к нижней части родительского div

0

привет всем, кого я пытаюсь создать

div, который будет действовать как нижняя граница

эта форма, вот так:

Изображение 174551

Проблема в том, что она работает, только если я использую

margin-top и я не хочу этого использовать.

это то, что я получаю сейчас:

Изображение 174551

мой css:

#form_div
{
position: absolute;
top:67px;
left:450px;
height:550px;
-moz-box-shadow: 2px 3px 45px #000000;
-webkit-box-shadow: 2px 3px 45px #000000;
box-shadow: 2px 3px 45px #000000;
border-radius: 15px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 

}
#bottum_border
{
    border-bottom:1px solid red;
    cursor: e-resize;
    margin-top: 43px;
}

мой html:

  <div id="form_div" class="black_background_solid" >
            <div id="form_headline" class="light_black">Contact Us</div>

                      <div id='n_1_conteiner'  class='field_conteiner'>
                          <div id='n_1_lbl' class="field_name">Name:</div>     
                          <input id='n_1_textbox'  class='textbox gray white_text'  type='text'/>
                           <a id='n_1_edit_btn' class='edit_button'>Edit</a> 
                           <a id='n_1_drop_btn' class='drop_button'>Drop</a> 
                           <div id='n_1_border' class='fakeHr line_border_color_black'></div>
                     </div>

                 <div id='n_5_conteiner'  class='field_conteiner'>
               <div id='n_5_lbl' class='field_name'>Message:</div>
                    <textarea id='n_5_tbx'  class='text_area gray white_text' rows="2" cols="30">
                    </textarea>     
                    <a id='n_5_edit_btn' class='edit_button'>Edit</a>
                    <a id='n_5_drop_btn' class='drop_button'>Drop</a> 
                 </div>

        <div id='results_div'>
            <div id='submit_btn' class="button red_gradient" onclick="Validate()">
                    Submit</div>
        </div>
                      <div id='bottum_border'></div> 
 </div>

точные коды, вставленные в скрипку http://jsfiddle.net/z982S/

  • 0
    что вы хотите первое изображение?
  • 1
    Можете ли вы дать нам jsfiddle или хотя бы включить все CSS, чтобы кто-то другой мог это сделать ...
Теги:

4 ответа

0 
#bottum_border
{
    border-bottom:1px solid red;
    cursor: e-resize;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

Проверьте скрипку http://jsfiddle.net/Zd4fr/

Поделиться
0

Попробуйте удалить высоту (вместо этого используйте #form_div/маржу): #form_div и добавьте следующую #bottum_border в #bottum_border

#bottum_border
{
    position:relative;
    bottom: 0;
}
Поделиться
0

Если вы хотите что-то вроде 1-го изображения, то почему бы вам не использовать border-bottom непосредственно в form_div?

#form_div
{
 border-bottom:1px solid red;

}
Поделиться
0

Вам нужно что-то вроде этого:

#form_div
{
  position: relative;
}

#submit_btn
{
  position: absolute;
  bottom:0;
}

Это положение кнопки в нижней части формы.

Поделиться
  • 0
    Я предполагаю, что сама форма должна быть абсолютно позиционирована поверх других вещей ...
  • 0
    @ Базз - почему я так не думаю.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню