Как обратиться к div внутри div

#html #css #html5

Здравствуйте.

Есть блок и внутри него ещё два блока. Хочу чтобы первый внутренний блок занимал
левую часть экрана (50% экрана), а второй блок правую (50% экрана). Пробовал сделать
сам, но так и не получилось. Не могу достучаться до div'ов внутри #father.

Пример:



#son {
  height: 400px;
  width: 300px margin-left: auto;
}
#daughter {
  height: 400px;
  width: 300px margin-right: auto;
}

  
....
  
....





Заранее спасибо.
    

Ответы

Ответ 1

#son{
  display: inline-block;
  height: 400px;
  width: 300px;
  background-color: #3498DB;
  margin: 0px;
  padding: 0px;
}
#daughter{
  display: inline-block;
  height: 400px;
  width: 300px;
  background-color: #E74C3C;
  margin: 0px;
  padding: 0px;
}

  




Ответ 2

#father {
  height: 100px;
  width: 200px;
  border: 2px solid blue;
}
#son {
  height: 100%;
  width: 50%;
  margin-left: auto;
  background: green;
  float: left;
}
#daughter {
  height: 100%;
  width: 50%;
  margin-right: auto;
  background: red;
  float: right;
}


  

  





Ответ 3

Например, с использованием flex, т.к. float уже морально устарели :)

p.s. Добавил border для демонстрации



#father {
  display: flex;
  flex-direction: row;
}

#son, #daughter{
  height: 400px;
  flex-grow: 1;
  border: 1px solid red;
}

#daughter{
  border: 1px solid blue;
}
  

  
....
  
....