margins følger tilsynelatende uavhengige divs

CruellaDeVille · 16. februar 2008

Jeg har en markup slik:

<body>		
	<div id="sidebanner"></div>
	<div id="content">......massevis av innhold </div>

css:
#sidebanner{
float:left;
background-color:#d20700;
height:2000px;
overflow:hidden;
width:30px;
}
#content{
margin:4em 3em;
border:thin solid #ccc;
width:903px;
padding: 1em;	
}

hvor sidebanner er en rød stripe langs hele skjermens venstre side. Content på sin side skal ha en margin på 3em øverst, men da følger sidebanner også med nedover. Hva er det jeg ikke forstår?

Vedlagt dump er delt i to. Øverste del viser hva jeg får, nederste del viser hva jeg ønsker å få til. Kan noen hjelpe meg litt på vei?

C. med influensa

G2Petter · 16. februar 2008

Et godt tips er å legge * {margin: 0; padding: 0;} i toppen av CSS-en din. Da er du nødt til å sette margin og padding på alle elementer, noe som er litt ekstra jobb, men du har full kontroll. Jeg gjorde det med din kode, og det fungerte i hvert fall i Opera 9.25 og IE7

Petter

CruellaDeVille · 16. februar 2008

Hmm, ja - det så jo rett så bra ut i IE, men funkern'te i FF. Er det FF som har bugg denne gangen? Finnes det en hack? Nåværende løsning innebærer at rød kolonne til venstre er bilde - en løsning jeg definitivt mener jeg kan løse vha ren html og css (med deres hjelp, of course)

G2Petter · 16. februar 2008

Jeg satt float: left på #sidebanner, og da fungerte det i FF, Opera og IE.

Edit: jeg er ikke helt sikker på hvorfor, men problemet har vel å gjøre med at enkle elementer med float sammen med elementer det ikke er float på flyter til toppen av elementet de er inne i.

Det er sikkert noen som kan forkare dette på en bedre måte.

Endret 16. februar 2008 av G2Petter

CruellaDeVille · 16. februar 2008

Juhu!

Når begge floatet left går det som ei kule!

G2Petter · 16. februar 2008

UiB-studenter kan jobben, vet du.

Logg inn

margins følger tilsynelatende uavhengige divs

Anbefalte innlegg

CruellaDeVille

Videoannonse

G2Petter

CruellaDeVille

G2Petter

CruellaDeVille

G2Petter

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer