<div id="pageHeading"> <h1>zisland</h1> <img src="islandpic.jpg" alt="Mountain View" style="width:50px;height:50px"> </div> #pageHeading{ color: #000000; width: auto; height: auto; text-align: center; background-color: #800080; } The image of the island appears to be centered below the text "zisland". My question is, how do i get the image of the island to be positioned to the right of the text "zisland" instead of being below?
Use float: right on the <img> tag, or float: left on <h1>.
<div id="pageHeading"> <h1>zisland</h1> <img src="islandpic.jpg" alt="Mountain View"> </div> #pageHeading { color: #000000; width: auto; height: auto; background-color: #800080; } #pageHeading h1 { float: left; } #pageHeading img { width: 50px; height: 50px } You may want following this: here, given two options.
#pageHeading { color: #000000; width: auto; height: auto; text-align: center; background-color: #800080; } #pageHeading h1, #pageHeading img { display: inline-flex; margin: 0; } #pageHeading1 { background-color: #800080; color: #000000; overflow: hidden; text-align: center; width: auto; } #pageHeading1 h1 { display: inline-flex; margin: 0; } #pageHeading1 img { float: right; height: 50px; width: 50px; }<div id="pageHeading"> <h1>zisland</h1> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Alouette-iii-boven-berggebied.jpg/300px-Alouette-iii-boven-berggebied.jpg" alt="Mountain View" style="width:50px;height:50px"> </div> <br/><br/><br/> <div id="pageHeading1"> <h1>zisland</h1> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Alouette-iii-boven-berggebied.jpg/300px-Alouette-iii-boven-berggebied.jpg" alt="Mountain View" style="width:50px;height:50px"> </div>
