проблема с использованием max-width

bonyany · July 21, 2011

Суть вопроса в следующем...

есть код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>max-width</title>

	<style type="text/css">
/*———————————--RESET———————————-*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/*——————————-*/
html, body{
width:100%;
}
.l-wrap{
max-width:1200px;
min-width:1000px;
margin:0 auto;
position:relative;
}
.l-leftcol{
float:left;
width:200px;

}
.l-rightcol{
float:right;
width:200px;

}
.l-centercol{
margin:0 200px;
position:relative;
}
table{
border-collapse:collapse;
}
table td{
border:1px solid red;
}
.bordered{
border:1px solid black;
}
	</style>

</head>
<body>

	<div class="l-wrap">

	<div class="l-leftcol bordered">Leftcol</div>
	<div class="l-rightcol bordered">Rightcol <br /> <br /></div>
	<div class="l-centercol bordered">
		<table width="1000">
			<tr>
				<td>1</td>
				<td>2</td>
			</tr>

			<tr>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</div>

	</div>

</body>
</html>

не могу решить проблему с вложенной таблицей - она не распирает макет, а вылазит за пределы центральной колонки... конечно избавится можно от max-wodth, но хотелось бы ограничивать все-таки "тянучесть" макета.... подозреваю, что если в контенте будет картинка с шириной большей центральной колонки, то произойдет примерно тоже самое... косячно в общем как то... будут какие-нибудь мысли?

Vlad · July 21, 2011

Чего это таблица должна распирать этот родительский элемент? Установите ширину таблицы 100%, добавьте table-layout и ничего за пределы выходить не будет.

bonyany · July 21, 2011

да... хотелось бы что бы таблица распирала родительский элемент.... в принципе при 100% ширины у таблицы - вариант... но хотелось бы решить проблему без изменения ширины таблицы (новая верстка - старый контент).... так уж сделано было раньше и теперь довольно проблематично таблицы всего контента редактировать...

и кстати...

Edited July 21, 2011 by bonyany

Vlad · July 21, 2011

Установите ширину таблицы через стили, они имеют приоритет перед атрибутом width. В таком случае не придётся переделывать HTML-код.

bonyany · July 21, 2011

спасибо большое! отличный способ....

а вот на будущее... интересно... наверное нельзя с такими ограничениями (типа max-width) обеспечить "распирание" div-ового макета?

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

тут еще такой вопрос поднимается интересный... при столкновении с такими проблемами... как:

хорошая верстка должна вывозить даже криво сверстанный контент?

Vlad · July 21, 2011

Хорошая вёрстка предполагает, что вид элементов управляется через стили, чтобы не было всяких width=1000, тогда и с любыми проблемами легко бороться.

Sign In

проблема с использованием max-width

Question

bonyany

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

bonyany

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

bonyany

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information