Как остановить плавающий div от переноса на следующую строку - все перепробовал

Question

Как остановить плавающий div от переноса на следующую строку - все перепробовал

0

Я застрял с этим div в обертке заголовка на следующую строку при изменении размера окна. Вы можете просмотреть его на http://www.commexfx.com. Правый div в заголовке, который включает поле поиска и т.д., Переносится на следующую строку при изменении размера окна. Я пробовал все: меняя положение, дисплей, белое пространство и т.д., Но ничего. структура выглядит так:

    <div id="header">
      <div id="logo"> </div>
      <div class="top-widget"></div>
    </div>

И код CSS на данный момент:

#header {
  margin: 0 auto;
  /* max-width: 960px; */
  width: 960px !important;
  height: 100px !important;
  border: 1px solid blue;
  background-color: #ffffff;
  white-space: nowrap !important; 
}


#logo {
  float: left;
  z-index: 9999999;
  margin-bottom: 20px;
  width: 360px;
  display: inline;
  border:1px solid green;
  padding: 0 !important;
  margin: 0 !important;
}


.top-widget {
  background: none;
  border: none;
  /*clear: right;*/
  float: right;
  height: 95px;
  text-align: right;
  display: inline;
  width: 590px !important;
  border: 1px solid yellow;
  padding: 0 !important;
  margin: 0 !important;
}

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

благодаря

user2969607 08 нояб. 2013, в 17:34

Источник

2

В какой браузер это входит? Я только что попробовал просмотреть его в Chrome, и он мне не подходит.
Adam Miller 08 нояб. 2013, в 16:16

Теги:

html

css

2 ответа

Ещё вопросы

В какой браузер это входит? Я только что попробовал просмотреть его в Chrome, и он мне не подходит.

bradmaxs · Answer 1 · 2013-11-08T14-09-00.000Z

Замените ваш css этими новыми. Плавающие два элемента, один правый и один слева заставят их обернуть, чтобы я использовал встроенный блок.

Вам не нужна позиция: относительная, если вы не позиционируете элементы внутри этого div как абсолютные, чтобы их можно было удалить. То же самое с z-индексом.

Кроме того, вам не нужно! Важно, если у вас нет других стилей, переопределяющих это. Я стараюсь использовать его экономно.

#header {
margin:0 auto;
width:960px;
}

#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}

#logo img {
vertical-align: inherit;
}

.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}

Это сработало отлично! Спасибо брэдмакс
Рад, что помог. Можете ли вы проголосовать и проверить это как ответ?

Felipe Miosso · Answer 2 · 2013-11-08T14-06-00.000Z

Добавьте min-width:960px в ваше объявление css #header.