Помогите с вёрсткой

[zolga7]

Здравствуйте. Помогите с версткой. На скриншоте div с классом .maiin-content имеет зеленную рамку, div с классом .content имеет красную рамку. Вопрос почему эти дивы не растягиваются? Контент в дивах есть. div с классом .content находиться в div с классом maiin.content.

[Alex11223]

код (имеющую к вопросу отношение часть) лучше выкладывать в сообщении в теге [ CODE], а не в архиве.

У .container же задан max-width, видимо поэтому и не растягивается дальше.

Вообще для нормальной responsive верстки обычно проще взять что-то типа Bootstrap.

[zolga7]

Спасибо за ответ.

Сообщение от Alex11223

код (имеющую к вопросу отношение часть) лучше выкладывать в сообщении в теге [ CODE], а не в архиве.

У .container же задан max-width, видимо поэтому и не растягивается дальше.

Я всегда думала что max-width влияет на ширину, а не на высоту контента.

.maiin-content {
	margin: 0 265px 0 20%;
	border: 1px solid #1DA71C;
}

.content {
	margin: 0 2% 0 0;
	position: relative;
	border: 1px solid #FC0202;
}

.categories {
	width: 750px;
	overflow: hidden;
	margin-bottom: 20px;
}

.categories ul {
	float: left;
}

.categories ul li {
	float: left;
	line-height: 1;
	border-left: 1px solid #333;
	padding: 0 10px;
}

.categories ul li:first-child {
	border-left: none;

}

.categories ul li a {
	color: #333;
}

.categories ul li a:hover {
	text-decoration: none;
}

.activ {
	text-decoration: none;
}

.content h1 {
	font: normal 20px "Trebuchet MS";
	color: #000;
	padding-left: 10px;
}

.blog-top {
	position: absolute;
	overflow: hidden;
	width: 750px;
}

.blog-cat {
	float: left;
	width:  163px;
}

.cat-blog {
	margin: 20px 20px 0 30px;
}

.magn-glass {
	float: left;
	position: relative;
	top: 0;
	left: 50px;
}

.zoom {
	margin-left: 75px;
}

.blog-top-left {
	float: left;
	width: 315px;
	line-height: 1.5;
	text-align: justify;
	margin-top: 60px;
}

.blog-top-left p strong {
	font-weight: bold;
	color: #727272;
}

.blog-top-center {
	margin-left: 41px;
	float: left;
	width: 1px;
	height: 122px;
	background: #333;
	margin-top: 55px;
}

.blog-top-right {
	float: right;
	width: 200px;
	margin-top: 68px;
}

.blog-top-right p strong {
	font-size: 24px;
	color: #bd0805;
}

.blog-top-right p {
	font-size: 12px;
	color: #727272;
}

.by {
	background: url(../images/bottom-sravn.jpg) left center no-repeat;
	width: 110px;
	height: 22px;
	margin: 15px 0 15px 28px;
}

.by a {
	margin: 0 0 0 19px;
	font-size: 11px;
	color: #fff;
}

.by a:hover {
	text-decoration: none;
}

.basket-give a {
	font-weight: bold;
	color: #306daa;
	margin-left: 20px;
}

.basket-give a:hover {
	text-decoration: none;
}

[Alex11223]

А, я думал про ширину вопрос.

[zolga7]

Как решить проблему?

[Naive]

Пальцем в небо:

.content:after {
  display: block;
  width: 100%;
  height: 0;
  content: '';
  clear: both;
}

[zolga7]

Сообщение от Naive

Пальцем в небо:

.content:after {
  display: block;
  width: 100%;
  height: 0;
  content: '';
  clear: both;
}

Спасибо помогло.


подскажите пожалуйста, как правильно с позиционировать этот блок

вот мой код

.blog-top {
	overflow: hidden;
	width: 750px;
}

.blog-cat {
	float: left;
	width:  163px;
	
}

.cat-blog {
	float: left;
	margin: 20px 20px 0 30px;
}

.magn-glass {
	position: relative;
	top: 0;
	left: 50px;
}

.zoom {
	margin-left: 75px;
}

.blog-top-left {
	float: left;
	width: 320px;
	line-height: 1.5;
	text-align: justify;
	margin-top: 60px;
	padding-right: 40px;
	border-right: 1px solid #333;
}

.blog-top-left p strong {
	font-weight: bold;
	color: #727272;
}

.blog-top-center {
	margin-left: 41px;
	float: left;
	width: 1px;
	height: 122px;
	background: #333;
	margin-top: 55px;
}

.blog-top-right {
	float: right;
	width: 200px;
	margin-top: 68px;
}

.blog-top-right p strong {
	font-size: 24px;
	color: #bd0805;
}

.blog-top-right p {
	font-size: 12px;
	color: #727272;
}

.by {
	background: url(../images/bottom-sravn.jpg) left center no-repeat;
	width: 110px;
	height: 22px;
	margin: 15px 0 15px 28px;
}

.by a {
	margin: 0 0 0 19px;
	font-size: 11px;
	color: #fff;
}

.by a:hover {
	text-decoration: none;
}

.basket-give a {
	font-weight: bold;
	color: #306daa;
	margin-left: 20px;
}

.basket-give a:hover {
	text-decoration: none;
}