---
title: "radbryt div efter float"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/147359-radbryt-div-efter-float"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Addeladde"
published: "2006-05-26T20:38:10.000Z"
updated: "2006-05-26T21:42:00.000Z"
replies: 10
views: 446
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/147359-radbryt-div-efter-float"
---

# radbryt div efter float

## #1 — Addeladde, 2006-05-26T20:38Z

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>
```

Permalänk: https://www.webforum.nu/p/147359

## #2 — caya, 2006-05-26T21:01Z

```
#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...

Permalänk: https://www.webforum.nu/p/1820803

## #3 — Addeladde, 2006-05-26T21:05Z

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.

Permalänk: https://www.webforum.nu/p/1820804

## #4 — caya, 2006-05-26T21:07Z

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

Permalänk: https://www.webforum.nu/p/1820805

## #5 — Addeladde, 2006-05-26T21:10Z

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%

Permalänk: https://www.webforum.nu/p/1820806

## #6 — caya, 2006-05-26T21:17Z

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%; }
```

Permalänk: https://www.webforum.nu/p/1820808

## #7 — jarvklo, 2006-05-26T21:18Z

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å ;)

Permalänk: https://www.webforum.nu/p/1820809

## #8 — Addeladde, 2006-05-26T21:25Z

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

Bilagor:

- [dump.gif](https://www.webforum.nu/a/10891.gif)

Permalänk: https://www.webforum.nu/p/1820810

## #9 — Addeladde, 2006-05-26T21:33Z

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>
```

Permalänk: https://www.webforum.nu/p/1820812

## #10 — jarvklo, 2006-05-26T21:37Z

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 ;) )

Permalänk: https://www.webforum.nu/p/1820814

## #11 — Addeladde, 2006-05-26T21:42Z

thanks!

Permalänk: https://www.webforum.nu/p/1820815

---

Tråden på webben: https://www.webforum.nu/amne/html-css/147359-radbryt-div-efter-float