float probleem

Door Erik Rijk op 11-09-2006 00:09

287 views

Beste,

ik heb een div, met wat leuke teksten erin.

<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer accumsan eros quis sem. Phasellus dolor. Etiam facilisis. Sed mattis tortor vitae tortor. Mauris ac dui non sapien volutpat cursus. Donec dictum. Donec mattis, dolor nec molestie pretium, urna ligula feugiat justo, eu faucibus tortor justo ac felis. Aliquam erat volutpat. Curabitur nisi ante, consequat sed, porttitor eget, suscipit in, velit. Nulla facilisi. Suspendisse rutrum molestie odio. Vivamus mollis neque vitae elit. Praesent ac nisl sed nulla bibendum dictum. Nam vehicula suscipit ipsum. Vivamus erat. Etiam ante.</p>

<p>Etiam molestie. Vestibulum leo lorem, porttitor ut, porttitor et, pharetra nec, lacus. Curabitur tellus dolor, rhoncus pulvinar, lacinia in, convallis vel, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non quam in nibh porttitor placerat. Donec eu arcu. Phasellus vel libero. Vestibulum lobortis varius sem. Nam id nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum felis velit, tincidunt a, sagittis a, vestibulum eu, eros. Etiam tortor.</p>

<p>Proin tempor. Morbi at elit. In hac habitasse platea dictumst. Proin gravida nulla eget nisl. Vivamus dignissim. Vivamus ornare neque ac nisi interdum consectetuer. Praesent sed turpis et enim ultricies convallis. Cras elementum ligula eu mauris. Nam diam sem, tristique vitae, commodo non, vulputate non, ligula. Donec scelerisque ipsum. Donec imperdiet ultrices sapien. Nam vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla commodo. Nam viverra porta urna. Donec fringilla, dui eu fermentum nonummy, dui diam interdum mauris, non laoreet felis mi convallis purus. Vestibulum felis.</p>
</div>

als ik nu op een willekeurige plek een plaatje erin wil hebben aan de rechterkant, doe ik het volgende:

<img class="right" src="logo.png" alt="logo">

met de volgende css:


img.right
{
    float: right;
}

maar op 1 of andere manier spring het logo de div half uit....
hoe kan ik dit verhelpen.

screenshot:

http://img88.imageshack.us/img88/3111/logoprobleemia6.jpg

[edit]Wat vinden jullie trouwens van het design?
Dit is gewoon een snelle eerste opzet....alles wordt nog wel aangepast.[/edit]

Remco van Arkelen

11-09-2006 00:45

Leuk design...kan het zijn dat je een vaste hoogte aan je tekst-div hebt gegeven? Plaats je de image-tag wel binnen je tekst-div? Misschien moet je wat met "clear" testen: http://www.w3schools.com/css/pr_class_clear.asp

Erik Rijk

11-09-2006 00:51

div.menu_content_inside
{
	padding: 5px;
	background: #f0f6f6;
	font-family: Verdana;
	font-size: 9px;
	color: #00688B;
}

dit is de div waar het plaatje ook in staat. Met clear werkt ook niks en een height: auto; meegeven heeft ook geen zin.

Remco van Arkelen

11-09-2006 01:07

Toch zul je iets met clear moeten doen, doordat je de image laat floaten neemt het geen ruimte in beslag...zet dit eens voor je </div> van de tekst?

<div style="clear:left; height:1px;"></div>

Onbekende gebruiker

11-09-2006 01:15

Zet dit onderaan in de div:

<hr style="clear: both; border: 0px none #FFFFFF; height: 0px;">

Willem Jan Z

11-09-2006 01:41

Inderdaad onderin de div een clearer. Maar ik doe het meestal op de manier van Remco, maar dan met extern stylesheet, omdat je hem vaak nog vaker nodig hebt. Het moet een block element zijn! Dus div, hr, h1, etc dus geen span.

Onbekende gebruiker

11-09-2006 01:55

Probleem met de manier van Remco is dat je een lege div hebt, dus niet valid. Je kan vervolgens wel een   toevoegen maar dan moet je voor IE weer een overflow op hidden zetten.

Overigens kan het wel met span, je moet dan wel eerst display: block meegeven.

Willem Jan Z

11-09-2006 02:05

Alleen Tidy geeft problemen met lege elementen, w3c doet er volgens mij niet moeilijk over. Ik trek me er dus ook niks van aan.

Jan Koehoorn

11-09-2006 09:14

@ Erik: als je wilt weten waarom een float zich eigenlijk zo gedraagt, dus waarom hij eigenlijk uit zijn 'parent' breekt, lees CSS tut 3.

Stefan

11-09-2006 09:19

Zet het plaatje eens VOOR de div met de tekst, dus eerst de float, en dan de tekst.

Waarschijnlijk werkt het dan wel, zo niet, dan moet je toch even in het gedrag van de floats onderzoeken.

Reageren

Inloggen om te reageren