[CSS]Kolom 1 mee laten rekken met kolom 2

[Avalaxy]

Ik heb een probleempje, ik heb namelijk een groot content-vlak met aan de zijkanten 2 randen. Nu wil ik dat die randen mee rekken met het content-vlak.

HTML:

<div id="main">
   <div id="leftedge">
      <div id="leftedgebottom">
      </div>
   </div>
   <div id="center">
   </div>
</div>

Cascading Stylesheet:

html {
height: 100%;
}

body {
height: 100%;
margin: 0px;
padding: 0px;
background-image: url('../../images/front/layout/bgstripe.png');
background-repeat: repeat-x;
background-position: 0px 116px;
}

#main {
width: 1067px;
height: 100%;
margin: 0px auto;
padding: 0px;
}

#leftedge {
width: 20px;
height: 100%;
margin: 0px auto;
position: relative;
float: left;
}

#leftedgebottom {
width: 20px;
min-height: 100%;
background-image: url('../../images/front/layout/leftstripe.png');
background-repeat: repeat-y;
position: absolute;
}

#center {
width: 1027px;
height: 100%;
background-color: #eaeaea;
float: left;
}

Ik heb alleen het belangrijkste gepost.

Hoe los ik dit op? Ik kom er maar niet uit

[H004]

http://www.alistapart.com/articles/fauxcolumns/

[Avalaxy]

Die site heb ik net al bekeken, maar ik zie er niets staan dat mij gaat helpen.

[brtk]

Dan heb je denk ik niet goed gekeken, of het niet goed begrepen want Faux Columns is wel een mogelijke oplossing.

[Avalaxy]

Misschien heb ik het inderdaad niet goed begrepen, want

Cascading Stylesheet:

#leftedgebottom {
width: 20px;
min-height: 100%;
background-image: url('../../images/front/layout/leftstripe.png') repeat-y 50% 0;
}

Werkt niet.

[lordsnow]

Kan je alles niet in een "outer" DIV zetten, met een bepaalde hoogte. En dan alle "binnen" DIV's op height: 100% zetten? Ik weet niet of zoiets toepasbaar is icm je layout?

//Edit:
Zoiets doe je dus al...
Als je voor je MAIN "height: 1000px;" of zo gebruikt, gebeurd er dan wat?

[ Voor 42% gewijzigd door lordsnow op 18-02-2010 15:39 ]

[H004]

Avalaxy schreef op donderdag 18 februari 2010 @ 15:08:
Misschien heb ik het inderdaad niet goed begrepen

Blijkbaar Lees de site nog maar eens goed door...

quote: alistapart

The same idea applies: tile the background image, then float a column in position to overlay the faux-column backdrop behind.

Hint: zet een achtergrond op div#main

[ Voor 22% gewijzigd door H004 op 18-02-2010 17:34 ]

[Aganim]

Een alternatief is deze: http://matthewjamestaylor...ross-browser-css-no-hacks.

[H004]

Aganim schreef op donderdag 18 februari 2010 @ 17:37:
Een alternatief is deze: http://matthewjamestaylor...ross-browser-css-no-hacks.

Dat is toch wel behoorlijk wat meer opmaak en onnodige containers dan faux columns, en zou ik alleen maar adviseren als de breedte van de content variabel is, wat in dit geval niet zo is.

[Avalaxy]

Hmmm, ik heb nog een hoop onderzoek gedaan naar die faux columns, maar het lukt me niet om mijn probleem op die wijze te fixen.

Het ziet er nu zo uit aan de onderkant:



Hiervoor heb ik de volgende code gebruikt (versimpeld):

HTML:

        <div id="main">
            <div id="leftedge">
                <div id="leftedgetop">
                </div>
            </div>
            <div id="center">
                <div id="header">
                <!-- header hier -->
                </div>
                <div id="content">
                <!-- content vakken hier -->
                </div>
                <div id="footer">
                </div>
            </div>
            <div id="rightedge">
                <div id="rightedgetop">
                </div>
            </div>
        </div>

De vlakken met content die in de 'content' div staan zijn op deze manier opgebouwd:

HTML:

    <div id="popular">
        <div id="populartop"></div>
        <div id="popularmiddle">
            <?php include "popularcontent.php"; ?>
        </div>
        <div id="popularbottom"></div>
    </div>

CSS voor het geheel:

Cascading Stylesheet:

/* main element, containing all other elements */
#main {
width: 1067px;
height: 100%;
margin: 0px auto;
background-image: url('../../images/front/layout/mainstripe.png');
background-repeat: repeat-y;
}

/* left edge of the screen */
#leftedge {
width: 20px;
margin: 0px auto;
float: left;
}

/* middle element, containing the header, menu, content, footer, etc. */
#center {
width: 1027px;
height: 100%;
float: left;
}

/* right edge of the screen */
#rightedge {
width: 20px;
margin: 0px auto;
float: left;
}

#content {
width: 1027px;
min-height: 500px;
}

#footer {
width: 1027px;
height: 100px;
background-color: #eaeaea;
}

En voor de content vlakken:

Cascading Stylesheet:

#popular {
height: 100%;
margin: 20px 10px 20px 5px;
}

#populartop {
width: 225px;
height: 25px;
background-image: url('../../images/front/layout/popular.png');
vertical-align: top;
}

#popularmiddle {
width: 225px;
min-height: 200px;
padding: 10px;
background-image: url('../../images/front/layout/subcontentstripe.png');
background-repeat: repeat-y;
}

#popularbottom {
width: 225px;
height: 1px;
background-image: url('../../images/front/layout/subcontentbottomstripe.png');
vertical-align: bottom;
}

Kan iemand please helpen met het fixen van die zijkanten en de achtergrond?

Ik vermoed dat het iets te maken heeft met die height=100% aangezien die zijkanten precies tot de onderkant van m'n scherm komen, maar door de uitgerekte content in het midden is m'n footer dus omlaag gegaan waardoor de lengte van die zijkanten niet meer klopt.

[Avalaxy]

Subtiel bumpje

[frickY]

Een height: 100% voorkomt in Webkit en Mozzila inderdaad dat het blok nog hoger wordt. Gebruik daarom min-height ipv height.
Internet Explorer 6 kent min-height niet, waarvoor je deze weer los zou moeten toepassen.

[mcDavid]

Ik zie een hoop keren float:left, maar nergens overflow:hidden of clear:both. Ofwel je container heeft geen hoogte omdat alles gefloat staat.

Behalve dan die height:100% wat zoals hierboven gezegd idd de viewport-hoogte is, en niet meer dan dat.

[ Voor 27% gewijzigd door mcDavid op 25-02-2010 19:12 ]

[Avalaxy]

frickY schreef op donderdag 25 februari 2010 @ 18:24:
Een height: 100% voorkomt in Webkit en Mozzila inderdaad dat het blok nog hoger wordt. Gebruik daarom min-height ipv height.
Internet Explorer 6 kent min-height niet, waarvoor je deze weer los zou moeten toepassen.

Okee, ik heb nu overal min-height van gemaakt. IE fix ik later wel.

Alleen is er qua opbouw niks veranderd aan de layout, dus dit is nog niet de volledige oplossing.

mcDavid schreef op donderdag 25 februari 2010 @ 19:11:
Ik zie een hoop keren float:left, maar nergens overflow:hidden of clear:both. Ofwel je container heeft geen hoogte omdat alles gefloat staat.

Behalve dan die height:100% wat zoals hierboven gezegd idd de viewport-hoogte is, en niet meer dan dat.

Als ik header, content en footer allemaal een clear: both geef gebeurt er wederom niets.

[ Voor 16% gewijzigd door Avalaxy op 25-02-2010 19:27 ]

[Asator]

Heb je al geprobeerd te kijken waar het probleem zit door middel van Firebug in Firefox of vergelijkbaar programma voor andere browsers.

Nou ben je zomaar wat aan het doen door overal een clear: both bij te zetten.

Maar je #main heeft geen float en de div's die daar binnen zitten wel, daardoor rekt je #main niet mee met de inhoud. Je kan je footer nou wel clear:both meegeven maar #rightedge is groter dan #center zover ik kan zien, doordat #footer in #center staat rekt #main maar tot het einde van #center.

Je kan het beste #footer uit #center halen, of een nieuwe div maken, en onder #rightedge plaatsen met een clear:both, dan staat hij dus in #main en rekt de main div uit tot het einde van de grootste kolom.

Ik ben niet zo goed in dingen uitleggen dus ik hoop dat je hier iets aan hebt

Je krijgt dan zoiets:

HTML:

        <div id="main">
            <div id="leftedge">
                <div id="leftedgetop">
                </div>
            </div>
            <div id="center">
                <div id="header">
                <!-- header hier -->
                </div>
                <div id="content">
                <!-- content vakken hier -->
                </div>
            </div>
            <div id="rightedge">
                <div id="rightedgetop">
                </div>
            </div>
            <!-- footer met clear:both zorgt dat #main meerekt met zijn content -->
            <div id="footer">
            </div>
        </div>

[ Voor 30% gewijzigd door Asator op 25-02-2010 20:28 ]

[soulrider]

is het ook niet mogelijk om

code:

div header
/div

 div container
  div left
  /div
  div center
   div content
   /div
  /div
  div right
  /div
 /div // container
div footer
/div

te gebruiken?
met dan in je header een afbeelding die breed genoeg is, center wordt weergegeven en waarvan de zijkanten wegvallen (ipv een scroll balk geven)

en dan header, container en footer met width=100% ?

[ Voor 6% gewijzigd door soulrider op 25-02-2010 20:39 ]

[Bozozo]

Aganim schreef op donderdag 18 februari 2010 @ 17:37:
Een alternatief is deze: http://matthewjamestaylor...ross-browser-css-no-hacks.

Tof, ik wist niet dat de heilige graal inmiddels was gevonden

edit: is het ook al iemand gelukt om de holy grail te combineren met 100% height?

[ Voor 12% gewijzigd door Bozozo op 25-02-2010 22:28 ]

[Avalaxy]

Asator schreef op donderdag 25 februari 2010 @ 20:25:
Heb je al geprobeerd te kijken waar het probleem zit door middel van Firebug in Firefox of vergelijkbaar programma voor andere browsers.

Nou ben je zomaar wat aan het doen door overal een clear: both bij te zetten.

Maar je #main heeft geen float en de div's die daar binnen zitten wel, daardoor rekt je #main niet mee met de inhoud. Je kan je footer nou wel clear:both meegeven maar #rightedge is groter dan #center zover ik kan zien, doordat #footer in #center staat rekt #main maar tot het einde van #center.

Je kan het beste #footer uit #center halen, of een nieuwe div maken, en onder #rightedge plaatsen met een clear:both, dan staat hij dus in #main en rekt de main div uit tot het einde van de grootste kolom.

Ik ben niet zo goed in dingen uitleggen dus ik hoop dat je hier iets aan hebt

Je krijgt dan zoiets:

HTML:

        <div id="main">
            <div id="leftedge">
                <div id="leftedgetop">
                </div>
            </div>
            <div id="center">
                <div id="header">
                <!-- header hier -->
                </div>
                <div id="content">
                <!-- content vakken hier -->
                </div>
            </div>
            <div id="rightedge">
                <div id="rightedgetop">
                </div>
            </div>
            <!-- footer met clear:both zorgt dat #main meerekt met zijn content -->
            <div id="footer">
            </div>
        </div>

Je bent een superheld
Footer gewoon buiten de center plaatsen deed het hem

Iedereen heel erg bedankt voor de hulp