[CSS] Div hoogte n.a.v. content in parent div - Softwareontwikkeling

donderdag 23 februari 2006 15:02

Acties:

RupS

Topicstarter

huh?!, ja ik leg hem uit

Dit is de code:

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div#wrapper {
    position:absolute;
    top:0; left:0;
    background-color:green;
    float:left;
}

div#left, div#right {
    float:left;
    background-color:red;
    width:30px;
    bottom:0;
}
div#right {
    background-color:blue;
}
div#main {
    float:left;
    background-color:yellow;
    width:30px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="left">&nbsp;</div>
    <div id="main"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div id="right">&nbsp;</div>
</div>
</body>
</html>

*klik*

Ik wil dat de left en de right div "meerekken", zowel in IE als in FF/Moz
Ik heb voor mijn gevoel wel alles geprobeerd, dus ik dacht ik vraag het hier eens

De "left" en "right" div zijn om met een background-image een mooie zijkant te maken... maar die moet dus wel net zo ver doorlopen als dat er content is in de "main" div... Mijns inziens moet de wrapper dan "meerekken, en kun je de left en right hoogte daaraan verbinden... Ik heb alleen geen idee waarom het mij niet lukt....

donderdag 23 februari 2006 15:05

Acties:

Sappie

De Parasitaire Capaciteit!

Het gebruik van zogenaamde faux columns is eigenlijk de manier op zoiets te bewerkstelligen. Kijk daarvoor bijvoorbeeld hier: http://www.alistapart.com/articles/fauxcolumns/

Verder zou je misschien zelfs al genoeg hebben aan een background op de wrapper die je verticaal repeat (daar maak je bij faux columns ook gebruik van) en heb je de extra divs helemaal niet nodig, aangezien je zelf zegt dat de 2 div's slechts ertoe dienen om een mooie zijkant te maken.

[ Voor 12% gewijzigd door Sappie op 23-02-2006 15:06 ]

Specs | Audioscrobbler

donderdag 23 februari 2006 15:12

Acties:

JHS

Splitting the thaum.

Als #left en #right hetzelfde zijn is het misschien logischer om #main te positioneren (of centreren met behulp van margin: 0 auto; ), en de achtergrond op te hangen (vertical repeat zoals Sappie zegt) aan body

.

DM!

donderdag 23 februari 2006 15:17

Acties:

RupS

Topicstarter

Een kleine toevoeging, die ik vergeten was te melden

De breedte van de "main" div is variabel, en moet ook zo blijven. Het enige wat fixed is, is de breedte van "left" en "right"... Ik kan niet twee backgrounds aan 1 div hangen, dus volgens mij ben ik toch gebonden aan de twee extra div's?

donderdag 23 februari 2006 15:43

Acties:

JHS

Splitting the thaum.

Als je twee verschillende achtergronden hebt ben je daaraan inderdaad gebonden

. Het feit dat de breedte van de main div variabel is maakt de fauxcolumns oplossing inderdaad niet toepasbaar.

Wat misschien nog een mogelijkheid is, is twéé wrappers te maken, en daar links en rechts met y-repeat je backgrounds aan hangen? Dus eigenlijk twee maal een halve faux columns oplossing. Volgens mij is dat hier toegepast

.

DM!

donderdag 23 februari 2006 16:50

Acties:

BtM909

Watch out Guys...

Je kan nog even naar deze oplossing kijken: In search of the One True Layout

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 23 februari 2006 19:34

Acties:

RupS

Topicstarter

JHS schreef op donderdag 23 februari 2006 @ 15:43:
Als je twee verschillende achtergronden hebt ben je daaraan inderdaad gebonden . Het feit dat de breedte van de main div variabel is maakt de fauxcolumns oplossing inderdaad niet toepasbaar.

Wat misschien nog een mogelijkheid is, is twéé wrappers te maken, en daar links en rechts met y-repeat je backgrounds aan hangen? Dus eigenlijk twee maal een halve faux columns oplossing. Volgens mij is dat hier toegepast .

Yes, dat is hem!
Wat ze daar doen is inderdaad precies wat ik nodig heb... in mijn geval is het zelfs nog makkelijker, en het is erg stom dat ik daar zef niet aan heb gedacht...

Twee wrappers met margin en padding op 0, wrapper1 met een left background, en wrapper2 met een right background... je main zet je vervolgens op margin: 0 100px, oid, en je bent er