[CSS/divs] procentuele widths en float left gaan niet samen

[Verwijderd]

Hallo

Momenteel heb ik een hoofd-div met 2 sub divs: 1 voor de titel en 1 voor de content.

code:

<div class="main">
<div class="titel">
titel
</div>
<div class="content">
hier nog wat tekst
</div>
</div>

Die hangen mooi aan elkaar dmv float: left;
Het probleem is nu dat ik als ik width op 100% zet, hij alleen de breedte van de tekst aanneemt en niet de totale breedte van de main-div, zoals hij bij andere divs op de pagina wel doet. Zet ik de breedte in pixels is er geen probleem, maar dat is geen echte oplossing want dezelfde div wordt door php gebruikt met cases in verschillende breedtes. Hij moet dus steeds 100% van de breedte van de main-div zijn.

Iemand enig idee wat hiertegen te doen valt? De search bracht niet bepaald nuttige resultaten op.

kleine edit: clear: both; plaatsen werkt ook niet.

[ Voor 3% gewijzigd door Verwijderd op 27-01-2007 13:59 ]

[Kiphaas7]

Geen width specificeren denk ik.

[Verwijderd]

Nee zelfde resultaat. Enkel de divs rond de main div verbreden naar de normale breedte.

[Kiphaas7]

Verwijderd schreef op zaterdag 27 januari 2007 @ 14:07:
Nee zelfde resultaat. Enkel de divs rond de main div verbreden naar de normale breedte.

Klopt ik zat fout, maar deze code werkt toch echt bij mij in opera, de groene(net zoals de titel) gebruikt de hele breedte van de main div en de gele alleen de maximale breedte van de text....

HTML:

<style type="text/css">

body {
background-color: #000;
color:#000;  
margin: 20px 140px  20px 140px;
}

#main { 
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff; 
overflow: auto;
}

#titel {
float:left;
width:100%;
background-color:blue;
clear:both;
}

#content {
float:left;
width:100%;
background-color:green;
}

#content2 {
float:left;
background-color:yellow;
}

</style>

<div id="main">
    <div id="titel">
        titel
    </div>
    <div id="content">
        hier nog wat tekst
    </div>
        <div id="content2">
        hier nog wat tekst
    </div>
</div>

Hoewel de code niet verfijnd is werkt het wel, floats en width

[ Voor 7% gewijzigd door Kiphaas7 op 27-01-2007 14:29 ]

[Verwijderd]

In Opera heb ik nog niet kunnen checken. Wat betreft FireFox 2.0 en IE 6: FireFox geeft fouten, IE 6 geeft hem correct weer wat betreft widths...

edit: bij mijn code dan
ik ga zo even vergelijken met die van jou

edit 2: na een controle zie ik dat onze code grotendeels overeenstemt; buiten enkele paddings die er niet bepaald invloed op kunnen hebben...

[ Voor 44% gewijzigd door Verwijderd op 27-01-2007 14:43 ]

[Kiphaas7]

Verwijderd schreef op zaterdag 27 januari 2007 @ 14:36:
In Opera heb ik nog niet kunnen checken. Wat betreft FireFox 2.0 en IE 6: FireFox geeft fouten, IE 6 geeft hem correct weer wat betreft widths...

edit: bij mijn code dan
ik ga zo even vergelijken met die van jou

edit 2: na een controle zie ik dat onze code grotendeels overeenstemt; buiten enkele paddings die er niet bepaald invloed op kunnen hebben...

Heb de mijne net gecheckt in ie6,7, opera 9.10 en ff2.............

Die clear:both heb je trouwens alleen nodig als je width MINDER dan 100% is.

[ Voor 6% gewijzigd door Kiphaas7 op 27-01-2007 14:54 ]

[Verwijderd]

Ik heb nog even geprobeerd zonder float: left; bij de titel en content divs. Dat werkt; echter zijn er in de content div nog 2 divs zonder float: left; die ik wou weergeven met een padding, iets wat nu genegeert word (is trouwens ook de reden waarom ik begon met float: left; te gebruiken)...

Dus iets a la

code:

<div class="content">
<div style="padding: 5px;">
<div style="background-color: #8e8e8e; width: 100%;">
hier wat tekst
</div>
</div>
</div>

[ Voor 23% gewijzigd door Verwijderd op 27-01-2007 14:53 ]

[Kiphaas7]

Verwijderd schreef op zaterdag 27 januari 2007 @ 14:52:
Ik heb nog even geprobeerd zonder float: left; bij de titel en content divs. Dat werkt; echter zijn er in de content div nog 2 divs zonder float: left; die ik wou weergeven met een padding, iets wat nu genegeert word (is trouwens ook de reden waarom ik begon met float: left; te gebruiken)...

Dus iets a la

code:

<div class="content">
<div style="padding: 5px;">
<div style="background-color: #8e8e8e; width: 100%;">
hier wat tekst
</div>
</div>
</div>

Ik hoop niet dat je dit zo ook in je website gebruikt, dit is namelijk wel hele ranzige code..... Ik neem aan dat dit alleen voor het voorbeeld is.

Ok, laatste voorbeeld dat bij mij werkt, hierna moet je er toch wel zelf uitkomen.... Ik heb ook maar even je onnodige wrapper div weggehaald.

css:

HTML:

body {
background-color: #000;
color:#000;  
margin: 20px 140px  20px 140px;
padding:0px;
}

h1 {
float:left;
width:100%;
padding:0px;
margin:0px;
background-color:white;
}

#content {
float:left;
width:100%;
background-color:green;
}

p {
margin:0px;
padding: 0px 0px 0px 20px;
}

html:

HTML:

<html>
<body>
<h1>titel</h1>
    <div id="content">
        <p>hier nog wat tekst</p>
    </div>
</body>
</html>

[ Voor 44% gewijzigd door Kiphaas7 op 27-01-2007 15:04 ]

[Verwijderd]

Ok het werkt. Vriendelijk bedankt

[crisp]

waarom floats gebruiken; een block-level element neemt standaard al de volledige breedte in...

[Kiphaas7]

crisp schreef op zaterdag 27 januari 2007 @ 15:15:
waarom floats gebruiken; een block-level element neemt standaard al de volledige breedte in...

Die heb ik er in laten staan omdat de ts in het begin erom vroeg.... Maar ze moeten inderdaad eruit, en dan hoeft de width ook niet vermeld te worden. Zat ik dus wel goed met mijn eerste reply, alleen moest de float eruit....

Je hebt helemaal gelijk.

[ Voor 21% gewijzigd door Kiphaas7 op 27-01-2007 16:09 ]