Width 100% met float?

Ik zit in de knoop, wat ik wil kan volgens mij niet op de manier hoe ik het nu doe maar ik zou niet weten hoe ik het anders moet doen.

Dit is wat ik wil, alleen het lijntje moet dan wel doorlopen tot het eind van het witte vak.Dit is wat de onderstaande code doet, hij doet het lijntje er onder zetten en steekt een stuk uit.
Codeblok (stijl.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.line{
width: 100%;
margin-top: 30px;
position: relative;
}
.line-left{
width: 20px;
margin-right: 10px;
height: 1px;
background-color: #e1e4e9;
float: left;
}
.line h3{
float: left;
font-size: 11px;
font-weight: bold;
margin-top: -6px;
color: #666;
}
.line-right{
width: 100%;
margin-left: 10px;
height: 1px;
background-color: #e1e4e9;
float: left;
overflow: hidden;
}

En dit is de HTML

Codeblok (voorbeeld.html):

1

Iemand enig idee hoe ik dit kan oplossen of een alternatieve manier? (Geen javascript of jQuery, het is een HTML mail)

Is een fieldset met label niet toffer? Dan heb je al meteen een border te pakken die je kan stylen, i.p.v. je het na staat te maken.

Aarclay schreef:

Is een fieldset met label niet toffer? Dan heb je al meteen een border te pakken die je kan stylen, i.p.v. je het na staat te maken.

Fieldset en legend bedoel je denk ik of niet? Die gaat er helemaal rond om heen en ik verwacht dat Apple mail geen fieldset of legend toelaat in HTML mails. (Veel word geblokkeerd in HTML mails)

Timkb schreef:

Eerdere citaten tonen

Aarclay schreef:

Is een fieldset met label niet toffer? Dan heb je al meteen een border te pakken die je kan stylen, i.p.v. je het na staat te maken.

Fieldset en legend bedoel je denk ik of niet? Die gaat er helemaal rond om heen en ik verwacht dat Apple mail geen fieldset of legend toelaat in HTML mails. (Veel word geblokkeerd in HTML mails)

ik denk eerder dat je met fieldset verder komt dan met CSS gaan prutten. HTML werkt over het algemeen beter in mailbrowsers dan CSS.

Rudie schreef:

Eerdere citaten tonen

Timkb schreef:

Eerdere citaten tonen

Aarclay schreef:

Is een fieldset met label niet toffer? Dan heb je al meteen een border te pakken die je kan stylen, i.p.v. je het na staat te maken.

Fieldset en legend bedoel je denk ik of niet? Die gaat er helemaal rond om heen en ik verwacht dat Apple mail geen fieldset of legend toelaat in HTML mails. (Veel word geblokkeerd in HTML mails)

ik denk eerder dat je met fieldset verder komt dan met CSS gaan prutten. HTML werkt over het algemeen beter in mailbrowsers dan CSS.

De mail word alleen geopend in Applemail en die heeft volledig CSS support incl CSS3. Maar fieldset geeft alsnog niet het gewenste effect, want ik wil alleen een lijn boven.

doe dan gewoon een lijntje, en dan een span / divje met Analytics en die geef je een bepaalde padding mee en background: #fff; en dan positioneer je deze over het lijntje heen.

Alstu:

<!DOCTYPE html>
<html>
<head>
    <title>Lijn</title>
    
    <style>    
    .line
    {
        float: left;
        margin-top: 10px;
        height: 1px;
        width: 100%;
        background-color: #E1E4E9;
    }
    
    .line_text
    {
        float: left;
        margin-top: -10px;
        margin-left: 30px;
        padding-left: 15px;
        padding-right: 15px;
        background-color: #FFF;
        color: #666;
        font-size: 12px;
        font-weight: bold;
    }
    </style>
</head>
<body>
    <div class="line"></div>
    <div class="line_text">Analytics</div>
</body>
</html>