Форум Сайтостроение Веб-строительство

Блоки по бокам блока (верстка)

C
На сайте с 04.02.2005
Online
277
Chukcha
1114

Пните в нужную сторону

Имею такую верстку 

<style type="text/css">

#main{width:1000px; margin:0 auto; position:relative;height:500px;background:#0000ff}

#left{position:absolute;left:-200px;width:200px;height:200px;background:#ff0000}

#right{position:absolute;right:-200px;width:200px;height:200px;background:#00ff00}

</style>

</head>

<body>

<div id="main">

	<div id="left"></div>

	<div id="right"></div>

</div>

</body>

</html>

На первый взгляд все хорошо

Но при уменьшении экрана хочу иметь вот такое

А на самом деле, имею такое

Причем на планшете не центрируется (при просмотре хромом)

Playerror
На сайте с 28.09.2008
Offline
117
Playerror
#1

Присоединяюсь к вопросу, тоже интересно почему левый блок схлопывается.

Блог (https://goo.gl/5VP0UR)
bay_ebook
На сайте с 28.05.2010
Offline
111
bay_ebook
#2

1) вместо position:absolute - юзаем display: inline-block;

2) читаем про margin auto;

3) читаем что-то типа:

http://shpargalkablog.ru/2012/01/css-overflow-word-wrap-text-overflow.html

http://htmlbook.ru/css/visibility

Нужен прогер на php+mysql+понимание чужего кода? (/ru/forum/540660) Вам сюда PHP-шаман (http://php-shaman.pw/)
C
На сайте с 04.02.2005
Online
277
Chukcha
#3

inline-block

И чем он поможет?

Тем что блоки выстроятся в ряд?

visibility

Это причем?

overflow

Опять же, непонятно зачем.

margin:0 auto

прописано для центрального(синего) блока.

Р
На сайте с 07.02.2013
Offline
164
рецидивист
#4

Вы хотите, чтобы блоки выходили за пределы монитора?))) Если да, то вам стоит заняться научной деятельностью или приклеить к монитору красные стикеры в нужных местах)

На самом деле вариантов масса!

Один простой вариант:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	

	.wrapper{

		width: 1100px;

		margin: 0 auto;

	}

	.sub{

		width: 1000px;

		height: 200px;

		margin-left: 50px;

		margin-right: 50px;

		background: blue;

		position: relative;

	}

	.left, .right{

		width: 100px;

		height: 100px;

		position: absolute;

		top:0;

		background: red;

	}

	.left{

		left: -100px;

	}

	.right{

		right: -100px;

	}



	</style>

</head>

<body>

	<div class="wrapper">

		<div class="sub">

			<div class="left"></div>

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

		</div>

	</div>

</body>

</html>
C
На сайте с 04.02.2005
Online
277
Chukcha
#5
Вы хотите, чтобы блоки выходили за пределы монитора?))) Если да, то вам стоит заняться научной деятельностью или приклеить к монитору красные стикеры в нужных местах)

:) Ага... ща... Разбежался.

Увы, внешний врапер не возможен. Есть причина.

Все это клеится в готовый шаблон и ломать мне его очень не хочется

скриптом я вкладываю в основной блок "уши"

Р
На сайте с 07.02.2013
Offline
164
рецидивист
#6

Или так: 

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	body{

		margin: 0;

		padding: 0;

	}

	.wrapper{

		margin: 0 auto;

		width: 1200px;

	}

	.b0{

	width: 1200px;

	height: 100px;

	margin: 0 auto;

	background: red;

	}

	.b1{

		width: 1000px;

		height: 200px;

		background: blue;

		margin: -100px auto 0;

	}

	</style>

</head>

<body>

<div class="wrapper">

<div class="b0"></div>

<div class="b1"></div>

</div>	

</body>

</html>
bay_ebook
На сайте с 28.05.2010
Offline
111
bay_ebook
#7
Chukcha:
inline-block
И чем он поможет?
Тем что блоки выстроятся в ряд?

visibility
Это причем?

overflow
Опять же, непонятно зачем.

margin:0 auto
прописано для центрального(синего) блока.

Тогда у вас ничего не получится, особенно если не понимать зачем нужны первых 3 пункта. Да и margin:0 auto нужен тоже, но не только для центрального, но и общей обертки.

А общая суть - делаем один обий блок, с центрированием и overflow и visibility и фикс шириной (больше моника). Внутри три дива с inline-block, которые будут по краям прятаться благодаря правильному использованию overflow для общего дива. Работы на 3 минут если честно.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий