Css: div groter dan 100%.

[knackje]

Ik ben bezig met een nieuwe website en ben eerst in css bezig de structuur neer te zetten. Maar loop nu al vast.

Website is opgedeeld in 2 containers. De bovenste container heeft een vaste hoogte en breedte maat en bevat 4 kolommen die procentueel incl margin 100% hoog en breed zijn.

De news_container is 100% breed en heeft een vaste hoogte waarden. Deze bevat een andere container genaamd news_container2 met een vaste breedte waarde en de hoogte waarde 100%. Deze news_container2 bevat een kolom die 100% hoog is en een percentage breed.

Het probleem is dat deze kolom in news_container2 naar beneden gedrukt wordt door de bovenste container en de inhoud.

Ik heb in Fiddle het resultaat tot nu toe staan: https://jsfiddle.net/tdchc30L/4/

Kan iemand mij helpen en meedenken waar het fout gaat?

[Douweegbertje]

Ik snap niet zo goed wat je bedoelt, en al helemaal niet zonder identing e.d.
Het enige wat ik zo even snel kan zeggen is; waarom zoveel pos. relative? Nergens voor nodig

[knackje]

ik zal het even duidelijk maken met een screenshot... 1 moment

Zie mijn screenshot. Je kan daarop zien hoe het zwarte blokje naar beneden gedrukt wordt.


Screenhot:

[ Voor 64% gewijzigd door knackje op 09-06-2015 20:24 ]

[Patrick89]

#news_kolom_links {
height: 100%;
width: 23.5%;
margin-right: 1%;
background-color: #020202;

position: relative;

}

Als je de float left weg haalt ben je er al.

[knackje]

Klopt, maar ik wil naast deze kolom ook nog 3 andere kolommen plaatsen. Daarom heb ik daar een float left staan.

Ik snap gewoon niet de inhoud van de bovenste container hoger is dan 100% en daardoor de kolom in de andere container naar beneden drukt.

[ Voor 14% gewijzigd door knackje op 09-06-2015 20:37 ]

[endness]

Inderdaad, de float eraf en het werkt. Reden is echter dat de groene "kolom_klein_linksonder" het blokje naar beneden duwt.

Margin in procenten is altijd relatief aan de breedte. Resize je resultaat-venster in je Fiddle maar, je ziet dat de margin in de hoogte veranderd terwijl de hoogte niet veranderd.

Een mogelijke oplossing is werken met vaste maten als px of em, of als je alleen recente browser hoeft te ondersteunen eens te kijken naar viewport-units.

[knackje]

endness schreef op dinsdag 09 juni 2015 @ 20:41:
Margin in procenten is altijd relatief aan de breedte.

Bedankt voor deze tip. Dat is een vervelende eigenschap dan...

Ik wilde geen vaste maten gebruiken ivm het maken van een responsive pagina.

[endness]

Dan zul je dus naar de genoemde viewport-units moeten kijken, of naar flexbox. Daarmee zijn dit soort dingen een stuk simpeler. Nadeel is wel dat ze niet in oudere browsers worden ondersteund, maar ik weet niet in hoeverre dat nodig is natuurlijk.

[drogeworst]

werkt altijd:

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:

code:

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

Extra CSS regels, voor extra mogelijkheden:

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%;}

Let op: nooit heights definieren.

ps: niet met ID's werken. ID's zijn bedoelt voor divs die eenmalig gebruikt worden. Classes zijn vaker bruikbaar

[ Voor 6% gewijzigd door drogeworst op 11-06-2015 16:07 . Reden: ik zag de jsfiddle... ]

[endness]

Enigszins laat, maar jou voorbeeld werkt zeker niet "altijd", in IE < 10 valt dit namelijk compleet uit elkaar omdat daar flexbox niet ondersteund wordt. In sommige gevallen prima, maar wel iets om rekening mee te houden.

[n8n]

Wanneer je padding kan gebruiken ipv margin, heb je de optie om box-sizing: border-box in te zetten. Werkt vanaf IE8, en volgens mij is dat sowieso de standaard - toen afwijkende - box-sizing van oudere IE-versies.

http://caniuse.com/#feat=css3-boxsizing

[ Voor 9% gewijzigd door n8n op 21-06-2015 00:11 ]

[Spinal]

endness schreef op zaterdag 20 juni 2015 @ 17:12:
Enigszins laat, maar jou voorbeeld werkt zeker niet "altijd", in IE < 10 valt dit namelijk compleet uit elkaar omdat daar flexbox niet ondersteund wordt. In sommige gevallen prima, maar wel iets om rekening mee te houden.

Jawel hoor :), alleen met een iets andere syntax. Dat is prima met de hand te doen, of met bijvoorbeeld Autoprefixer.

[endness]

IE < 10 duidt de versies voor 10 aan, bijvoorbeeld IE9. Zoals te zien is in de table van Can I Use, wordt flexbox daar niet ondersteund.

[Spinal]

sorry, verkeerd gelezen! Het was nog vroeg op de maandagochtend zullen we maar zeggen