Как обернуть один div-идентификатор вокруг другого?

Question

Как обернуть один div вокруг другого? У меня есть следующие два div идентификатора:

#course {
  width: 325px;
  padding-right: 25px;
  border-right: 1px solid #999;
  border-top: 1px solid #999;
}

#home-page-sign-up {
  width: 275px;
  #padding-left: 25px;
  float: right;
  margin: auto;
  #position: relative;
  display: block;
  clear: both;
}

Я хочу, чтобы #course был слева, а #home-page-sign-up справа, прямо рядом с ним. Я получаю блок слева и справа как назначено, но один ниже другого, я хочу, чтобы они были рядом.

Как мне этого добиться?

Answer 1

Попробуйте это:

#course{
width:325px;
float:left;
padding-right:25px;
border-right:1px solid #999;
border-top:1px solid #999;
}

#home-page-sign-up {
width:275px;
#padding-left:25px;
float:left;
margin: auto; 
#position:relative;
}

Затем в тегах вашего тела выполните:

<div id="course">Course Div Content here...</div>
<div id="home-page-sign-up">Home Sign-up Content here...</div>
<div style="clear: left;"></div>

Это один способ ... который, надеюсь, работает;)

Answer 2

Вы хотите оставить их обоих слева:

#course{
    float:left;
    width:325px;
    padding-right:25px;
    border-right:1px solid #999;
    border-top:1px solid #999;
}

#home-page-sign-up {
    width:275px;
    #padding-left:25px;
    float:left;
    margin: auto; 
    #position:relative;
    display:block;
}

Просто убедитесь, что #course находится первым в html

Answer 3

см. В скрипте код и демо-версию

Fiddle: http://jsfiddle.net/t4LUF/3/

Демо-версия: http://jsfiddle.net/t4LUF/3/embedded/result/

ПРИМЕЧАНИЕ: Для демонстрации я поставил границу для всех div'ов, которые вы можетеизмените в соответствии с вашими потребностями.

HTML:

<div id="big-container">big-container
    <div id="container">
        <div id="course">course Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        <div id="home-page-sign-up">home-page-sign-up </div>
    </div>
</div>

SS: http://img812.imageshack.us/img812/3783/divcontainersidebyside.jpg

Answer 4

Я не знаю, что вы подразумеваете под "обтеканием", но если вы хотите, чтобы элементы div были рядом друг с другом, поставьте float: left; в обоих стилях ...