CSS: Нельзя поместить два divs друг на друга

Как разместить два div с большим количеством дочерних divs рядом друг с другом? Я хочу, чтобы красная часть была права на синюю часть.CSS: Нельзя поместить два divs друг на друга

enter image description here

Примечание: Имя и фамилия являются поддельными, так что не имеет значения.

Мой HTML:

<body> 
<div id="MainBody"> 
    <div id="DataFrame">   
     <div class="DataObjects"><div class="InfoLabels">Account Level:</div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div> 
     <div class="DataObjects"><div class="InfoLabels">Profile Views:</div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div> 
     <div class="DataObjects"><div class="InfoLabels">Messages:</div><div class="InfoData" id="MessageData">0</div></div> 
    </div> 


    <div id="AccountFrame"> 
     <div id="AccountAvatar"> 
      <img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/> 
      <input type="button" id="sendPm" value="Send Message" name="sendPm"/> 
     </div> 
     <div id="AccountInfo"> 
      <div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ."&nbsp". $row['last_name'] ."&nbsp;". "(".$row['username'].")");?></div></div> 
      <div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div> 
      <div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div> 
      <div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div> 
      <div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div> 
     </div> 


    </div> 
</div> 
</body>

Мой CSS:

*{ 
    margin: 0px; 
    padding: 0px; 
    font-family: 'Ubuntu', sans-serif; 
    } 
body{ 
    background-color: #111111; 
    margin: 1%; 
} 
#MainBody{ 
    width: 60%; 
    margin-left: auto; 
    margin-right: auto; 
    height: 800px; 
} 
#AccountFrame{ 
    width: 100%; 
    padding: 15px; 
    height: 100%; 
    background-color: #eeeeee; 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px; 
    display: inline-block; 
} 
#DataFrame{ 
    font-size: 2.0vh; 
    padding: 15px; 
    background-color: #eeeeee; 
    border-radius-top: 4px; 
    width: 100%; 
    text-align: right; 
    border-top-right-radius: 4px; 
    border-top-left-radius: 4px; 
} 
#DataFrame ,.InfoLabels, .InfoData{ 
    display: inline-block; 
} 

#AccountAvatar{ 
    background-color: blue; 
    width: 30%; 
} 
#AccountAvatar img{ 
    width: 100%; 
} 
#sendPm{ 
    width: 100%; 
    height: 5.0vh; 
    background-color: #0071ff; 
    border: 0px; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    color: #1A1A1A; 
    font-size: 2.0vh; 
} 
#sendPm:hover{ 
    background-color: #308CFF; 
} 

.DetailLabel{ 
    display: inline-block; 
    width: 9.0vh; 
} 
.DetailInput{ 

    width: 40%; 
    display: inline; 
} 

.DetailObjects{ 
    width: 100%; 
    display: inline-block; 
    background-color: red; 
    margin-top: 1.0vh; 
} 

#AccountName{ 
    color: #0071ff; 
} 
#AccountInfo{ 
    width: 100%; 
    font-size: 1.7vh; 
}

Я уверен, что это некоторые простые правила CSS или несколько правил, но я просто не могу показаться, чтобы получить это право. Также, когда рядом - он должен автоматически распространяться по высоте так же, как и синяя часть (включая кнопку).

источник

2015-02-21 arleitiss

'float: left'. – Oriol

Вы сообщаете учетной записи AccountInfo на 100%. Как это может быть 100% и поделиться шириной родителя с аватаром? Сделайте это на 70% и плавайте: оставите учетную запись AccountAvatar и информацию об учетной записи. –

Вы должны использовать свойство float:left; стайлинга для #AccountAvatar и #AccountInfo. Также установите width#AccountInfo на 70% (оставшаяся ширина).

Re-стиль ваш CSS для #AccountAvatar и #AccountInfo следующим образом:

#AccountAvatar{ 
    background-color: blue; 
    width: 30%; 
    float:left; 
} 
#AccountInfo{ 
    width: 70%; 
    font-size: 1.7vh; 
    float:left; 
}

Вот demo.

источник

2015-02-21 19:57:38

Один из способов добиться этого с display: table

Вот рабочий Demo - http://jsbin.com/povajidesa/1/edit?html,output

То, что я изменился:

добавил display: table к #AccountFrame набора правил
добавил display: table-cell до #AccountAvatar и #AccountInfo r ulesets
добавлен vertical-align: top в набор правил #AccountInfo, чтобы выровнять текст по вертикали, при необходимости его можно изменить.

источник

2015-02-21 19:53:22

CSS: Нельзя поместить два divs друг на друга

ответ

Смежные вопросы