Все еще не можете выровнять плавающие div'ы после проверки предыдущих сообщений?

0

Проверял предыдущие сообщения, но все еще не смог найти проблему - ранее было 3 div, все плавали влево и выровнялись отлично после факторинга в границах/отступов/полей.

Теперь я пытаюсь сделать простое изменение макета (2 divs/float слева - бок о бок), но не может заставить второй div выравниваться рядом с первым, не уверен, что случилось. Проверено на пропущенные закрывающие теги и т.д., Но не вижу ничего, что могло бы вызвать это.

Благодарим за любую идею! HTML, CSS и JS для того, что сейчас является нерабочим калькулятором, приведены ниже, но не уверены, что они будут отображаться правильно.

HTML

<h2>What is General Services?</h2>
<div class="d1gs">
   The District 1 Committee of Alcoholics Anonymous is a service body for the groups in         
   District 1. It is comprised of the groups' General Service Representatives (GSR's),     
   District ...
</div>
<br>
<div class="d1gs">
   Its primary purpose is to provide a forum for sharing collective 12th Step experience 
   how best to carry the AA message in the Pinellas County area. The District also has   
   responsibility ...
</div>
<br>
<div class="d1gs">
   District 1 is supported by the voluntary contributions of the groups it serves. The     
   District One Committee structure borrows much from "The AA Service Manual and Twelve 
   Concepts ...
</div>
<br>

<!-- begin.column2 -->
<div id="column2">
   <div id="center"><strong>Sobriety Calculator</strong></div>
   <em><small>
      Every alcoholic who has been graced with the gift of sobriety is a miracle
      please use the calculator below to find out how long you've enjoyed your new found 
      freedom… 
   </small></em>
   <div class="center" style="height: 5px;"><small><strong>RIGHT DOWN TO THE SECOND! 
   </strong></small></div>
   <form id="live" class="center" name="live">
      <small>Sober Date: (i.e. <span style="font-style: italic;">May 28, 1995</span>)</small>
      <input type="text" name="age" size="18" />
      <input onclick="sobertimer(this.form)" type="button" name="start" value="Click Here" /> 
      <input type="reset" name="resetb" value="Reset" />
      <label><small>Sober Days</small> </label> <br><input type="text" name="time3" size="12" />
      <label><small>Sober Hours</small> </label> <br><input type="text" name="time2" size="12" />
      <label><small>Sober Minutes</small></label> <br><input type="text" name="time1" size="12" />
      <label><small><em><strong>SOBER HEARTBEATS!</strong></em></small></label><br>
      <input type="text" name="time4" size="12" />
  </form>
</div>
<!-- end .column2 -->

CSS

/* What is District 1 General Services?
-------------------------------------------------------------- */
.d1gs { 
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  font-size: 14px;
  float: left;
  width: 55%;
  margin-bottom: 1.5%;
  margin-top: .5%;
  margin-left: .35%;
  padding: 1% 0 1% 2%;
}

/* Sobriety Calculator
-------------------------------------------------------------- */
#column2 {
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  font-size: 13px;
  line-height: .5em;
  font: 80%/1.4 Verdana, Arial, Helvetica, sans-serif;
  float: left;
  width: 30%;
  margin-bottom: 1.5%;
  margin-left: .35%;
  padding: .5%;
  height: 100%;
  background-color: rgba(255,255,255,.3);
  border-style: inset;
  border-width: 3px;
  border-color: #B2B200;
}

Javascript

<script type="mce-text/javascript">// <![CDATA[
function sobertimer() { 
  today = new Date(); SoberDay = new
  Date(document.live.age.value); timeold = (today.getTime() - SoberDay.getTime()); 
  sectimeold = timeold / 1000; secondsold = Math.floor(sectimeold); msPerDay = 
  24 * 60 * 60 * 1000; timeold = (today.getTime() - SoberDay.getTime()); 
  e_daysold = timeold / msPerDay; daysold = Math.floor(e_daysold); e_hrsold = 
  (e_daysold - daysold) * 24; hrsold = Math.floor(e_hrsold); minsold =   
  Math.floor((e_hrsold - hrsold) * 60); document.live.time4.value = secondsold;  
  document.live.time3.value = daysold;  document.live.time2.value = hrsold; 
  document.live.time1.value = minsold; timerID = setTimeout("sobertimer()", 1000); 
}
// ]]></script>
  • 0
    PS - не уверен, смогу ли я сделать снимок экрана или нет, но имейте это в наличии, если это возможно добавить. Спасибо...
  • 0
    Вы можете добавить скриншоты. Загрузите их в Picasa или что-то еще, а затем просто используйте кнопку изображения.
Показать ещё 1 комментарий
Теги:

1 ответ

0
Лучший ответ

Если теперь я понимаю, что вам нужны два столбца... поэтому сделайте это вложение трех начальных divs в <div id="column1>" и сделайте его плавающим влево с фиксированной шириной. Затем сделайте свой column2 плавающей точкой вправо с шириной ресивера.

* Позаботьтесь о ширине с отступом, краем и границей.

Смотрите этот скрипт и скажите мне, что вы хотите http://jsfiddle.net/pGSAR/6/

  • 0
    Спасибо, Данко, но я должен немного уточнить, извините, если я не объяснил это лучше с самого начала. Три плавающих элемента, которые у меня были ранее, больше не являются частью макета; тем не менее, один из них я теперь хотел поднять вверх, чтобы плавать рядом с текстом, а не иметь плавающие прямоугольники. Пытался добавить изображение, чтобы лучше объяснить, но у меня недостаточно хорошая репутация! Я попытался заключить 2 деления в другое деление, и это не сработало ...
  • 0
    Данко, извини, что не проверил ссылку JSFiddle перед ответом! Это именно то, что я хочу - нужно проверить кодировку, чтобы увидеть, что именно изменилось и где я ошибся, но большое спасибо за вашу помощь! К вашему сведению: вы также не можете проголосовать за ваш ответ, так как у меня пока нет хорошей репутации, но этот ответ был ИДЕАЛЬНЫМ!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню