[CSS] div stretchen tot de rand

[Carharttguy]

Dag iedereen

Ik zit eigenlijk met een simpele situatie, zie deze jsfiddle: http://jsfiddle.net/jg64xq98/1/

Wat ik zou willen, is dat de titelbalk helemaal naar rechts stretcht tot de kant. En dat de content zowel naar rechts als naar onder stretcht. (Of dus eigenlijk gewoon de div 'rechts' naar rechts en naar onder)

Ik heb geprobeerd met de width en de height gewoon zo hoog mogelijk te zetten, maar dan schuift de hele div onder de linkse div.

Ik probeerde dan de width op 100% - 200px (fixed size van de linkse div) te zetten, maar dat lukt niet.

Hoe los ik zo'n probleem op? Ik wil ook niet de position op absolute zetten, want dat gaat denk ik probleem opleveren bij het scrollen dan?

Hartelijk dank voor het meedenken.

[Mitchell-CWD]

Ik keek even maar snap niet helemaal wat je bedoeld? Je beschrijft een situatie, maar dat is nu toch al zo? de div rechts staat rechts en de content staat rechtsonder?

[Carharttguy]

Ja, maar hij stretcht niet tot de rand van de pagina. De div's hebben nu een bepaalde grootte door de tekst die erin staat. Maar ik wil dat ze altijd tot de zijkanten lopen.

[Mitchell-CWD]

Ah zo.

#links
{
float: left;
width: 18%;
}

#rechts
{
float: left;
margin-left: 5px;
width: 80%;
background-color: red;
}

(heb 18 en 80% ff voor het gemak gedaan, bij 20 en 100 verspringt hij, komt door die margin)

[ Voor 3% gewijzigd door Mitchell-CWD op 16-01-2015 23:20 ]

[NNF]

Je kunt calc() gebruiken:

http://jsfiddle.net/jg64xq98/11/

[NMe]

Waarom zet je niet in plaats van de twee kolommen in één div te zetten, elk van de rijen in een div? Je kan dan een div om #logo en #titelbalk heen maken. Die nieuwe div kan dan 100% breed zijn. #logo krijgt een vaste breedte. Vervolgens heb je de rest van de ruimte over om te doen met #titelbalk wat je wil. Afhankelijk van hoe je wil stylen kun je misschien zelfs de background op de parent kwijt. En als het niet anders kan: position: relative op de parent, position: absolute op #logo (top: 0, left: 0) en vervolgens een margin-left/padding-left op #titelbalk die even breed is als #logo.

@Mitchell-CWD: ik wil niet zo ver gaan om te zeggen dat floats evil zijn maar ik zou ze hier zeker niet gebruiken. Als je eenmaal begint te floaten raakt het einde al snel zoek.

Carharttguy schreef op vrijdag 16 januari 2015 @ 21:34:
Hoe los ik zo'n probleem op? Ik wil ook niet de position op absolute zetten, want dat gaat denk ik probleem opleveren bij het scrollen dan?

Je haalt absolute en fixed door elkaar.

[ Voor 30% gewijzigd door NMe op 17-01-2015 00:39 ]

[Caelorum]

NMe schreef op zaterdag 17 januari 2015 @ 00:37:
[...] @Mitchell-CWD: ik wil niet zo ver gaan om te zeggen dat floats evil zijn maar ik zou ze hier zeker niet gebruiken. Als je eenmaal begint te floaten raakt het einde al snel zoek.[...]

Vooral niet als je hetzelfde effect kan krijgen door die float:left te vervangen door display: inline-block.
Moet je alleen even de whitespace en line-ends tussen de divjes weghalen.

[Sthomkop]

Caelorum schreef op zaterdag 17 januari 2015 @ 09:54:
Moet je alleen even de whitespace en line-ends tussen de divjes weghalen.

Of de font-size van de parent op 0 zetten. Of HTML commentaar gebruiken. Of... of... Maar inderdaad, inline-block zou ook een goede oplossing zijn ja.

[NMe]

Caelorum schreef op zaterdag 17 januari 2015 @ 09:54:
[...]

Vooral niet als je hetzelfde effect kan krijgen door die float:left te vervangen door display: inline-block.
Moet je alleen even de whitespace en line-ends tussen de divjes weghalen.

Inline-block vind ik nog steeds ondergeschikt aan wat ik in mijn vorige post zei. Daarnaast geeft het volgens mij hetzelfde probleem dat de TS al had.

[Caelorum]

NMe schreef op zaterdag 17 januari 2015 @ 15:01:
[...] Inline-block vind ik nog steeds ondergeschikt aan wat ik in mijn vorige post zei.[...]

Dat bedoelde ik uiteraard ook ^^ maar wilde alleen aangeven dat het probleem ook nog wel op te lossen is met inline-block, als je floats niet wilt gebruiken en je geen zin hebt je html te verbouwen.

Cascading Stylesheet:

#links
{
    display:inline-block;
    width: 200px;
}

#rechts
{
    display:inline-block;
    width: calc(100% - 200px);
}

Of links op 20% zetten en rechts op 80%, maar dat vereist wel dat je alle whitespace tussen je twee divs weghaalt (op een manier). @NMe, dit lost volgens mij wel zijn probleem op, maar heeft ook niet echt de voorkeur IMO. Daarnaast zit je nu wel alleen met IE8 en lager die dit niet leuk vinden.

[ Voor 10% gewijzigd door Caelorum op 17-01-2015 15:13 ]

[Carharttguy]

Dank je wel iedereen voor de hulp. Maar waarom wordt inline-block geprefereerd boven float?

Die calc() functie deed het hem. Maar die lijkt alleen te werken met width en niet met height, hoe komt dat?
Ziehier de geupdate fiddle met height voor links en rechts ingesteld op 100% en voor navigatie en content is de height dan calc(100% - 164px). Maar dat doet niets.

[NMe]

Carharttguy schreef op zaterdag 17 januari 2015 @ 16:03:
Dank je wel iedereen voor de hulp. Maar waarom wordt inline-block geprefereerd boven float?

NMe schreef op zaterdag 17 januari 2015 @ 00:37:
Als je eenmaal begint te floaten raakt het einde al snel zoek.

Die calc() functie deed het hem. Maar die lijkt alleen te werken met width en niet met height, hoe komt dat?
Ziehier de geupdate fiddle met height voor links en rechts ingesteld op 100% en voor navigatie en content is de height dan calc(100% - 164px). Maar dat doet niets.

Waarom probeer je mijn suggestie dan niet? Heb je dat hele probleem niet.

Waarom height 100% niet werkt zie je meteen als je het element even inspect in je browser. Geef een willekeurig element maar eens een height van 100% en zie wat voor hoogte hij krijgt toegekend.

[Mitchell-CWD]

Voor een simpel websitetje zou je gewoon float kunnen gebruiken. Maar het is inderdaad waar dat inline-block de mooiste oplossing is. Vooral als je later nog wat dingen aanpast, het is wat onderhoudsvriendelijker.

Een height 100% bestaat niet zoals je dat met een width hebt. In principe heb je een oneindige height. Wat je zou kunnen doen is een div maken om alles heen en die een bepaalde height meegeven (bv 1000px), dan kun je wel met heights werken in de 4 blokken.

[Guillome]

Mitchell-CWD schreef op vrijdag 16 januari 2015 @ 23:19:
Ah zo.

#links
{
float: left;
width: 18%;
}

#rechts
{
float: left;
margin-left: 5px;
width: 80%;
background-color: red;
}

(heb 18 en 80% ff voor het gemak gedaan, bij 20 en 100 verspringt hij, komt door die margin)

Als je je widths in percentages doet, moet je je margin ook in percentage doen met deze oplossing.
Anders verspringt hij alsnog als je scherm te klein wordt

[NMe]

Mitchell-CWD schreef op zaterdag 17 januari 2015 @ 18:27:
Voor een simpel websitetje zou je gewoon float kunnen gebruiken. Maar het is inderdaad waar dat inline-block de mooiste oplossing is. Vooral als je later nog wat dingen aanpast, het is wat onderhoudsvriendelijker.

Zowel floats als inline-blocks zijn overkill voor dit simpele probleem.

[Carharttguy]

NMe schreef op zaterdag 17 januari 2015 @ 17:25:
[...]


[...]


[...]

Waarom probeer je mijn suggestie dan niet? Heb je dat hele probleem niet.

Waarom height 100% niet werkt zie je meteen als je het element even inspect in je browser. Geef een willekeurig element maar eens een height van 100% en zie wat voor hoogte hij krijgt toegekend.

Je hebt gelijk dat jouw suggestie beter werkt op mijn simpele case.

Echter blijft mijn #titelbalk onder mijn #logo staan, hoe zet ik die daar dan naast zonder te floaten?
Hetzelfde probleem bij mijn #content en #navigatie. #content staat onder #navigatie. In plaats van ernaast.
Ziehier: http://jsfiddle.net/onc8ucev/
En wat is dan dé manier om links een zijbalk te hebben die over heel te pagina loopt? Zoals de tracker op T.net aan de linkerkant?

[ Voor 7% gewijzigd door Carharttguy op 20-01-2015 14:32 ]

[NMe]

Carharttguy schreef op dinsdag 20 januari 2015 @ 14:29:
[...]

Je hebt gelijk dat jouw suggestie beter werkt op mijn simpele case.

Echter blijft mijn #titelbalk onder mijn #logo staan, hoe zet ik die daar dan naast zonder te floaten?
Hetzelfde probleem bij mijn #content en #navigatie. #content staat onder #navigatie. In plaats van ernaast.
Ziehier: http://jsfiddle.net/onc8ucev/

Position: relative op #logotitel. Position: absolute op #logo. #titel hernoemen naar #titelbalk in je CSS en padding-left met 200 pixels (de breedte van je logo) verbreden. Dat zei ik in NMe in "[CSS] div stretchen tot de rand" ook al trouwens.

[Carharttguy]

NMe schreef op dinsdag 20 januari 2015 @ 14:39:
[...]

Position: relative op #logotitel. Position: absolute op #logo. #titel hernoemen naar #titelbalk in je CSS en padding-left met 200 pixels (de breedte van je logo) verbreden. Dat zei ik in NMe in "[CSS] div stretchen tot de rand" ook al trouwens.

U hebt gelijk. Dank u, het is gelukt.