Как я могу иметь плавающие divs влево и вправо?

Question

Мне нужно показать страницу с иконкой продукта (которая обычно размером 300x400 пикселей в размерах) в левой части страницы и ее деталями с правой стороны.

Мне показалось, что я поместил описание в строки таблицы. Я создал 3 элемента div - контейнер, icondiv и detaildiv, и попытался поплавать icondiv влево, а подробности div вправо. Я получил icondiv на левой стороне страницы, но информация div показана ниже icondiv не бок о бок!

В идеале, icondiv должен быть 25-30% в ширине containerdiv, а подробности div должны занимать остальную часть ширины. Мне интересно, есть ли способ сделать это, не упоминая ширину в пикселях.

, пожалуйста, поправьте меня, если есть что-то не так с моим CSS

благодаря

марка

<div class ="itemdetailscontainer"> 
    <div class="itemicondiv"> 
     <img border="0" src="${item.isbn }.png" alt="${item.isbn }.png" /> 
    </div> 
    <div class="itemdetailsdiv"> 
     <table id="itemdetailstable" width="100%"> 
     <tr> 
      <td> 

      ${item.name } 

      </td> 
     </tr> 

      <tr> 
      <td>by</td> 
      </tr> 
      <tr> 
      <td>${item.maker.name }</td> 
      </tr> 

      <tr> 
      <td> 
       <p>Description:</p> 
       <p>${item.description}</p> 
      </td> 
      </tr> 
     </table> 
    </div> 
</div> 

КСС

div.itemdetailscontainer{ 
    float:clear; 
} 
div.itemicondiv{ 
    float:left; 
} 
div.itemdetailsdiv{ 
    float:right;  
} 

---

Я попробовал этот

div.itemdetailscontainer{ 
    width:100%; 
} 
div.itemicondiv{ 
    float:left; 
    width:25%; 
} 
div.itemdetailsdiv{ 
    float:right; 
    width:75%; 
} 

и это получает эффект ..

благодарит всех за responding..Is использование ширина: 25% и т.д. проблематичной? Нужно ли мне жестко кодировать ширину в пикселях и т. Д.? Свойство переполнения было ново для меня ..

Answer 1

См:http://jsfiddle.net/Uys4s/

div.itemdetailscontainer{ 
    overflow: hidden; 
    background: #eee 
} 
div.itemicondiv{ 
    float: left; 
    width: 30%; 
    background: #ccc 
} 
div.itemdetailsdiv{ 
    overflow: hidden; 
    background: #aaa 
} 

• width: 30% обрабатывает это: "В идеале icondiv должна быть шириной containerdiv 25-30%"
• overflow: hidden на div.itemdetailsdiv обрабатывает это: «detailsdiv должен принять до остальной ширины ".
• overflow: hidden на div.itemdetailscontainer будет содержать поплавки так, как я думаю, вы представляете себе несуществующий clear: float. Взгляните на valid values of clear.Если вы отчаянно хотели использовать clear: both, чтобы очистить ваши поплавки, вот как вы это сделаете: http://jsfiddle.net/Uys4s/1/ - но overflow: hidden проще.

Answer 2

Там нет ничего называется флоат: ясно Должно быть:

float : none; 

или если вы пытаетесь очистить поплавок должно быть:

clear:both 

Answer 3

float: clear не существует! Я думаю, что вы хотите: clear: left/right/both

Answer 4

Убедитесь, что ваш контейнер (itemdetailscontainer) имеет достаточную ширину, чтобы держать их рядом друг с другом. Осмотрите с помощью Firebug или другого инструмента и проверьте ширину.

Также я бы предложил вам использовать div для itemdetailstable для согласованности.