Как решить проблему с позиционированем sidebar?

Question

[Stok29]

Приветствую. Столкнулся с такой проблемой, sidebar отказывается нормально позиционироваться с float: right;
вот собственно как это выглядит


Как зафиксить данный баг ? Также если ставлю на div newsList
position: absolute;, то сайдбар встает на место, но подлложка content отказывается растягиваться под плашку newsList. В общем я в этом ****** запутался прошу вашей поомщи.

.newsList {
  border-style: solid;
  border-width: 1px;
  border-color: rgb(0, 0, 0);
  background-color: rgb(19, 19, 19);
  box-shadow: inset 0px 0px 0px 1px rgba(42, 42, 42, 1); 
  width: 648px;
  position: relative;
}

#sideBar {
        width: 270px;
	float: right;
	position: relative;
}

Answer 1

[Dizainer Gazeti]

Пробовали эти два варианта?
1. Задать "float: left" для класса "newsList". Создать и сделать последним в диве "content" <div style="clear: both;">
2. Либо уменьшить ширину сайд бара или новостного блока. Если сработает этот вариант, значит придётся подгонять паддинги и размеры в диве "content"

Comments

[Stok29]

Большое спасибо, 1 вариант помог.

[Dizainer Gazeti]

Нет проблем! Извиняюсь, но я забыл закрыть этот див. Надеюсь, что вы разобрались и у вас всё в порядке

Answer 2

[rhost]

Если я правильно вас понял.
codepen.io/anon/pen/BNRvBy

Comments

[Stok29]

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

[Stok29]

clear:both; К сожалению не помогает, перепробывал все что пришло в голову, опять же ничего кроме pos absolute на див newsList, который возвращает sidebar на нужное место. Но контент не будет растягиваться под элемент с pos absolute, в этом вся и проблема...

[rhost]

Stok29: codepen.io/anon/pen/BNRvBy

[Stok29]

rhost: Так, рано я радовался, вот что вышло https://www.dropbox.com/s/sh9d3t4kshxgjuc/%D0%91%D...

[rhost]

Stok29: "clear-fix" родительскому блоку, как у меня в примере.

Answer 3

[Евгений Одинец]

.newsList {
    float:right;
}

Comments

[Stok29]

К сожалению вообще не то.

[Евгений Одинец]

Stok29:

.newsList {
position:absolute;
margin-right: 280px;
}

#sideBar {
position:absolute;
right:0;
}

Answer 4

[Дмитрий Шинкарь]

Может стили родительского дива мешают? Весь код смотрели?

Comments

[Stok29]

Вам именно код разметки нужен или стилей ? Я так на html глянул, теги везде закрыты, ничего не конфликтует между собой. В css не уверен.

[Дмитрий Шинкарь]

Теги в любом случае закрыты, они либо закрываются автоматически, либо у вас ничего не работает :D

Да, посмотрите на стили родителей. Еще возможен вариант что стили добавляются при помощи JS\Jquery, в таком случае их может и не быть в вашем файле стилей. Все поочередно надо проверять. Хотя опять таки по поводу родителей - предположение, но проверить надо.