[CSS] Drie div-elementen naast elkaar plaatsen

[Zeror]

Beste medetweakers,

Ik zie even door de bomen het bos niet meer. Ik loop er al eventjes mee te kloten nu. Tijd om maar eens wat hulp te vragen.

Ik probeer 3 divs naast elkaar te krijgen. Dit gaat goed in Firefox, maar Chrome is er blijkbaar niet mee eens. Mijn css code klopt dus ergens niet.

Dit is wat ik momenteel heb. Het is de bedoeling dat de volgorde altijd primary, secondary en dan tertiary is ongeacht wat er in de betreffende divs staat. Het gaat om widgetareas in Wordpress in dit geval.

Cascading Stylesheet:

#content-columns {
        padding-left: 640px;
        padding-right: 640px;
}

#content-columns div#primary {
        float: left;
        width: 640px;
        margin-left: -640px;
        background-color: red;
}

#content-columns div#secondary {
        float: left;
        width: 320px;
        background-color: green;
}

#content-columns div#tertiary {
        float: right;
        width: 320px;
        margin-right: -320px;
        background-color: blue;
}

Html, even versimpeld ivm wordpress code, ziet er zo uit:

HTML:

<div id="content-columns">
        <div id="primary">
                [...]
        </div>
        <div id="secondary">
                [...]
        </div>
        <div id="tertiary">
                [...]
        </div>
</div>

Hier wat screenshots:

Zoals het in Firefox eruitziet.


Zoals het in Chrome eruitziet.


Wie kan mij vertellen wat ik verkeerd doe en hoe kan ik dit verhelpen??

Laat maar.

Ik zat te kloten met een ingewikkelde constructie. De oplossing was heel simpel komt ik net achter. Heb nu alles gewoon float: left gedaan zonder moeilijke negatieve paddings enzo. Dat lijkt goed te gaan nu.
Heb

[ Voor 6% gewijzigd door Zeror op 26-05-2015 15:11 ]

[JaPPa03]

Ik begrijp überhaupt niet waarom je gebruik maakt van al die padding. Wanneer je wil dat de #content-columns in het midden kun je margin: 0 auto; gebruiken ipv je padding methode.

Cascading Stylesheet:

#content-columns {
        margin: 0 auto;
        width: 1280px;
}

#primary {
        float: left;
        width: 640px;
        /*margin-left: -640px;*/
        background-color: red;
}

#secondary {
        float: left;
        width: 320px;
        background-color: green;
}

 #tertiary {
        float: left;
        width: 320px;
      /*  margin-right: -320px;*/
        background-color: blue;
}

En wanneer je je code ook meteen wil laten schalen aan de hand van de browser grote kun je kiezen voor procenten.

Cascading Stylesheet:

#content-columns {
        margin: 0 auto;
        width: 80%;
       /*pas deze width voor de breedte marge tussen de zijkanten*/
}

#primary {
        float: left;
        width: 50%;
        background-color: red;
}

#secondary {
        float: left;
        width: 25%;
        background-color: green;
}

 #tertiary {
        float: left;
        width: 25%;
        background-color: blue;
}

[ Voor 30% gewijzigd door JaPPa03 op 26-05-2015 17:29 ]

[drogeworst]

responsive. iets makkelijkere code.

code:

<div class="width-container">
    <div class="width-33">
        <div class="spacer">
            <p></p>
        </div>
    </div>
    <div class="width-33">
        <div class="spacer">
            <p></p>
        </div>
        </div>
    <div class="width-33">
        <div class="spacer">
            <p></p>
        </div>
    </div>
</div>
<div class="clear"></div>

css:

code:

.width-container {display:flex;}
.width-33 {display:block;float:left;width:33%;}
.spacer {padding:10px;}
.clear {clear:both;}

de classes kan je aanpassen op je eigen breedte. dat is site-wide weer beter. voor de semantiek zou ik zo min mogelijk ids gebruiken trouwens

code:

.width-75 {display:block;float:left;width:75%;}
.width-50 {display:block;float:left;width:50%;}
.width-33 {display:block;float:left;width:33%;}
.width-25 {display:block;float:left;width:25%;}

[ Voor 26% gewijzigd door drogeworst op 28-05-2015 12:51 . Reden: extra aanvullingen ]