Divar?!?

Spixx · Post by **Spixx** » 2007-05-09 14:43:16

hejsan, jag har en enklare fråga. Jag har två divar (float brevid varandra) som jag vill att de oberoende på hur mycket text som är i dem är lika långa vad ska jag skriva då? Jag vet hur man gör med tabeller men sådant är tydligen uschligt att använda

. I vilket fall som helst någon som har en ide?

Peter Wall · Post by **Peter Wall** » 2007-05-09 16:02:23

Nästla div'arna i en annan.

Spixx · Post by **Spixx** » 2007-05-09 21:57:39

Peter Wall · Post by **Peter Wall** » 2007-05-09 23:44:56

Svårt att säga exakt hur du ska göra utan att se din sida och din kod. Men här är ett exempel.

Code: Select all

<html>
	<head>
		<style type="text/css">
			.main { border : 1pt solid black; }
			.left { float : left; width : 48%; }
			.right { float : right; width : 48%; }
			.spacer { clear : both; }
		</style>
	</head>
	<body>
		<div class=main>
  			<div class=left>LEFT CONTENT
				<br />
				<br />
				SOME CONTENT
				<br />
				<br />
				</div>
  			<div class=right>RIGHT CONTENT

				<br />
				<br />

				<br />
				<br />

				<br />
				<br />

				<br />
				<br />
				MORE CONTENT
			</div>
  		<div class=spacer></div> <!-- note no content -->
		</div>
	</body>
</html>

Hoppas detta hjälper dig.

Spixx · Post by **Spixx** » 2007-05-09 23:55:55

Code: Select all

<div id="wrapper">
   <div id="top">
   	top
   </div>
   <div id="meny">
    meny
   </div>
   <div id="main">
   	<div class="title">
   	 <h2>Lorem?!</h2>
   	</div>
   	<p>
   	 Lorem ipsum
   	</p>
   </div>
   <div id="right">
    <div class="title">
     <h2>Lorem?!</h2>
    </div>
   	<p>
   	 Lorem ipsum
   	</p>
   </div>
   <div id="footer">
    footer
   </div>
  </div>

Där är min kod, jag har min-height på allt men får en större område än min min-height bryts den. Anledningen är att #main och #right har färgade bakgrunder men #wrapper icke

Zhaozhou · Post by **Zhaozhou** » 2007-05-13 2:14:16

Om du har två divar previd varandra, precis som du säger, med "float: right" och "float: left", sedan efter dessa två divar har du en div som använder "clear: both". Borde göra susen (:

Peter Wall · Post by **Peter Wall** » 2007-05-13 19:35:20

Och det var ju inte alls det jag gav exempel på. Inte alls.

Spixx · Post by **Spixx** » 2007-05-13 19:50:59

Sådär ser det ut nu MEN det stora problemet ÄR att jag använder mig av min-height = funkar inte i alla webläsare jag undrade om det fanns något annat sätt. Och herr Peter jag vet att din kod är samma som min, jag visste det när jag postade den också. Jag vill inte ha syntax i HTML behöver css

Peter Wall · Post by **Peter Wall** » 2007-05-13 20:15:10

Var inte dig jag åsyftade utan unknowndeepness. Din kod kan jag inte säga så mycket om eftersom jag inte ser CSS'en (därav att jag skrev ut CSS'en som en tagg i HTML'n eftersom det är enklast när man diskuterar på ett forum ist för en link rel till ett dokument ingen kan se...).

Edit: Jag hade använt min (din, vems) kod, satt en background med repeat på divarna float och right för att få bakgrunden och kört en padding för att få igenom den vita kanten mellan båda. Sen hade jag lagt footern utanför den omslutande div-taggen så att den alltid hamnar underst.

Zhaozhou · Post by **Zhaozhou** » 2007-05-13 22:32:09

Peter Wall wrote:Och det var ju inte alls det jag gav exempel på. Inte alls.

Syftade inte på din kod, utan mer SpiXx^Orginalet första post.

Och jag, för att vara med i kommentarerna (no offence, Peter), jag gjort nått i denna stilen:

Code: Select all

<div style="height:150px; background-color: #FF0000;">Top</div>
<div style="height:20px; background-color: #FFFF00;">Menu</div>
<div style="height:300px; width: 80%; background-color: #FF00FF; float:left;">Lorem?!</div>
<div style="height:340px; width: 20%; background-color: #00FF00; float:right;">Info och Nyheter</div>
<div style="height:20px; background-color: #0000FF; clear:both;">Footer</div>

Inte världen snyggaste, men det visar poängen. (:
Och angående Peters ide en background med repeat, jag vet inte riktigt om det passar in (?).
I headern på float-divarna är det visserligen bra att använda. I content på "Lorem?!"-diven är det nog en background med en "background-position:bottom right", och "background-color: black". (:

[edit] Råkade få med radnummer i code-blocket. Copy/Paste direkt från vim. (: [/edit]

madr · Post by **madr** » 2007-05-14 0:58:17

Antar att du vill ha dem lika höga för att de har olika bakgrunder, och att du vill att den kortade kolumnen skall vara lika hög för att inte bryta bakgrundsuppsättningen. Eller?

Använd dig i så fall av "faux columns", falska kolumner, genom att lägga en av kolumnernas bakgrundsbeteende på wrappern:

Code: Select all

div.wrapper {
 background: #000 url('foo.png') repeat-y scroll 100% 0;
}

div.longDiv {
 background: #fff url('bar.png') repeat-y scroll 0 0;
}

div.shortDiv {
 background-color: transparent;
}