Стилизация изображения и текста

Question

Я работаю с чьим-то стилем и не могу получить то, что им удалось. Я пытаюсь сделать вещи похожими на эту страницу:

http://www.comehike.com/outdoors/parks/add_trailhead.php

Посмотрите, как хорошо выглядит изображение справа, а элементы формы слева.

У меня есть страница, с которой я пытаюсь сделать что-то похожее:

http://www.comehike.com/account/member_home.php

Есть ли простой способ для меня сделать так, чтобы изображение ушло в крайнее левое положение, а материал с просьбой войти в систему - справа?

Спасибо!

Answer 1

Вот как вы можете использовать в пищу плавающие элементы:

HTML:

<div class="container">
  <div class="form">
     <form>....</form>
  </div>
  <div class="leftImage">
    <img src="img.jpg" />
  </div>
  <div class="clear"></div>
</div>

CSS:

.container {
   width: 800px;
}
.container .form {
   width: 500px;
   float:left;
}

.container .leftImage {
   width: 250px;
   float:left;
}

.clear {
   clear:both;
}

Answer 2

Начните с изменения ширины первого div в пределах .basic. Измените ширину на 100% вместо 450px

Вы сможете продолжить оттуда.

Я бы также переместил изображение в его собственный контейнер и поместил его справа, и поместил действия формы в другой контейнер. Кроме того, используйте стили и идентификаторы для стилизации, чтобы очистить вещи.

Answer 3

Замените div с width: 450px на width: 100%, затем дочерний H3 float: left

Answer 4

увеличить ширину до 845px для div.

Плавающее изображение слева.

для тега h3 выполните стилизацию

h3 {
   float: right;
  display: inline;

}

Это сделает задачу за вас.

Удалить пустые теги из HTML.