Фиксиране на div

S

southwinddd

Registered
Значи кодирам дизайна обаче когато сложа много информация в лявата кутия тя се удължава и тогава тази от дясно отива надолу. Как мога да го оправя?
 
направи го в таблица .. :) 1000 % работа.. знам че е малко стар вариянт .. но е най сигурният :)

HTML: 
<tablce cellpadding='2'>
<tr>
<td> Left Div </td><td> Right Div </td>
</tr>
</table>

:?: :?: :?:
 
Всяка колонка направи със float: left;. Мисля, че се получава ако ползваш margin-и за позиционирането. Аз заради това имах този проблем.
 
Значи най-вероятно поставяш текст (някоя твърде дълга дума), която не може да се събере в определеното и място от да кажем 50 пиксела.
Проблемът ти се получава под IE 6 предполагам, а под останалите браузъри, просто се застъпва текста. Решение на проблема е
[css]word-wrap: break-word;[/css]

Можеш да видиш ето този примерен код
http://jsfiddle.net/AeNwB/

Като виж какво се случва ако махнеш word-wrap :)
 
http://prikachi.com/images/845/4091845J.png - ето какво става

index.html
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<link type="text/css" rel="Stylesheet" href="css/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
</head>
<body>
         
     <div id="contmaintop"> </div>
	<div id="contmain">
			 <div id="header"> </div>
			 <div id="menu"></div>
	
	
			 <div id="lefttop"></div>
			 <div id="leftcont">
			 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			 </div>
	
	
			 <div id="righttop"></div>
			 <div id="rightcont">
			 Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.
			 
			 </div>
	
		  
			 <div id="reclame">
			 <div id="tekstreklama">468x60</div>
			 </div>
			 	 <div id="designcode">
			 Designed & Code SouthWinD
			 </div>
	</div>
			 <div id="contbottom">
			 </div>
	
			
</body>
</html>

style.css
[css]html, body {background: #ebeaea; width: 100%; height: 100%;}

#contmaintop {background: url(../img/contmaintop.gif) no-repeat; height: 26px; width: 810px; margin: 0 auto;}

#contmain {background: url(../img/contmain.gif) repeat-y; width: 810px; margin: 0 0 0 306px;}

#contbottom {background: url(../img/contbottom.gif) no-repeat; height: 28px; width: 810px; margin: -3px 0 0 306px; z-index: 99;}

#header {background: url(../img/header.gif) no-repeat; height: 151px; width: 760px; margin: 0 auto;}

#menu {background: url(../img/menu.gif) repeat-x; width: 750px; height: 33px; margin: 0 auto; border: 1px solid #a2a1a1; border-top: none;}

#lefttop {background: url(../img/boxtops.gif) repeat-x; width: 193px; height: 29px; border: 1px solid #a2a1a1; margin: 15px 0 0 29px;}

#leftcont {background: #eaeaea; width: 193px; border: 1px solid #bfbebe; border-top: none; margin-left: 29px;}

#righttop {background: url(../img/boxtops.gif) repeat-x; width: 546px; height: 29px; border: 1px solid #a2a1a1; margin: -32px 0 0 233px; }

#rightcont {background: #eaeaea; width: 546px; border: 1px solid #bfbebe; border-top: none; margin-left: 233px;}

#reclame {background: url(../img/reclame.gif) repeat-x; width: 468px; height: 60px; border: 1px solid #000; margin: 15px 0 0 274px;}

#tekstreklama {font-weight: bold; font-size: 36px; font: Arial; color: #898989; line-height: 60px; padding-left: 183px;}

#designcode {color: #898989; font: Verdana, Arial; font-size: 12px; font-weight: bold; margin-left: 30px; z-index: 999;}
[/css]
 
На lefttop, center и другата колонка махни margin и сложи float: left; и после след трите колонки сложи <div style="clear:both;"> </div>
 
Правиш 3 колонки - #leftcolumn, #centercolumn, #rightcolumn.
Задаваш на трите колонки настройките който искаш + float: left;. След това във всяка колонка слагаш кутииките.
 
е аз имам само 2 колонки попринцип, нужну ли е да правя и 3-та ?
П.П Ще съм ти наистина благодарен ако ти го напишеш кода защото очевидно аз не мога да те разбера или поне не мога да схвана как :)
Извинявай...
 
главен див на лява колонка - #lefthead
кутийка - #leftcont
главен див на дясна колонка - #righthead
кутиика - #rightcont

[css]#lefthead {
width..
background...
(sloji si tuka nastroikite bez margin)
margin-top: 5px;
float: left;
}

#leftcont {
nastroikite ti
}

#righthead {
width..
background...
(sloji si tuka nastroikite bez margin)
margin-top: 5px;
float: left;
}

#rightcont {
nastroikite ti
}[/css]

Сега формулираш така дивовете в html:

HTML: 
<div id="lefthead"> // glaven div na lqva kolona
     <div id="leftcont">kutiq edno </div> <br>
     <div id="leftcont">kutiqdve </div> 
</div>

<div id="righthead"> // glaven div na dqsna kolona
     <div id="rightcont">kutiq edno </div> <br>
     <div id="rightcont">kutiqdve </div> 
</div>

<div style="clear:both;"> </div>

Дано ме разбра сега. Знам, че коментарите със // са грешни, но ме домързя да ги напиша.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе