Проблем със CSS

E

explozen

Registered
Здравейте :D
От 2 дни се опитвам да наместя един див но не ми се получава. Кво ли не опитах но не се мести и не :evil:
Става дума за снимката по-долу:
http://prikachi.com/images/154/8570154B.png
Искам right collum да се качи до left...

Ето и кода:
Код: 
<div id="content_in">

<div class="left_collum">
left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>left collum<br>
</div>


<div class="right_collum">
right collum
</div>

</div>
<br>
<div id="footer">
<center>footer</center>
</div>

Код: 
#content_in {
padding-left:10px;
display:both;
}

.left_collum {
padding-left:5px;
margin-top:10px;
padding-right:5px;
padding-bottom:5px;
width : 750px;
border : solid black 1px;
background-image: url('http://fighterbg.com/imgs/headerbar.png');
-moz-box-shadow:     0 0 30px #000000;
-webkit-box-shadow:  0 0 30px #000000;
box-shadow:          0 0 30px #000000;
}

.right_collum {
margin-top:10px;
padding-left:5px;
width: 300px;
height: 200px;
border : solid black 1px;
background-image: url('http://fighterbg.com/imgs/headerbar.png');
-moz-box-shadow:     0 0 30px #000000;
-webkit-box-shadow:  0 0 30px #000000;
box-shadow:          0 0 30px #000000;
}
 
Сложи им:
[css]float: left;[/css]

8570219j.png
 
Демо: https://jsfiddle.net/2hdq3sbv/1/

Добавяш:
.left_collum - float: left;
.right_collum - float: right;
и един helper клас:
Код: 
.clear {
    clear: both;
}

И след двете колони чистиш float-a с хелпър класа:
Код: 
<br class="clear">

В демото сложих колоните в проценти, ти си избираш как да е :)

Идеята е, че за да се съберат двете колони вертикално, трябва да имат общо ширина на width на #content_in. Тъй като не си специфирал, тя е 100%.

Добавяш float и се нареждат. Но трябва да го изчистиш, за да може блоковите елемнти след двете колони да се наредят.

Запомни също, че padding-left/padding-right и margin-left/margin-right се включват в ширината на колоните. Което значи, че ако имаш да запълниш 100% от екрана и двете ти колони имат margin-left: 5% и искаш да са с еднаква ширина трябва да им зададеш width: 45% (а не 50%).
 
Fakeheal каза:
Демо: https://jsfiddle.net/2hdq3sbv/1/

Добавяш:
.left_collum - float: left;
.right_collum - float: right;
и един helper клас:
Код: 
.clear {
    clear: both;
}

И след двете колони чистиш float-a с хелпър класа:
Код: 
<br class="clear">

В демото сложих колоните в проценти, ти си избираш как да е :)

Идеята е, че за да се съберат двете колони вертикално, трябва да имат общо ширина на width на #content_in. Тъй като не си специфирал, тя е 100%.

Добавяш float и се нареждат. Но трябва да го изчистиш, за да може блоковите елемнти след двете колони да се наредят.

Запомни също, че padding-left/padding-right и margin-left/margin-right се включват в ширината на колоните. Което значи, че ако имаш да запълниш 100% от екрана и двете ти колони имат margin-left: 5% и искаш да са с еднаква ширина трябва да им зададеш width: 45% (а не 50%).
Увеличете...
Еее тръгна :D
Благодаря !
 
Глупости пишеш.
Само трябваше да сложи маргин на едната колона за да ги отдели.
На мобилен как изглежда това според теб?
 
Или ако искаш да си от the cool kids, използваш flexbox(IE>10)
https://jsfiddle.net/yfzxmsf7/

PS: Ако искаш да използваш float:left, може би ще ти е по-лесно да задаваш ширината с calc, примерно ако искаш и двете колони да са по 50% с 10px margin между тях -
Код: 
width:calc(50% - 10px)
(със спейса), разбира се, трябва да посочиш margin-а също
 
Ако не е респонсив, гоогле няма да го индексира. https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design

Затова uphero ти показа този метод, за да е респонсив.
 
acira каза:
Ако не е респонсив, гоогле няма да го индексира. https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design

Затова uphero ти показа този метод, за да е респонсив.
Увеличете...

Прочети дефиницията на гугъл за responsiveness и как бота я определя.

Also метода му suggest-ва използването на пиксели. Определено не мисля, че пискелите са респонсив.

OP искаше да нареди две колони една до друга. Не е споменал изискване за responsiveness (а и на този етап, според мен ще му е трудно, след 2часово редене на две колони).

Предложих му метод, който си работи. НЕ Е ПЕРФЕКТЕН.

Не знаем какво има в дясната колона или в лявата колона. Не знаем дали дясната колона трябва да падне под лявата (или да изчезне) при определен breakpoint.

Просто избягвайте изкази от сорта

"Глупости пишеш."
Увеличете...

Like seriously.
 
acira каза:
Ако не е респонсив, гоогле няма да го индексира. https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design

Затова uphero ти показа този метод, за да е респонсив.
Увеличете...
Няма да го индексира за мобилни телефони. Но за настолни РС-та мисля, че си го индексирва.
 
Ще го индексира, но ще му е по-нисък рейтинга. Това е тъпо по-принцип, защото аз може да искам съвсем различни дизайни в зависимост от устройството. Ама какво можеш да направиш монополистите определят правилата.
 
Fakeheal каза:
acira каза:
Ако не е респонсив, гоогле няма да го индексира. https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design

Затова uphero ти показа този метод, за да е респонсив.
Увеличете...

Прочети дефиницията на гугъл за responsiveness и как бота я определя.

Also метода му suggest-ва използването на пиксели. Определено не мисля, че пискелите са респонсив.

OP искаше да нареди две колони една до друга. Не е споменал изискване за responsiveness (а и на този етап, според мен ще му е трудно, след 2часово редене на две колони).

Предложих му метод, който си работи. НЕ Е ПЕРФЕКТЕН.

Не знаем какво има в дясната колона или в лявата колона. Не знаем дали дясната колона трябва да падне под лявата (или да изчезне) при определен breakpoint.

Просто избягвайте изкази от сорта

"Глупости пишеш."
Увеличете...

Like seriously.
Увеличете...
То се подразбира? Ако бяхме 2000-та щеше да е добро решение едно наляво друго надясно, но сме вече 2016 ;)
 
teroristd каза:
Ще го индексира, но ще му е по-нисък рейтинга. Това е тъпо по-принцип, защото аз може да искам съвсем различни дизайни в зависимост от устройството. Ама какво можеш да направиш монополистите определят правилата.
Увеличете...
Така е..
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе