[CSS] Twee kolommen: 1 fixed andere flexibele breedte* - Softwareontwikkeling

dinsdag 9 juni 2009 15:18

Acties:

0 Henk 'm!

Topicstarter

Hoe kan ik ervoor zorgen dat ik twee div-kolommen naast elkaar krijg, zodat de linker een vaste breedte krijgt (bijv. 300px) en de rechter zich aanpast aan de hoeveelheid vrije ruimte?

Het idee is dat er één soort 'container' div is, waarin twee divs komen te staan die als kolommen fungeren.
Ter toelichting heb ik er hier even een schets van staan:
Afbeeldingslocatie: http://carlobernardini.nl/csslayout.gif

Afbeeldingslocatie: http://carlobernardini.nl/csslayout.gif

Thanks!

[ Voor 18% gewijzigd door BtM909 op 09-06-2009 15:26 ]

dinsdag 9 juni 2009 15:31

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Toch maar even een nieuw topic aangemaakt

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.

dinsdag 9 juni 2009 15:33

Acties:

0 Henk 'm!

VR46

Topicstarter

BtM909 schreef op dinsdag 09 juni 2009 @ 15:31:
Toch maar even een nieuw topic aangemaakt

Dank je, ook goed

dinsdag 9 juni 2009 15:48

Acties:

0 Henk 'm!

pauldegroot

silent sounds

Gewoon een container maken van 100% width met vervolgens twee divjes erin waarvan je eerste 300px width heeft met float:left en je tweede 100% width heeft en ook float:left.

HTML:

<div id="maincontainer"> 
    <div id="linkerveld"></div> 
    <div id="rechterveld"></div>
</div

Cascading Stylesheet:

#maincontainer {
    width: 100%;
}
#linkerveld {
    width: 300px;
    float: left;
}
#rechterveld {
    width: 100%;
    float: left;
}

[ Voor 29% gewijzigd door pauldegroot op 09-06-2009 15:54 ]

woensdag 10 juni 2009 07:33

Acties:

0 Henk 'm!

Boelie-Boelie

@pauldegroot: heb je jouw advies zelf geprobeerd? Een div heeft van zichzelf al een width van 100%. Verder: 300 px + 100% = overschrijding schermbreedte.

Een mogelijke oplossing voor het TS-probleem is een linksfloatende kolom van 300px en een tweede kolom met een linkermarge van 310px.

Cogito ergo dubito

woensdag 10 juni 2009 10:05

Acties:

0 Henk 'm!

Face_-_LeSS

Zelf heb ik dit ook ooit nodig gehad en heb het als volgt gedaan:

Cascading Stylesheet:

        html, body
        {
            margin: 0;
            padding: 0;
        }
        #fixed
        {
            float: left;
            width: 300px;
            margin-left: -100%;
            border: solid 1px blue;
        }
        #fill-outer
        {
            float: left;
            width: 100%;
        }
        #fill
        {
            margin-left: 303px;
            border: solid 1px blue;
        }
        .clear-left
        {
            clear: left;
        }

HTML:

<body>
    <div id="main">
        <div id="fill-outer">
            <div id="fill">
                Rest
            </div>
        </div>
        <div id="fixed">
            Links
        </div>
        <div class="clear-left">
        </div>
    </div>
</body>

Op deze manier werkt het bij mij goed!

woensdag 10 juni 2009 11:25

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Nog een manier:

HTML:

<div id="root">
    <div id="left">
        <h2>Links</h2>
    </div>
    <div id="right">
        <h2>Rechts</h2>
    </div>
</div>

Cascading Stylesheet:

h2 {
    margin:0;
}

#root {
    padding:20px;
    border:1px solid #000;
}

    #left {
        float:left;
        width:300px;
        border:1px solid #000;
    }
    
    #right {
        padding:0 0 0 320px;
        border:1px solid #000;
    }

Live preview: Kolommen

woensdag 10 juni 2009 12:00

Acties:

0 Henk 'm!

Face_-_LeSS

Good Fella schreef op woensdag 10 juni 2009 @ 11:25:
Nog een manier:
Code....
Live preview: Kolommen

Alleen is het nadeel aan jouw manier dat wanneer er in het rechter deel een element zit met "width:100%" dat element in IE6 onder het linker deel wordt geplaatst. Een groot nadeel vind ik.

Daarom heb ik ook even moeten zoeken naar mijn oplossing welke vooralsnog goed werkt in IE6, IE7, FF (meer niet getest).

woensdag 10 juni 2009 17:19

Acties:

0 Henk 'm!

Rvanlaak

Modbreak:Maak een eigen topic aan en kaart niet je eigen probleem in andersmans topic

[ Voor 88% gewijzigd door BtM909 op 10-06-2009 20:41 ]

woensdag 10 juni 2009 19:46

Acties:

0 Henk 'm!

tonyisgaaf

-snip-
Ten eerste probeer je dit topic te kapen met een totaal ander probleem.
Ten tweede zou ik eens zoeken op "faux columns"

[ Voor 72% gewijzigd door BtM909 op 10-06-2009 20:41 ]

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

vrijdag 12 juni 2009 16:41

Acties:

0 Henk 'm!

NielsNL

DigiCow

Op dit soort momenten vraag ik me wel eens af waarom het verboden is om layout met tabellen te maken.
* NielsNL rent!

M'n Oma is een site aan het haken.

vrijdag 12 juni 2009 16:44

Acties:

0 Henk 'm!

Bosmonster

*zucht*

NielsNL schreef op vrijdag 12 juni 2009 @ 16:41:
Op dit soort momenten vraag ik me wel eens af waarom het verboden is om layout met tabellen te maken.
* NielsNL rent!

Je hoeft niet te rennen hoor:

se-man-tiek

plus het is nergens voor nodig als je weet waar je mee bezig bent

vrijdag 12 juni 2009 16:50

Acties:

0 Henk 'm!

NielsNL

DigiCow

Maar af en toe zou het met een tabel best makkelijker kunnen. Dingen als "faux columns" zijn niet voor niks uitgevonden. Of een javascriptje om 2 div'jes even hoog te maken.

M'n Oma is een site aan het haken.

vrijdag 12 juni 2009 16:56

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Face_-_LeSS schreef op woensdag 10 juni 2009 @ 12:00:
[...]

Alleen is het nadeel aan jouw manier dat wanneer er in het rechter deel een element zit met "width:100%" dat element in IE6 onder het linker deel wordt geplaatst. Een groot nadeel vind ik.

Daarom heb ik ook even moeten zoeken naar mijn oplossing welke vooralsnog goed werkt in IE6, IE7, FF (meer niet getest).

Dat gebruik ik bijna nooit, al snap ik wel dat dat in dit geval een voordeel kan zijn, maar block-levelelemeneten worden toch even breed als de rechter div toestaat

zondag 14 juni 2009 20:35

Acties:

0 Henk 'm!

Face_-_LeSS

Good Fella schreef op vrijdag 12 juni 2009 @ 16:56:
[...]

Dat gebruik ik bijna nooit, al snap ik wel dat dat in dit geval een voordeel kan zijn, maar block-levelelemeneten worden toch even breed als de rechter div toestaat

Klopt, ik liep er ook pas tegen aan toen ik een table-element over de volledige breedte van het rechter deel wilde hebben (waarvan ik mezelf voor kan stellen dat ook anderen dat willen). Het heeft ook even geduurd tot ik achter de oplossing was dus misschien help ik hier ook anderen hier mee.