Div width 100% in div width 100%

[chanckjh]

zoals in de titel al staat.
ik wil een div in een div zetten.
beide div's hebben width: 100%
de binnenste div heeft margin: 15px.
de binnenste div gaat dan over de buitenste div.
ik hoop dat je het een beetje snapt.

<div id="A">
<div id="B"> </div>
</div>

div#A{
width: 100%;
float: left;
position: relative;
margin: 0;
padding: 0;
}

div#B{
width: 100%;
float: left;
position: relative;
margin: 15px;
padding: 0;
}

 

[RMS123]

dat heb ik zelf jaren gelden volgens mij ooit gedaan door eerst de scherm-breedte achterhalen, alleen dat bugte als je het scherm een andere grootte maakt.
Dat heb ik toen opgelost door het naar een table te veranderen, maar dat is hier zeker geen optie?

 

[csshunter]

Hoi chanckjh,
Ik zie bij je beschrijving geen vraag staan.
Wat is het probleem?

Met vriendelijke groet,
CSShunter

 

[chanckjh]

Hoi chanckjh,
Ik zie bij je beschrijving geen vraag staan.
Wat is het probleem?

Met vriendelijke groet,
CSShunter

het probleem is, dat de binnenste div niet in het buitenste div blijft doordat beide div's width:100% is. Ik wil dat de div's flexibel blijft zodat als anderen een andere schermgrootte heeft dat het dan nog wel op één scherm blijft.
Bij een andere pagina lukt het wel, maar dat komt omdat er tekst in staat waardoor het, het hele div gebruikt.

 

[chanckjh]

dat heb ik zelf jaren gelden volgens mij ooit gedaan door eerst de scherm-breedte achterhalen, alleen dat bugte als je het scherm een andere grootte maakt.
Dat heb ik toen opgelost door het naar een table te veranderen, maar dat is hier zeker geen optie?

Je begrijpt me helemaal!
hoe heb je het eigenlijk dan gedaan met een table?

 

[csshunter]

Ik wil dat de div's flexibel blijven, zodat als anderen een andere schermgrootte hebben, dat het dan nog wel op één scherm blijft.

Aha.
Je hebt dus: div-in-div-ori.htm, en je wilt: div-in-div-new.htm?

Dan kan de {float:left;} en de {width: 100%;} van de binnenste <div> er gewoon uit: een div heeft een block-karakter, en vult altijd de beschikbare breedte op (min de opgegeven margin) als het geen drijvend element is. En de {position:relative;} kan ook gemist worden.
Geen table.

Met vriendelijke groet,
CSShunter

 

[chanckjh]

Aha.
Je hebt dus: div-in-div-ori.htm, en je wilt: div-in-div-new.htm?

Dan kan de {float:left;} en de {width: 100%;} van de binnenste <div> er gewoon uit: een div heeft een block-karakter, en vult altijd de beschikbare breedte op (min de opgegeven margin) als het geen drijvend element is. En de {position:relative;} kan ook gemist worden.
Geen table.

Met vriendelijke groet,
CSShunter

oh wat stom van me!! Echt heel erg bedankt!!! je bent geweldig
ik ben nu ook nog met iets anders bezig. Beetje het zelfde probleem.
Er zijn nu 3 div's.
buitenste en 2 binnen.
in het buitenste staan 2 div's naast elkaar.
de linke div zit vol met tekst en de rechte is een plaatje.
de linke div is flexibel en de rechte heeft vaste maten.

de rechte heb ik in een div gedaan omdat het een onderdeel is van het opmaak en dus geen onderdeel dat bij het tekst hoort.

het probleem is dus dat de linke div het hele lengte van beeldscherm heeft, waardoor de rechte div er niet op past waardoor het naar onder schuift.

<div id="A">
<div id="B"> </div>
<div id="C"> </div>
</div


div#A{

margin: 0;
padding: 0;

}

div#B {
text-align: left;
margin: 15px;
padding: 0;
border: 2px solid white;
}


div#C {
height: 400px;
width: 265px;
margin: 0;
padding: 0;
}

 

[csshunter]

Hoi chanckjh,
Als het in de rechter-<div> alleen om opmaak gaat, zit er waarschijnlijk een afbeelding in.
Maar daarvoor hoef je geen aparte <div> in te richten. De afbeelding kan dan in de binnenste <div> als background-image aan de rechterkant. Vervolgens geef je die <div> een padding-right (opvulling) van net iets meer dan de breedte van het image. Dan blijft de tekst mooi naast het image staan, bij elke schermbreedte.
De css wordt dan aangepast, maar de html kan gewoon hetzelfde blijven:

<div id="A">div-A
	<div id="B">div-B</div>
</div>

• Voorbeeld: div-in-div-new2.htm

En als de afbeelding altijd helemaal getoond moet worden, kan je de #B een minimale hoogte geven ter waarde van de hoogte van de afbeelding.

• Voorbeeld: div-in-div-new3.htm

Is dat wat je bedoelt?

Met vriendelijke groet,
CSShunter

 

[chanckjh]

Hoi chanckjh,
Als het in de rechter-<div> alleen om opmaak gaat, zit er waarschijnlijk een afbeelding in.
Maar daarvoor hoef je geen aparte <div> in te richten. De afbeelding kan dan in de binnenste <div> als background-image aan de rechterkant. Vervolgens geef je die <div> een padding-right (opvulling) van net iets meer dan de breedte van het image. Dan blijft de tekst mooi naast het image staan, bij elke schermbreedte.
De css wordt dan aangepast, maar de html kan gewoon hetzelfde blijven:

<div id="A">div-A
	<div id="B">div-B</div>
</div>

• Voorbeeld: div-in-div-new2.htm

En als de afbeelding altijd helemaal getoond moet worden, kan je de #B een minimale hoogte geven ter waarde van de hoogte van de afbeelding.

• Voorbeeld: div-in-div-new3.htm

Is dat wat je bedoelt?

Met vriendelijke groet,
CSShunter

Het is wel een goed idee, maar ik heb daar al een background-image...

<div id="A">
<div id="C"> </div>
<div id="B"> </div>
</div>

div#A{
margin: 0;
padding: 0;
}

div#B{
margin: 15px;
padding: 0;
text-align: left;
}

div#C{
margin: 15px;
padding: 0;
float: right;
width: 160px;
height: 240px;
}

ik heb dit geprobeerd, maar de linke div werkt natuurlijk niet mee door float. de tekst werkt wel mee.

 

[chanckjh]

Het is wel een goed idee, maar ik heb daar al een background-image...

<div id="A">
<div id="C"> </div>
<div id="B"> </div>
</div>

div#A{
margin: 0;
padding: 0;
}

div#B{
margin: 15px;
padding: 0;
text-align: left;
}

div#C{
margin: 15px;
padding: 0;
float: right;
width: 160px;
height: 240px;
}

ik heb dit geprobeerd, maar de linke div werkt natuurlijk niet mee door float. de tekst werkt wel mee.

ik denk dat het me al is gelukt.
<div id="A">
<div id="B">
<div id="C">
</div>
</div>
</div>

div#A{
margin:0;
padding: 0;
}

div#B{
margin: 15px;
padding: 0px;
text-align: left;
min-height: 400px;
}

div#C{
float: right;
width: 265px;
height: 400px;
}

de tekst gaat dan nog wel onder de div door maar dat is niet erg.

nog bedankt csshunter

Gr. chanckjh