Fluid/liquid CSS. 3 divs ved siden af hinanden

Tags:    fluid css

Hey guys n' girls

Jeg sidder og er ved at lave mit første flydende layout og er røget i et lille problem.

Jeg har følgende:

HTML:
<div id="wrapper">
<div id="venstre"></div>
<div id="midt"></div>
<div id="hoejre"></div>
</div>

CSS:
#wrapper {
width:100%;
height:50px;
}

#venstre {
width:3px;
height:50px;
float:left;
}

#midt {
width:auto;
height:50px
margin:0px 3px;
float:left;
}

#hoejre {
width:3px;
height:50px;
float:left;
}

#venstre og #højre har en fast brede på 3px og #midt skal fylde resten ud. Men jeg kan ikke få det til at fungere ordentligt.

Enten fylder #midt ingenting, ellers fylder den det hele.

Håber i kan hjælpe? :)

MVH Jonas





5 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 11 karma
Sorter efter stemmer Sorter efter dato
@Carsten, Hvis du floater en div, så får den ikke automatisk 100%'s bredde som divs ellers har uden defineret width (grundet display: block; og width: auto; som default). Når du floater din div, så får den den bredde, som dens indhold har - med mindre du definerer en bredde. Håber du kan følge mig.

@Jonas width:auto på din #midt betyder, på grund af det jeg forklarede Carsten oven for, at den ikke fylder noget hvis der ikke er noget indhold. Hvis du sætter width: 100%; så fylder den det hele - det samme hvis du ikke floater den.

En alternativ måde at løse det på er ved at ændre din struktur til:
Fold kodeboks ind/udHTML kode 


Fold kodeboks ind/udCSS kode 


Det burde løse dit problem. Vi placerer #venstre og #hoejre hhv -3px til venstre eller til højre for #midt, som har margin 3px på begge sider. Ved at have dem inden i #midt, kan vi placere dem i forhold til #midt ved at bruge position: absolute; når position: relative; er sat på #midt.

Der har du den praktiske måde at løse problemet på - men hvorfor du gør det på den her måde er mig en gåde. Hvorfor ikke bruge enten pseudo-elements eller bare en border?

Du kan ikke have noget vigtigt indhold som kræver 3 pixels bredde. Og hvis det er billeder du vil have sat på hver side kan du bruge pseudo elements, som kan placeres med samme teknik som jeg bruger i mit eksempel oven for - eller hvis det bare er en farvet kant du vil have, så er det bedre at løse det med border-left og border-right...

Generelt skal man holde sig fra at tilføje unødvendige elementer til sin html - så hvis der ikke er indhold i elementet, så bør det ikke være der. Det er derfor jeg stiller spørgsmålet, om de alternative løsninger.



prøv højre float.right



det hjalp med float:right; hvis jeg flyttet #hoejre over #midt:

<div id="wrapper">
<div id="venstre"></div>
<div id="hoejre"></div>
<div id="midt"></div>
</div>

Tak for det :) Ved ikke hvorfor jeg ikke havde prøvet det før..



Når du har 3 kolonner og du skriver dem i kronologisk rækkefølge i din html, så er den letteste løsning at du giver dine 3 kolonner "float:left".

edit: Min pointe var at du bliver nødt til at have en fast bredde på alle dine kolonner hvis du vil gøre det på den måde.



Indlæg senest redigeret d. 10.03.2012 11:00 af Bruger #8782
Jonas,
Jeg ved ikke om det er den 'rigtige' måde med float.right, men det var sådan jeg fik 'mit' til at virke.
Det var iøvrigt forvirrende at opdage, at div.bredde skal sættes før div'en i et hele taget bliver synlig. På et tidspunkt satte jeg en test-baggrunds-farve på mine divs for at få .. syn for sagen.



t