Jump to content
ricardo_t

Move a Image inside a DIV

Recommended Posts

Hi Guys

Im trying to move an image to the top left corner  inside a div, but it doesnt' works. Can anyone Help?

Thanks 

cheers

Ricardo

HTML

    <div id="content">
            <h2>Herzlich Willkommen!<br>
                    <br>
                </></h2>
            <img class="float" src="images\home1.jpg"/>
            <h3>Der Sommer kann kommen...!</h3>
            <p>Die Kartoffeln sind bereits gepflanzt und auch sonst spürt die Natur den Frühling: Alles wächst und gedeiht, sowohl die gewünschten Arten wie auch das Unkraut. Doch dank vielen tüchtigen Händen können wir Ihnen wie gewohnt, jeden Samstag morgen von 7 bis 12 Uhr frischen Biogemüse am Aarauer Wochenmarkt anbieten. Doch nicht nur das, auch knuspriges Brot, Wurstwaren aller Art, Käse und vieles mehr wartet auf Sie! Selbstverständlich sind all unsere Produkte aus eigener Produktion und aus biologischem Anbau. 
            Die Setzlinge für den Setzlingsmarkt am 6. und 7. April auf dem Schloss Wildegg wachsen und warten bald auf ihren neuen Besitzer.</p>
                <br>
            <h3>Aktuell</h3>
            <p>Bereits erhalten Sie bei uns die ersten Sommersalate. Ab Ende April verkaufen wir wieder Gemüse- und Blumensetzlinge aller Art, pünktlich zum Beginn der Pflanzsaison!</p>    

 

 

CSS

#content img.float{
        float: left;
        margin-right: 15px;
        border: 1Px solid #111111;

}


                

Share this post


Link to post
Share on other sites

Simple answer, move the image before header OR before text in header. The image won't move up to top left, because the block header element will prevent it doing so as by default it fills the whole width available to it, forcing following floated or non floated elements below it.

Share this post


Link to post
Share on other sites

Hmm.. Now the picture is on the Right Place, but I had text inside the Same div, on the right side from the Picture. Now the last 2 Lines are under the image.

I think its Better when i place 2 Divs inside a Container. What do you think? 

P.S - I don't know becaus i can't upload a Screenshot. Im only alowed tu upload Documents with a max size of 0.01MB. :-(

Edited by ricardo_t

Share this post


Link to post
Share on other sites

It might be easy to maintain and control with 2 div container element, although this works.

<!DOCTYPE html>
<html>
<head>
<style>
 #content img.float{
        float: left;
        margin-right: 15px;
        border: 1Px solid #111111;
        width:20%;

} 
img.float ~ h3 ~ p{overflow:auto;}
</style>
</head>
<body>

<div id="content">
            <img class="float" src="pulpitrock.jpg"/>
            <h2>Herzlich Willkommen!</h2>
            
            <h3>Der Sommer kann kommen...!</h3>
            <p>Die Kartoffeln sind bereits gepflanzt und auch sonst spürt die Natur den Frühling: Alles wächst und gedeiht, sowohl die gewünschten Arten wie auch das Unkraut. Doch dank vielen tüchtigen Händen können wir Ihnen wie gewohnt, jeden Samstag morgen von 7 bis 12 Uhr frischen Biogemüse am Aarauer Wochenmarkt anbieten. Doch nicht nur das, auch knuspriges Brot, Wurstwaren aller Art, Käse und vieles mehr wartet auf Sie! Selbstverständlich sind all unsere Produkte aus eigener Produktion und aus biologischem Anbau. 
            Die Setzlinge für den Setzlingsmarkt am 6. und 7. April auf dem Schloss Wildegg wachsen und warten bald auf ihren neuen Besitzer.</p>
               <!--<img class="float" src="pulpitrock.jpg"/>-->
            <h3>Aktuell</h3>
            <p>Bereits erhalten Sie bei uns die ersten Sommersalate. Ab Ende April verkaufen wir wieder Gemüse- und Blumensetzlinge aller Art, pünktlich zum Beginn der Pflanzsaison!</p>     
</div>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Is it not possible to change your position to relative? Like I did here for my header image:
 

#header_home {
    background-image: url(images/header.png);
    background-repeat:inherit;
    width: 100%;
    height: 200px;
    width: 600px;
    position: relative;
    top: -5px;
	border-radius: 8px;
}

 

Share this post


Link to post
Share on other sites

Its not a background image, using position: relative with property top: -5; is a bad idea, as using this causes the area occupied by this element to be 5px more vertically, it will be like adding 5px margin at the bottom, with elements below it not occupying this area to fill empty space as they normally would.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×