Jump to content
  • 0

Три колонки на дивах

termit

Asked by termit,

 Share

Question

termit Explorer

termit

Posted
Posted

Мучаюсь с трехколоночным макетом на дивах. Левая и правая колонка фиксированы по ширине (250px), высота auto. Центральная колонка занимает все оставшееся пространство. Проблема с относительным позиционированием правой колонки, float не срабытывает как надо, колонка относительно правой стороны встает как надо по горизонтали, но опускается под центральную по вертикали, что я только не делал..... Если ее позиционировать абсолютно, то все встает на свои места, но это не годится, т.к. в том случае если она длиннее остальных колонок, то уходит под подвал, т.к. в общем потоке она не существует.

Я новичек, подскажите как правильно???

вот HTML:

<div id=head>

<div id=header>

</div>

</div>

<div id=conteiner>

<div id=leftcolums>

</div>

<div id=cont>

</div>

<div id=rightcolums>

</div>

</div>

<div id=footer>

<div>

</body>

</html>

CSS:

html, body {

margin: 0;

padding: 0;

height: 100%;

width: 100%;

}

#head {

height: 400px;

width: auto;

background: url(images/head.png);

}

#header {

height: 400px;

width: 514px;

background-image: url(images/header.jpg);

}

#conteiner{

position: relative;

width: 100%;

overflow: hidden;

background: yellow;

}

#cont{

position: relative;

width: auto;

height: auto;

margin-left: 260px;

margin-right: 260px;

background: pink;

}

#leftcolums {

position: relative;

float: left;

background: blue;

height: auto;

width: 250px;

}

#rightcolums {

position: relative;

float: right;

margin-top: 0px;

background: green;

height: auto;

width: 250px;

}

#footer {

clear: both;

overflow: hidden;

position: relative;

height: 101px;

width: auto;

background: url(images/footer.gif);

}

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
termit Explorer

termit

Posted
  • Author
Posted
В html-коде поставь плавающие блоки первыми, а блок с контентом (с неопределенной шириной) - за ними.

Спасибо большое, блок встал на место! А почему так? хотелось бы понять на будущее...

Link to comment
Share on other sites
  • 0
shvv Explorer

shvv

Posted
Posted (edited)
Спасибо большое, блок встал на место! А почему так? хотелось бы понять на будущее...

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

Если я не прав, сейчас эксперты меня поправят)

Edited by shvv
Link to comment
Share on other sites
  • 0
termit Explorer

termit

Posted
  • Author
Posted
Потому что блочные элементы занимают всю ширину окна. Поэтому блок с контентом вытесняет правую колонку, и она сдвигается на следующую строку.

Если я не прав, сейчас эксперты меня поправят)

Но отступы то я указал, слева и справа! Если крайние колонки убрать, то видно что задуманное сбылось, контент занимает не все окно, по бокам пустое пространство. Еще пробовал вариант с отрицательными отступами, все бы хорошо, но 6 IE вообще не отображает такие блоки. А этот вариант вроде работает везде. ^_^

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
А почему так? хотелось бы понять на будущее...

Просто мое предположение: float - это не тоже самое, что и position: absolute;, поэтому, чтобы плавающий элемент перекрывал собой другие элементы, он должен быть выше в потоке, если же он будет стоять ниже остальных элементов, то наверх он не запрыгнет ибо с чего бы ему это делать?

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Вот такой вариантик предложить могу с контентом впереди

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
	<style type="text/css">
	*{ margin:0; padding: 0;}
		body { min-width: 500px;}
		div.head { height: 100px; background: blue;}
		div.right {
				float:left; 
				width: 200px;
				margin-left: -200px;; 
				background: red;
				display: inline;
		}
		div.wrap { float:left; width:100%;}
		div.content{ margin: 0 200px; background: #FF9; }
		div.sidebar{ 
			float:left; 
			width: 200px;
			margin-left:-100%; 
			background: red;
			display: inline;
		}

		div.foot { background: blue; height: 100px; clear: both;}

		p { padding: 10px;}



	</style>
		<!--[if lte IE 7]>
	<style type="text/css">
*html body { width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");

	</style>
	<![endif]-->
</head>

<body>

	<div class="head">Header</div>

		<div class="wrap">
			<div class="content">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>

			</div>
		</div>
		<div class="sidebar">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
		</div>
		<div class="right">
				<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>

		</div>
		<div class="foot">Footer</div>


</body>
</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept