webForumDet fria alternativet

Två divar samma höjd.

4 svar · 425 visningar · startad av Gunnar_B

Gunnar_BMedlem sedan nov. 200528 inlägg
#1

Jag har fortfarande inte riktigt fattat detta...

Jag har två divar, som ska ha samma höjd bredvid varandra:

Exempel kod:

<html><head>
<style type="text/css">

* {margin:0;padding:0;} 

html,body { 
	color: #000; background-color:#fff;
	text-align:center;  
}
#container {
	width:740px; 
	margin:0 auto;  
	text-align: left; 
	border:1px solid #000;
}

#sidebar {
	border:1px solid #000;
	width:220px;
	float:left;
}

#main {
	border:1px solid #000;
	width:500px; 
	float:right;
}

</style>
</head>
<body>
<div id="container">
	<div id="sidebar"><p>sidebar</p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		Aenean tristique tortor nec neque.
	</div>
	<div id="main"><p>main</p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique
		tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et,
		orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel
		purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra
		risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat.
		Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend,
		arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat
		dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum,
		diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse
		platea dictumst.Donec diam leo, tristique ac, sodales eu, tristique varius, est. Duis egestas
		dui non ipsum facilisis commodo. Aliquam erat volutpat. Nullam pede neque, lacinia
		eu, tincidunt a, mollis malesuada, augue. Quisque ac ligula ut velit porttitor
		rhoncus. Praesent accumsan sagittis elit. Sed in arcu. Aenean vitae neque sit
		amet felis dapibus tincidunt. Quisque sodales, neque sed nonummy eleifend, leo
		est sagittis turpis, ac hendrerit pede mauris at dolor. Donec ut nisl eget dui
		interdum condimentum. Nam massa quam, porttitor eget, feugiat vel, ullamcorper
		ac, nibh. Pellentesque elit. Pellentesque consectetuer quam ut orci.
	</div>
</div>
</body>
</html>

Om den högra är längre än den vänstra ska den vänstra sträckas ut till samma höjd som den högra.

Om den vänstra är längre än den högra ska den högra sträckas ut till samma höjd som den vänstra.

Jag har en border runt båda två så jag måste få dem på samma höjd... men jag förstår inte riktigt hur det ska gå till.

NiponMedlem sedan juli 2003270 inlägg
#2

Nja..

Det går inte.. Om man inte anger en fast höjd...

Det finns en massa trix och knep för att få det att SE UT som om de vore samma höjd på dem. Men om du har "border" runtom på båda så går det helt enkelt inte.

Ett trix är att sätta en border - åt endast ett håll - på den diven som är "högst" - då ser det ut som om den kortare har samma höjd. (Använder du bakgrundsfärg ska det va samma i container och den kortaste) - fast du ville ju att höjderna skulle anpassa sig till varandra...

Ett annat är att strunta i kanter lägga en bakgrundsbild i container som är lika bred som den. Sedan färga eller "dra ett streck" eller nåt - så att kolumnerna blir avdelade visuellt.

Gunnar_BMedlem sedan nov. 200528 inlägg
#3

Aj då.. tanken var ju att jag skulle använda ena border kanten som ett streck emellan de båda. Men eftersom innehållet ändras beroende på vart man är i sidan så kan både den vänstra eller högra vara längst.

Och köra en bakgrundsbild fungerar inte heller riktigt eftersom i bland försvinner en av de där boxarna.. och då ser det ju knepigt ut :)

OkkidoMedlem sedan maj 20007 492 inlägg
#4

En wrapper-div runt om som har en bakgrundsbild som då är strecket som ska fylla ut hela?

NiponMedlem sedan juli 2003270 inlägg
#5

Japp!

Men det funkar tydligen inte för Gunnar...

Alltså en wrapper, container där man delar in sidan med färger streck eller vad man nu vill...

Eftersom jag inte har tid just nu med exempel så tar mig friheten att bifoga ett Jarvklo gjort...

http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html

:)

137 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)