radbryt div efter float

hej om jag har en div som är float: left och så vill jag efter den diven få en radbrytning.
kolla på koden här:

#nyhet{
  width: 100%;
  border-bottom: 1px dotted #c2c2c2;
}
#datum{
  float: left;
}
#lasmer{
  float: right;
}
#nyhet h1{
  
}
<div id="nyhet">
  <div id="datum">06-05-26</div><div id="lasmer">läs mer &raquo;</div>
  <h1>kort nyhetstext</h1>
</div>

#nyhet{
  width: 100%;
  border-bottom: 1px dotted #c2c2c2;
}
#datum{
  float: left;
width:60%;
}
#lasmer{
  float: right;
width:60%;
}
#nyhet h1 {
width:100%;
float:left;
}
<div id="nyhet">
  <div id="datum">06-05-26</div><div id="lasmer">läs mer &raquo;</div>
  <h1>kort nyhetstext</h1>
</div>

även om jag tycker att du borde använda klasser och p istället...

Varför width 60% tillsammans blir de ju 120%
Hur menar du med klasser?

I firefox så hamnar inte den nedre ramlinjen rätt heller utan ligger högst upp nästan.

ja då blir det ju en radbrytning, eller var det de som skulle ligga bredvid varandra?

jo om du har klasser kan du ju ha flera nyheter...
p står ju för stycke och en kort nyhetstext låter mer som ett stycke än en rubrik.
tänker lite på semantiken bara

Det är nyhetsrubriker.
klasser kanske är bättre.

I firefox så hamnar inte den nedre ramlinjen rätt heller utan ligger högst upp nästan.
Varför width 60% tillsammans blir de ju 120%

vill du att datum och läs mer ska ligga bredvid varandra - använd width:48% på båda
fast floats är svåra, speciellt som jag inte ser vart du tänkt lägga in clear:both

kanske detta skulle funka för dig

<div class="nyhet">
<p><span class="datum">060526</span><span class="lasmer">läs mer...</span></p>
<h3>nyhetsrubrik</h3>
<p>utdrag ur nyheten</p>
</div>

.nyhet {
width: 100%;
border-bottom: 1px dotted #c2c2c2;
}
.datum{
text-align:left;
}
.lasmer{
text-align:right;
}
h3 {display:block;}
p { width:100%; }

Hmm...

Klasser *är* bättre (om du inte tänker dig exakt *en* nyhet i singular!)

"radbrytning" bör du (lite beroende på vad din #nyhet skall ligga i) kunna få till med med clear:left eller clear:right (eller clear:both)
Exempel (om du vill ha "radbrytningen" innan rubriken:)

.nyhet{
  width: 100%;
  border-bottom: 1px dotted #c2c2c2;
}
.nyhet .datum{
  float: left;
}
.nyhet .lasmer{
  float: right;
}
.nyhet h1{
  clear: both;
}
<div class="nyhet">
  <div class="datum">06-05-26</div><div class="lasmer">läs mer &raquo;</div>
  <h1>kort nyhetsrubrik</h1>
  <p>Text text text</p>
</div>

OBS! Om det fungerar kan ev. bero på hur "containern" som nyheterna skall ligga i är CSS-kodad också ;)

Vad jag försöker få till är detta:

tack :)

Koden som jarvklo dumpade verkar funka. Är det alltså clear: both som gör det?

.nyhet{
  width: 100%;
	border-bottom: 1px dotted #c2c2c2;
}
.nyhet .datum{
	float: left;
	background-color: #af1f24;
	color: #ffffff;
}
.nyhet .lasmer{
	float: right;
}
.nyhet h1{
  clear: both;
	font-family: Verdana, Arial;
	font-size: 11px;
<div class="nyhet">
  <div class="datum">06-05-26</div><div class="lasmer">läs mer &raquo;</div>
	<h1>Lite nyheter....</h1>
</div>

Yep.

Det hade funkat med clear:right också i ditt fall - men det där med en "spacer-div" (dvs en clear:both efter två floats) sitter lixom i ryggmärgen som en kokboksmetod... (även om det finns fler varianter på t.ex. http://www.quirksmode.org/css/clearing.html eller om du söker på "clearing floats" på Google ;) )

thanks!