The two spans cannot be aligned on the same line
Dears,
I am making a name card and the codes are below:
I want to align the last two spans "STUDIO ICONIC" and "[email protected]" on the same line, however it is always appeared that the email span comes after like the picture show. Is possible to basically adjusted something to achieve that? or is there something i do it wrong? If possible i don't want to use grip or flexbox...Thanks.
<!DOCTYPE html>
<html lang="en">
<body style="border: 2px solid green; width: 500px; height: 270px;">
<div >
<img src = "../smile1.jpg"
style="margin-left: 50px;
margin-top: 20px;
float: left;
width: 150px;
height: 150px;">
<p style="margin-left: 300px;">
<B>ODEN QUEST</B>
<br>
<span><em>Creative Director</em></span>
</p>
<p style="margin-left: 300px;">
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p style="margin-left: 300px;">
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
<br style="clear:both;">
<span style="margin-left: 65px; display: inline;">STUDIO ICONIC</span>
<span style="margin-left: 300px; display: inline;">[email protected]</span>
</div>
</body>
</html>
The best way for layout is flex. About the inline style, it is highly recommended that don't use it. instead, use classes for your styling.
.wrapper{
display:flex;
}
.image-container{
margin-left: 50px;
margin-top: 50px;
width: 150px;
height: 150px;
border:2px solid gainsboro;
}
.image{
width:100%;
}
.right-side{
display:flex;
flex-direction:column;
margin-left:100px;
}
.info{
display:flex;
}
.s1{
padding-left: 65px;
}
.s2{
margin-left:120px;
}<div class="wrapper">
<div class="image-container">
<img class="image" src = "../smile1.jpg" alt="smile face">
</div>
<section class="right-side">
<p>
<b>ODEN QUEST</b>
<br>
<span><em>Creative Director</em></span>
</p>
<p>
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p>
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
</section>
</div>
<div class="info">
<span class="s1">STUDIO ICONIC</span>
<span class="s2">[email protected]</span>
</div>For detection only, in the code that you wrote, you should change display and margin-left of your span.(span by default is display:inline)
<div >
<img src = "../smile1.jpg"
style="margin-left: 50px;
margin-top: 20px;
float: left;
width: 150px;
height: 150px;">
<p style="margin-left: 300px;">
<B>ODEN QUEST</B>
<br>
<span><em>Creative Director</em></span>
</p>
<p style="margin-left: 300px;">
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p style="margin-left: 300px;">
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
<br style="clear:both;">
<span style=" margin-left:65px;">STUDIO ICONIC</span>
<span style="margin-left:110px;">[email protected]</span>
</div>