Jump to content
  • 0

Выравнять два блока по высоте


Subcomandante.A
 Share

Question

Друзья, подскажите, пожалуйста, как выравнять два блока по высоте внутри третьего, при условии что первый блок постоянно меняет свою высоту в зависимости от отображаемого контента? Во втором диве контент тоже меняется, но его мало, поэтому высота блока почти всегда одинаковая.

Пробовал для второго блока прописать {height: inherit;}, чтобы он наследовал высоту третьего блока (и тогда все было бы как надо), но не помогает.

Скрин:

http://files.mail.ru/QQMQ1I?t=1

Код:

HTML


<div class="conc-item">
<div class="conc-info"> // 1-ЫЙ БЛОК
<div class="cornerContainer ccLightGreen"> // ВНУТРИ 1-ГО БЛОКА БЛОК С ЗАКРУГЛЕННЫМИ КРАЯМИ
<b class="r5 corner"></b><b class="r3 corner"></b><b class="r2 corner"></b><b class="r1 corner"></b><b class="r1 corner"></b>
<div class="cornerContainerContent">
<div class="head"><a href="{{ href.Contests }}/{{ contest.id }}">{{ contest.name_trans|safe }}</a></div>
<div class="body">
<p>
<b>{% trans "Account type" %}:</b> {{ contest.account_type }} <br>
<b>{% trans "Available prizes" %}:</b> {{ contest.Awards }} <br>
<b>{% trans "Contest Period" %}:</b> {{ contest.Start_DateTime }} - {{ contest.End_DateTime }} {% trans "(Server time)" %} <br>
<b>{% trans "Number of participants" %}:</b> {{ contest.members.count }}
</p>
</div>
</div>
<b class="r1 corner"></b><b class="r1 corner"></b><b class="r2 corner"></b> <b class="r3 corner"></b><b class="r5 corner"></b>
</div>
</div>
<div class="conc-user-info"> // 2-ОЙ БЛОК
<div class="cornerContainer ccLightGreen"> // ВНУТРИ 2-ГО БЛОКА БЛОК С ЗАКРУГЛЕННЫМИ КРАЯМИ
<b class="r5 corner"></b><b class="r3 corner"></b><b class="r2 corner"></b><b class="r1 corner"></b><b class="r1 corner"></b>
<div class="cornerContainerContent"> // ВЫСОТУ ЭТОГО DIV'A И НУЖНО ВЫРАВНЯТЬ
<div class="head"><a href="{{ href.Monitor }}/{{ contest.login.Server }}/{{ contest.login.Login }}">Я зарегистрирован</a></div>
<div class="body">
<p>
<b>{% trans "Nickname" %}:</b> {{ contest.login.nickname }} <br>
<b>{% trans "Login" %}:</b> {{ contest.login.Login }} <br>
<b>{% trans "Password" %}:</b> {{ contest.login.contest_password }} <br>
</p>
</div>
</div>
<b class="r1 corner"></b><b class="r1 corner"></b><b class="r2 corner"></b> <b class="r3 corner"></b><b class="r5 corner"></b>
</div>
</div>
</div>

CSS


.conc-item {
height: 1%;
overflow: hidden;
margin-bottom: 0px;
border-bottom: 1px solid #d2d2d2;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
}

.conc-info {
width:595px;
float:left;
}

.conc-user-info {
width:281px;
float:right;
}

.cornerContainer .cornerContainerContent {
padding: 15px;
}

.ccLightGreen .cornerContainerContent, .ccLightGreen .corner {
background-color: #dde999;

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

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
возможно ли решить такую проблему скриптом?

просто такая же проблема, и много переписывать в из див в таблицу(

Вам не кажется немного глупым писать скрипт, просто из-за нежелания использовать таблицу?

Link to comment
Share on other sites

  • 0

возможно ли решить такую проблему скриптом?

просто такая же проблема, и много переписывать в из див в таблицу(

Посмотрите 2-ой способ по этой ссылке, мб это то, что Вы ищете: http://habrahabr.ru/blogs/css/64173/

Для себя решил использовать таблицы, но почему-то все равно не получилось - правая ячейка всегда меньше левой :(

<table cellpadding="0" cellspacing="10" border="0" bgcolor="#f3f8d6">
<tr>
<td width="70%" valign="top">
<table width="100%" height="100%" cellpadding="0" cellspacing="10" border="0" bgcolor="#DDE999">
<tr>
<td><a href="{{ href.Contests }}/{{ contest.id }}">{{ contest.name_trans|safe }}</a></td>
</tr>
<tr>
<td>
<b>{% trans "Account type" %}:</b> {{ contest.account_type }} <br>
<b>{% trans "Available prizes" %}:</b> {{ contest.Awards }} <br>
<b>{% trans "Contest Period" %}:</b> {{ contest.Start_DateTime }} - {{ contest.End_DateTime }} {% trans "(Server time)" %} <br>
<b>{% trans "Number of participants" %}:</b> {{ contest.members.count }}
</td>
</tr>
</table>
</td>
{% if contest.login %}
<td width="30%" valign="top">
<table width="100%" height="100%" cellpadding="0" cellspacing="10" border="0" bgcolor="#DDE999">
<tr>
<td><a href="{{ href.Monitor }}/{{ contest.login.Server }}/{{ contest.login.Login }}">{% trans "I am registered" %}</a></td>
</tr>
<tr>
<td>
<b>{% trans "Nickname" %}:</b> {{ contest.login.nickname }} <br>
<b>{% trans "Login" %}:</b> {{ contest.login.Login }} <br>
<b>{% trans "Password" %}:</b> {{ contest.login.contest_password }}
</td>
</tr>
</table>
</td>
{% else %}
<td width="30%" valign="top">
<table width="100%" height="100%" cellpadding="0" cellspacing="10" border="0" bgcolor="#DDE999">
<tr>
<td>{% if contest.AllowRegDuringActive %}<a href="{% if member %}{{ href.Member_Contests_Register }}{% else %}{{ href.Contests_Register }}{% endif %}/{{ contest.id }}" class="conc-reg">{% trans "Go in" %}</a>{% endif %}</td>
</tr>
<tr>
<td>
{% blocktrans with name=contest.name_trans %}To join the {{ name }} contest, click "Go in".{% endblocktrans %}
</td>
</tr>
</table>
</td>
{% endif %}
</tr>
</table>

Edited by Subcomandante.A
Link to comment
Share on other sites

  • 0

Благодарю за отзывы, ребят)

Да, скрипт писать немного глуповато.

Я решил свою проблему, присвоив главному диву display:table, а вложенным в него display:table-cell

все флоат ессно убрал)

Оказалось, все совсем незаморочно)

Спасибо вам!

Subcomandante.A, может быть вам попробовать так же?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy