Image In Line With Text HTML CSS

html css image resize

25,214

Solution 1

@Sourabh is close. But you'd be better off using display:inline-block instead of float and use vertical-align:bottom to align the bottoms.

CSS

* {
    font-family:'Milonga', cursive;
}
#title {
    font-size:72pt;
    text-align:center;
}
#decal {
    font-size:24pt;  /*Add this so that 1em is the same accross the divs*/
    padding-bottom:1em; /*Match the paragraph margin*/
    width:45%;
    display:inline-block;
    height:80%;
    vertical-align:bottom;
}
#image {
    margin-top:60%;
}

img {
    width: 100%
}

#about {
    font-size:24pt;
    display:inline-block;
    width:50%;
    padding-top:5%;
    height:80%;
    vertical-align:bottom;
}

Example: http://jsfiddle.net/ajdQa/

Solution 2

user2458195 is right. But add width to CSS instead of using width attribute.

Check this

Full Screen

CSS

* {
    font-family:'Milonga', cursive;
}
#title {
    font-size:72pt;
    text-align:center;
}
#decal {
    width:45%; /* changed to get some space btween #decal and #about */
    float:left;
    height:80%;
}
#image {
    margin-top:60%;
}

img {
    width: 100% /* 100% of its parent ie, #decal*/
}

#about {
    font-size:24pt;
    float:right; /* right to get some space */
    width:50%;   /* try changing back to left n see what happens */
    padding-top:5%;
    height:80%;
}

25,214

Author by

k.s

Updated on June 06, 2020

Comments

k.s almost 4 years

Apologies still new to all this. I'm creating a webpage and have an image and text next to each other, in two separate div's. I've managed to get them where I want on the page, but when I resize the page the text resizes, however the image doesn't. I want the bottom of the text to line up with the bottom of the image at all times.

Any help appreciated! Here is code:

<head>

    <title>Stefano Mocini</title>
    <link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'>
    <link href='styles/style.css' rel='stylesheet' type='text/css'>
</head>

<body>

    <div id="title">
        Stefano Mocini
    </div>

    <div id="decal">
        <div id="image">
            <img src="images/tree.png" alt="tree" width="600" height="900">
        </div>      
    </div>

    <div id="about">
        <p>THANK YOU SO MUCH FOR YOUR REVIEWS; YOUR DONATION AND FOR SHARING MY MUSIC!!!</p>

        <p>About me: I started made music when I was only 6, because in the computer there was installed fruity loops, and I used it like a game. but i soon started to try to reproduce what i listened in the radio, so, step by step, i started to learn how to use this softwer. After i started to play the keyboard, that I received like christmast gift. One day I listened to "Back to life" from Allevi, and I loved it so much that I started to play the piano, every day. Step by step i learned how to make music, and how music is made . So now i can use the softwer whereby I played whan i was a child to make my own music. What kind of music should I make? Simply the one that I like!</p>

        <p>You can use my music for making non-commercial videos or projects, but please put the title of the song and the author in the description otf the video or in the  credits of the video.</p>

        <p>Commercial use of my music: by the PRO license, or contact me</p>
    </div>

</body>

body {
font-family: 'Milonga', cursive;
}

#title {
font-size:72pt;
text-align:center;
}


#decal {
float:left;
width:50%;
float:left;
height:80%;
}

#image {
margin-top:60%;
}

#about {
font-size:24pt;
float:left;
width:50%;
padding-top:5%;
height:80%;
}

k.s almost 11 years

Thanks, that has made the image stop overlapping with the text which is awesome, but the image doesn't always remain inline with the bottom of the text when I resize the browser window, is there any way I can make this happen? I'm wondering if it's something to do with the padding-top for the image being a % ?
Jon P almost 11 years

@Sourabh inline-block is now my go-to now instead of floats. If nothing else it means no clearfixes