CSS-problem: box float

Tråden skapades och har fått 9 svar. Det senaste inlägget skrevs .
1

Sliter mitt hår med en float som inte vill fungera. Jag vill flyta boxarna som i illustrationen nedan. De läses in i koden efter siffra, d v s först box 1, sen box 2 etc.

Mina hittills fruktlösa försök har inbegripit att flota 1 till vänster och resten till höger med break på antingen 3 eller 4. Detta har fungerat, men kastat om ordningen på boxarna 2 <-> 3 och 4 <-> 5...

Detta är väl egentligen apsimpelt, men det var ett tag sedan jag pysslade med CSS nu, och det vill ##" inte fungera....

Ok, jag vill alltså att nr 1 ska floatas i vänstermarginalen, och resten i högermarginalen med radbrytning efter varannan...

  • Oregistrerad
  • 2004-09-21 14:04

Menar du så här?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>5 boxes</title>

<style type="text/css" title="text/css">
	
	div { background-color: yellow; }
	#b1 { width: 200px; }
	#b2, #b3, #b4, #b5 { display: inline; }
	#right-container { float: right; }

</style>

</head>
<body>

<div id="right-container">
	<div id="b2">This is box No. 2</div>
	<div id="b3">This is box No. 3</div><br />
	<div id="b4">This is box No. 4</div>
	<div id="b5">This is box No. 5</div>
</div>

<div id="b1">This is box No. 1</div>

</body>
</html>

Tack för svaret!

Jo, så menar jag, och det har jag också fått att funka. Det är bara det att jag skulle vilja ha det till att fungera utan containrarna, eftersom jag kör på en ganska strikt struktur, that is, <h1 /><h2 /><p /><h2 /><p /> o s v, och för att inte messa upp koden med massa onödigt som inte har annan funktion än stilmässig, skulle jag helst kunna få mina <h2> och <p> att placeras som jag ville... Box 1 ovan är min <h1>.

En vidare anledning är att jag vill kunna flytta runt på mina boxar på senare tidspunkt genom att endast ändra css:en, och då kommer containerdivvar också vara i vägen...

Och float: right har ju den otrevliga egenskapen att högerfloatarna flyter på ett sätt som ter sig ologiskt för oss som läser från vänster till höger...

Så frågan kvarstår: går det att få till det som jag vill, utan att ändra i själva strukturen...?

  • Oregistrerad
  • 2004-09-21 14:29

OK. Tror det blir svårt att göra det om man inte får gruppera box 2,3,4,5 i ett element. Man kan ju använda en p istället för en div men det ändrar ju inte på ditt problem.

Är det så här jag skall förstå din html?

<h1></h1>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

Jag tror också det blir svårt, om inte omöjligt. Jag kan inte heller positionera dem absolut heller, då jag inte på förhand känner till hur många det blir, och kanske inte alla <h2>-<p>-par skrivs ut...

I övr har du förstått min html helt rätt!

Och sitter du också i København?

  • Oregistrerad
  • 2004-09-21 15:03

Tror också det blir svårt. Men... man vet aldrig. Skall fundera lite mer...

Ja - bor och arbetar i Køpenhamn.

  • Oregistrerad
  • 2004-09-21 15:07

Kanske ett steg närmare?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>5 boxes</title>

<style type="text/css" title="text/css">
	body { text-align: right; }
	
	p
	{
		background-color: yellow;
		display: inline;
	}
	
	h1
	{
		float: left;
		margin: 0px;
	}
</style>

</head>
<body>

<h1>This is box No. 1</h1>

<p>This is box No. 2</p>
<p>This is box No. 3</p><br />
<p>This is box No. 4</p>
<p>This is box No. 5</p>

</body>
</html>

Går det att få till utan <br /> i källkoden tror du?

  • Oregistrerad
  • 2004-09-21 16:29

Du har höga krav

Det blir nog svårt. Om ett element är inline så bryter den linjen när den når sin förälders bredd. Och andra sidan är elementet block så bryter den ju både innan och efter sig själv...
(Inte van att skriva om CSS på svenska - i Danmark översätter man i regel inte dator uttryck - tex dator heter ju computer på danska, så klart med danskt uttal förstås)

Får fundera lite till...

1
Bevaka tråden