как поставить img под заголовком (div), который содержит другие divs?

Question

Я поставил заголовок, который содержит три div. У одного есть изображение, а два других содержат текст. Затем я попытался поместить изображение под ним, которое имеет ту же ширину заголовка. Но когда я впервые выразился, это было над заголовком div (я думал, что он должен идти под ним). Затем я попытался подтолкнуть его, увеличив верхний край, и он сработал. Но по мере того как я увеличиваю его ширину, текст в заголовке перемещается, хотя он не трогает его!

Это HTML-код:

<div id="header"> 
     <img id="logo" src="...."> <!---the logo at the top right--> 
     <div id="name">JANE DOETTE<div> <!---the text that moves - top left --> 
     <div id="job">Front-End Ninja</div> <!--under the text that moves but doesn't move---> 
    </div> 

    <img id="image" src="...."> <!---the image--> 

Это код CSS:

#header { 
    height: 6em; 
    width:80%; 
    background-color: white; 
    margin-left:10%; 
    margin-right:10%; 
    border-bottom:2px solid #BCBBBB; 
    margin-bottom:10px; 
} 

#image{ 
    margin-left:10%; 
    margin-right:10%; 
    height:10em; 
    width:80%; 
} 

#logo { 
    height:88px; 
    width:89px; 
} 

#name { 
    color: #BCBBBB; 
    text-align:left; 
    float:right; 
    font-size:2.7em; 
    font-family:sans-serif; 
    height:50%; 
} 

#job { 
    color: #BCBBBB; 
    text-align:left; 
    float:right; 
    font-size:0.5em; 
    font-family:sans-serif; 
    font-weight:bold; 
    margin-top:0.2em; 
} 

Таковы мои вопросы:

1. Почему не изображение автоматически идут под заголовком div?

2. Почему текст перемещается?

3. Почему главный текст тот, который перемещается, хотя тот, который находится внизу, ближе к изображению?

4. Что мне делать, чтобы получить изображение под заголовком div?

5. Я отрегулировал ширину изображения до 80%. Но это всего лишь 20%. Зачем?

6. Он имеет какое-либо отношение к позиции или дисплею?

*** Извините, что не добавили изображения, но у меня нет репутации более 10 (мне не разрешено).

*** Извините за долгие вопросы (я все еще новичок).

*** Ваши ответы будут высоко оценены.

Answer 1

Ваш вопрос еще не совсем ясен (просьба уточнить), я постараюсь ответить независимо, но я мог бы исказить ваш вопрос.

1/6. Самая большая проблема, о которой я думаю, заключается в том, что вы не говорите браузеру, как «заказывать» div. Должны ли они находиться под афоризмом или рядом друг с другом? Для этого используйте свойство «display». Используйте «display: block», чтобы убедиться, что элементы страницы, такие как div или изображения, сложены друг под друга. В зависимости от поля браузер использует оставшееся пространство для стека элементов, расположенных рядом или выше друг от друга.

2/3. Потому что он плавает. Поплавок по отношению к другим элементам на странице.Если вы сделаете его плавающим вправо, но содержимое внутри него выровняется влево, то окно остается слева, а содержимое внутри него остается как можно дальше слева, поскольку оно может поддерживать контуры контейнера div. Поэтому он, кажется, движется. Потеряйте float и используйте «display: block», чтобы div был полной шириной заголовка div.

#name { 
 
    color: #BCBBBB; 
 
    text-align:left; 
 
    font-size:2.7em; 
 
    font-family:sans-serif; 
 
    height:50%; 
 
    display: block; 
 
    padding-left: 10px; 
 
}

4/5. Потеряйте свойство «height» изображения. Поскольку изображение имеет относительное свойство «высота» рядом с относительным свойством «ширина», оно искажает масштабирование изображения. Используйте только ширину в процентах, и она будет масштабироваться пропорционально.

Answer 2

У вас отсутствует косая черта. Вместо

<div id="name">JANE DOETTE<div> 

должно быть:

<div id="name">JANE DOETTE</div> 

После добавления косой черты, появляется хорошо для меня в Chrome и Firefox (для отсутствующих изображений, за исключением явно). См. fiddle. Это решение всех ваших вопросов?