jzbakos jzbakos - 1 month ago 8
CSS Question

How to position this image next to text?

I am extremely new to HTML and CSS, and have run into an issue. I am currently attempting to create a simple personal website. Currently, I am trying to align my avatar/logo with the website title (side by side). How would I accomplish this?



html {
background: #bdb4c1;
}

#logo {
width: 100px;
height: 100px;
}

hr {
border: 0;
color: red;
border-bottom: 1px solid #101010;
}

body {
max-width: 800px;
height: 1000px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fafafa;
margin: auto;
padding: 20px;

}

h1, h3 {
font-weight: 700;
line-height: 1.5;
color: #272727;
}

p {
color: #383838;
}

<body>

<div id="title">
<img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
<h1>JOSH BAKOS</h1>
</div>

<hr>

<h3>INFORMATION</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h3>EXPERIENCE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h3></h3>
</body>




Answer

Your <img> and <h1> tag cannot be aligned because <h1> is a block element. By default, block elements are displayed below the previous html element (i.e. below your <img> here).

There are many possible solutions. A simple one could be to move the tag inside the <h1>:

    <h1><img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">JOSH BAKOS</h1>
Comments