O.Telegin O.Telegin - 6 months ago 13
CSS Question

css html float left alignment

[link to website][1]

I have a problem with alignment of the boxes with the text. They all have different sizes and should be organised in 2 columns without margin.

I have used following code:
css

.article_advices_ed6a5a_left{
float: left;
width: 50%;
max-height: 100%;
height: auto;
padding: 20px;
background-color: #ed6a5a;
}

.article_advices_f4f1bb_left{
float: left;
width: 50%;
max-height: 100%;
height: auto;
padding: 20px;
background-color: #f4f1bb;
}

.article_advices_9bc1bc_left{
float: left;
width: 50%;
max-height: 100%;
height: auto;
padding: 20px;
background-color: #9bc1bc;
}

.article_advices_5ca4a9_left{
float: left;
width: 50%;
max-height: 100%;
height: auto;
padding: 20px;
background-color: #5ca4a9;
}

.article_advices_e6ebe0_left{
float: left;
width: 50%;
max-height: 100%;
height: auto;
padding: 20px;
background-color: #e6ebe0;
}


html

<div class="article_advices_ed6a5a_left">
<h4>1. Следуй за белым графиком</h4>

Зная список участников и гостей, заранее составляй расписание встреч на выставке. Ты не сможешь окупить затраты на выставку, надеясь на трафик случайных посетителей. Ставь встречи с клиентами, готовыми к покупке или сотрудничеству, в то же время, что и с «холодными» клиентами. Это создаст о компании позитивное впечатление. И ты удивишься, как «горячие» клиенты смогут «продавать» за тебя.
</div>

<div class="article_advices_f4f1bb_left">
<h4>2. Рассылай всё равно</h4>

Поговаривают, что рассылка партнерам и клиентам анонса выставки по мэйлу уже не эффективна. Верно, но рассылай приглашения прийти к тебе на стенд, несмотря ни на что. Это знак внимания, плюс — всегда можно придумать вескую причину заглянуть к тебе. Например, скидку или подарок.
</div>

<div class="article_advices_9bc1bc_left">
<h4>3. Планируй утром</h4>

Если выставка идет несколько дней, проводи планерки с коллегами по стенду каждое утро. Напоминай роли и функции всей команде. А накануне выставки настрой людей на четкую цель: озвучь точный план продаж, контактов, встреч.
</div>


<div class="article_advices_5ca4a9_left">
<h4>4. Не трать время прессы зря</h4>
Поймать прессу сложно, поэтому заранее пригласи на стенд журналистов. Живое общение — основа взаимного доверия, а результат — лояльное отношение к компании и частое упоминание в публикациях. Организуй встречу так, чтобы у журналиста не осталось ощущения, что он потратил время впустую. Подготовь неформальную презентацию продукта, расскажи о нем интересно: журналист должен понять, чем твой продукт может быть полезен лично ему. Не забудь в финале встречи закрепить пройденное — вручи пресс-релиз, в котором письменно зафиксированы все озвученные тезисы. Будет здорово, если релиз в электронном виде будет на флэшке с логотипом компании. Не забудь записать на флэшку логотип и, если есть, фотографии.
</div>



<div class="article_advices_ed6a5a_left">
<h4>5. Используй гид </h4>

Убедись, что организатор выставки включил описание твоей компании/продукта в печатный или электронный гид по выставке, пресс-релиз и пост-релиз.
</div>


<div class="article_advices_f4f1bb_left">
<h4>6. Держи буклеты при себе</h4>

Не покупай место в пресс-стойке для своих буклетов. Весь раздаточный материал должен находиться у тебя на стенде: это дешевле, а главное — ты всегда будешь знать, кто получил буклет.
</div>



<div class="article_advices_9bc1bc_left">
<h4>7. Устрой трапезу</h4>
Сытая аудитория — лояльная аудитория. Неформальное общение с клиентами, партнерами или прессой в формате завтрака или ланча — идеальный вариант презентации. Только гостей надо подбирать тщательно и ориентироваться на их цели и мотивацию. На то и существует таргетирование и директ-маркетинг. Особенно удачно такой вариант презентации срабатывает с прессой. А сэкономить на организации завтрака-ланча можно, привлекая спонсоров.
</div>




<div class="article_advices_5ca4a9_left">
<h4>8. Пакет — каждому</h4>

Если ты считаешь, что затраты на трапезу того не стоят, то дешевле, а иногда и эффективней, устроить короткую конференцию с хорошо таргетированной аудиторией. Не забудь положить на каждый стул папку с пресс-релизом, брошюрой или журналом. А лучше — брендированный пакет со всей информацией и небольшим сувениром от компании. Главное, чтобы конференция не длилась больше 30 минут, иначе внимание аудитории будет потеряно.
</div>



<div class="article_advices_e6ebe0_left">
<h4>9. Управляй стендом</h4>

Специально обученный человек, а не инженер или замдиректора, должен всегда присутствовать на стенде. Только маркетолог сможет оценить эффективность работу стенда и сориентироваться в ситуации, чтобы повысить профит от выставки. Менеджеры на стенде всегда ждут возможности «напасть» на посетителя, далеко не каждый менеджер способен заманить человека на стенд приятной беседой, а не нарочитой попыткой продажи.
</div>



<div class="article_advices_ed6a5a_left">
<h4>10. Сортируй трафик</h4>

Помни простую схему эффективной работы: маркетолог приглашает гостя на стенд, менеджер анализирует гостя и выясняет потребности, иногда анкетирует, и только после этого гость идет к менеджеру по продажам и тот проводит с гостем столько времени, сколько потребуется.
</div>


<div class="article_advices_f4f1bb_left">
<h4>11. Организуй доставку</h4>

Отличная возможность познакомить всех участников выставки со своей компанией — устроить им доставку утренней газеты в брендированном конверте, например. Но это сработает, если все участники живут в одном отеле. Иначе — заранее напечатай гид по местным ресторанам «по версии компании» и раздай прямо на выставке. Благодарности не избежать.
</div>


<div class="article_advices_9bc1bc_left">
<h4>12. Не трать на безделушки</h4>

Часто раздаточный материал — пустая трата. За ним охотятся «выставочные коллекционеры», собирающие брендированные ручки и прочую ерунду. Реальные клиенты хотят от тебя решения их задач, а не брелок. Но если уж ты решил подготовить немного сувениров, пусть они будут релевантны продукту. Если ты представляешь приморский отель, вручай гостям пляжное полотенце, а не блокнот или наклейку на авто.
</div>

<div class="article_advices_5ca4a9_left">
<h4>13. Отказывай красиво</h4>

Не раздавай буклеты и сувениры кому попало. Но прямо не отказывай. Скажи, что ты вышлешь буклет по почте, чтобы сейчас не пришлось таскать тяжести. Настаивай на своем. В лучшем случае ты получишь контакты посетителя и сможешь его идентифицировать, в худшем — человек поймет, что презент ему не достанется и уйдет с миром.
</div>

<div class="article_advices_e6ebe0_left">
<h4>14. Движение — жизнь</h4>

Активнее всего гости выставок реагируют на движение. Если у тебя на стенде есть движущийся предмет, механизм, робот или фонтан — это половина успеха. Важно, чтобы нечто движущееся было релевантно продукту. Нет смысла ставить фонтан на стенд бумажной фабрики, пусть это будет гигантское оригами.
</div>


As the result it shows random vertical spaces between boxes. This disappears if I'm adding
height:500px
, but then all boxes are the same size which is can not be solution in my case.

problem image

my goal

Answer

Use CSS3 layout mode flexbox

  • wrap your <div>s with a <div class="container">
  • add CSS:
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1750px;  // use a size necessary to split text into two columns
}
  • there's no need for the float: left property. Remove them.
  • to best achieve the expected result, run the JavaScript filter below to sort your items in odds column and evens column.
// grabbing odd articles
var articlesLeft = document.querySelectorAll("[class^='article_advices_']:nth-child(odd)");
// grabbing even articles
var articlesRight = document.querySelectorAll("[class^='article_advices_']:nth-child(even)");
console.log(articlesLeft, articlesRight);
// clearing article nodes from container
var container = document.getElementsByClassName("container")[0];
container.innerHTML = "";
// appending all odd articles then appending even articles
articlesLeft.forEach(function(article) {
    container.appendChild(article);
});
articlesRight.forEach(function(article) {
    container.appendChild(article);
});

here's a fiddle: https://jsfiddle.net/warkentien2/hcv2ps9r/1/

-- Also:

  • you could use: flex-direction: row but it would need stretch
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}