Float property not working (sorry I know this must be really trivial for most of you!)

StackOverflow https://stackoverflow.com/questions/23160126

  •  05-07-2023
  •  | 
  •  

Pergunta

So..... Thought I'd have a go at creating a website from scratch! Was off to a decent start, but am now stuck. I have obviously tried to find a solution on the net, but NOTHING seems to work. As the title suggests I cannot get my text to wrap around my floating image properly!

This is my CSS:

#main h2 {
    padding: 0px 15px 0px 15px;
    font-family: Arial;
}
#main p {
    padding: 0px 15px 5px 15px;
    font-family: Arial;
    line-height: 25px;  
}
#main img {
    float: right;
    margin: -140px 15px 0px 0px;
    border-radius: 15px;
{

And the html:

<!DOCTYPE html>
<html>  
    <head>
        <link type="text/css" rel="stylesheet" href="stenbjergcamping.css"/>
        <title>Stenbjerg Campingplads</title>
    <body>
        <img src="C:\Users\Desktop\Stenbjerg Camping\images\collage.png" />
        <div id="main">
            <h2>Velkommen til Stenbjerg Camping</h2>    
            <p>Stenbjerg Camping er en campingplads beliggende i en af Danmarks smukkeste landsbyer. Med mindre end 2 kilometer til Stenbjerg Landings-plads omgivet af havet og klithederne og bare et stenkast fra de store klitplantager finder du n&aelig;ppe et mere afslappende sted at koble af.<p> <p>Stenbjerg Camping er beliggende i hjertet af Danmarks f&oslash;rste og st&oslash;rste nationalpark: Nationalpark Thy, som byder p&aring; rige muligheder for naturoplevelser og friluftsliv. Dette er ogs&aring; grundlaget hos Stenbjerg Camping, hvor fokus netop er p&aring; natur og fred og ro.</p>
            <img src="C:\Users\Desktop\Stenbjerg Camping\images\welcome.jpg" />
        </div>
    </body>
    </head>
</html>

Screenshot

Any help would be greatly appreciated! I have been stuck for so long.

Mike

Foi útil?

Solução

check this Solution

I changed your HTML. You have to insert the image between P

Outras dicas

close braces properly

DEMO

#main img {
    float: right;
    margin: -140px 15px 0px 0px;
    border-radius: 15px;
{

should be

#main img {
    float: right;
    margin: -140px 15px 0px 0px;
    border-radius: 15px;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top