Таблици и дивове

[amgcompany]

Здравейте,

Имам един проблем с разположението на див. Ето картинка за да стане по-ясно http://prikachi.com/images/946/4436946P.jpg

Дивовете 1 и 2 са в таблица като са на една линия (<td style="vertical-align:top;">)

Дивовете 3 и 4 също са в таблица и са на една линия, предполагам сте разбрали от картинката къде искам да ми е разположен див 3. Като изключваме вариант, примерно margin-top: - 100px;

Защото височината на див 1 достига близо 350px и като е с отрицателен маргин при различна височина ще стои грозно.

Ето го и кода, който съм написал

<div id="first">
<table>
				
<tr>
	<td style="vertical-align:top;">
		<div id="div 1">
		code...
		</div>
</td>
					
<td style="vertical-align:top;">
						
	<div id="div 2">
		code...						
	</div>
</td>
					
</tr>
				
</table>

</div>

<div id="second">
<table>
					
<tr>
						
<td>
							
	<div id="div 3">
	   code...					
	</div>
	
</td>							
<td style="vertical-align:top;">

	<div id="div 4">
		code...								
	</div>
								
</td>							
</tr>					
</table>
</div>

Ако имате някакви предложения, споделете ги

 

[vardana]

Моят съвет е не използваи таблица просто в css-a напиши на div1 и div3 float:left; а на div2 и div4 напиши float:right;

 

[M1tq96]

вместо да пишеш style="vertical-align:top;" просто сложи valign='top' и може да махнеш тия дивове , ако не ти трябват..

 

[peter_ew]

Най-добрата идея е да комбинираш първия и третият див в един общ и вторият и четвъртия в общ. После им даваш

overflow: hidden;

да не се бърка бекграунда и си готов!
Успех! :?:

 

[amgcompany]

Най-добрата идея е да комбинираш първия и третият див в един общ и вторият и четвъртия в общ. После им даваш

overflow: hidden;

да не се бърка бекграунда и си готов!
Успех! :?:

Мерси +1

 

[Fakeheal]

Махни таблиците. Само главоболия създават. Това нещо го направи по следния начин:
[css].box {
background-color: gray;
}

.left {
width: 200px; /* някаква примерна ширина */
float: left;
}

.right {
width: 200px; /* някаква примерна ширина */
float: right;
}

/* най-важната част, когато говорим за float */
.clear {
clear: both;
}[/css]

<div class="left">
	<div class="box">
		SOME TEXT GOES HERE. Blah.blahb.aba.
	</div>
	
	<div class="box">
		SOME TEXT GOES HERE. Blah.blahb.aba.
	</div>
</div>

<div class="right">
	<div class="box">
		SOME TEXT GOES HERE. Blah.blahb.aba.
	</div>
	<div class="box">
		SOME TEXT GOES HERE. Blah.blahb.aba.
	</div>
</div>
<div class="clear"></div>