The text is placed below the image, rather than appearing alongside it

Question

The text is placed below the image, rather than appearing alongside it

My website bby is supposed to be displayed right next to the image logo, but it's showing up under the logo for some reason. Can someone help me with this issue? You can view the current layout here

This is the html code I have:

body {
    font-size:20px;
    font-family: Optima, sans-serif;
    line-height:1.5;
    padding: 0;
    margin:0;
}

.container {
    width:80%;
    overflow:hidden;
}


header {
    font-family: Monaco, sans-serif;
    color:white;
    padding-top:100px;
    min-width: 90%;
    min-height: 200px;
    margin: 0;
    padding: 10px;
    background:#6BD326;
}

#logo {
    float:left;
    display:inline-block;
}

.branding {
    float: left;
}

nav li {
    float:left;
    padding: 0px 20px;
    list-style-type: none;
}

nav {
    float:right;
}

#logo {
    margin-top:5px; 
    width:40%;
}

<header>
        <div class="branding">
            <div id="logo">
                <img src="https://picsum.photos/200/300" style="width:100px;" />
            </div>
                <span><h1><u>My</u>&nbsp;Website&nbsp;bby</h1></span>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Photogallery</a></li>
                <li><a href="">Contact me</a></li>
            </ul>
        </nav>
</header>

If you want to see the issue visually, refer to the image linked above. I'm new to coding and really need help figuring out what's wrong.

html css

Answer 1

Answer №1

You can also achieve the desired layout by using a combination of display: inline-block and vertical-align: middle.

For instance:

body {
  font-size: 20px;
  font-family: Optima, sans-serif;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

.container {
  width: 80%;
  overflow: hidden;
}


header {
  font-family: Monaco, sans-serif;
  color: white;
  padding-top: 100px;
  min-width: 90%;
  min-height: 200px;
  margin: 0;
  padding: 10px;
  background: #6BD326;
}

#logo {
  float: left;
    display: inline-block;
    vertical-align: top;
}

.i-b {
  display: inline-block;
    vertical-align: top;
    width: calc(100% - 40%);
}

.branding {
  float: left;
}

nav li {
  float: left;
  padding: 0px 20px;
  list-style-type: none;
}

nav {
  float: right;
}

#logo {
  margin-top: 5px;
  width: 40%;
}

<div class="branding">
            <div id="logo">
                <img src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" style="width:100px;" />
            </div>
                <span class="i-b"><h1><u>My</u>&nbsp;Website&nbsp;bby</h1></span>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Photogallery</a></li>
                <li><a href="">Contact me</a></li>
            </ul>
        </nav>
    </div>

Check out the code in Jsfiddle

Answer 2

You can also achieve the desired layout by using a combination of display: inline-block and vertical-align: middle.

For instance:

body {
  font-size: 20px;
  font-family: Optima, sans-serif;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

.container {
  width: 80%;
  overflow: hidden;
}


header {
  font-family: Monaco, sans-serif;
  color: white;
  padding-top: 100px;
  min-width: 90%;
  min-height: 200px;
  margin: 0;
  padding: 10px;
  background: #6BD326;
}

#logo {
  float: left;
    display: inline-block;
    vertical-align: top;
}

.i-b {
  display: inline-block;
    vertical-align: top;
    width: calc(100% - 40%);
}

.branding {
  float: left;
}

nav li {
  float: left;
  padding: 0px 20px;
  list-style-type: none;
}

nav {
  float: right;
}

#logo {
  margin-top: 5px;
  width: 40%;
}

<div class="branding">
            <div id="logo">
                <img src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" style="width:100px;" />
            </div>
                <span class="i-b"><h1><u>My</u>&nbsp;Website&nbsp;bby</h1></span>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Photogallery</a></li>
                <li><a href="">Contact me</a></li>
            </ul>
        </nav>
    </div>

Check out the code in Jsfiddle

Answer 3

Answer №2

Here is the code that is functioning properly:

Body code:

 <body>
<div class="branding">

    <div id="logo">
        <img src="./img/logo.png" style="width:100px;" />
    </div>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Photogallery</a></li>
            <li><a href="">Contact me</a></li>
        </ul>
    </nav>
        <span><h1 style="padding: 30px; margin-left:130px;"><u>My</u>&nbsp;Website&nbsp;bby</h1></span>
</div>

</div>
</body>

Your CSS should look like this:

body {
    font-size:20px;
    font-family: Optima, sans-serif;
    line-height:1.5;
    padding: 0;
    margin:0;
}
.body img{
    display: inline;
}

.container {
    width:80%;
    overflow:hidden;
}

header {
    font-family: Monaco, sans-serif;
    color:white;
    padding-top:100px;
    min-width: 90%;
    min-height: 200px;
    margin: 0;
    padding: 10px;
    background:#6BD326;
}

#logo {
    float:left;
    display:inline-block;
}

nav li {
    float:left;
    padding: 0px 20px;
    list-style-type: none;
}

The mistake was in this section:

.branding {
    float: left;
}

Answer 4

Here is the code that is functioning properly:

Body code:

 <body>
<div class="branding">

    <div id="logo">
        <img src="./img/logo.png" style="width:100px;" />
    </div>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Photogallery</a></li>
            <li><a href="">Contact me</a></li>
        </ul>
    </nav>
        <span><h1 style="padding: 30px; margin-left:130px;"><u>My</u>&nbsp;Website&nbsp;bby</h1></span>
</div>

</div>
</body>

Your CSS should look like this:

body {
    font-size:20px;
    font-family: Optima, sans-serif;
    line-height:1.5;
    padding: 0;
    margin:0;
}
.body img{
    display: inline;
}

.container {
    width:80%;
    overflow:hidden;
}

header {
    font-family: Monaco, sans-serif;
    color:white;
    padding-top:100px;
    min-width: 90%;
    min-height: 200px;
    margin: 0;
    padding: 10px;
    background:#6BD326;
}

#logo {
    float:left;
    display:inline-block;
}

nav li {
    float:left;
    padding: 0px 20px;
    list-style-type: none;
}

The mistake was in this section:

.branding {
    float: left;
}

Answer 5

Answer №3

Within the

<div class="logo-box">

, you have the option to include an additional div with the following style:

align-items: center; justify-content: flex-end;

Answer 6

Within the

<div class="logo-box">

, you have the option to include an additional div with the following style:

align-items: center; justify-content: flex-end;

Answer 7

Answer №4

It is recommended to validate your code using the W3C Validator.

If you encounter any errors in the HTML, such as the one mentioned below:

Error: Element h1 not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

To learn more about the difference between block and inline elements, you can visit Can <span> tags have any type of tags inside them? and refer to the formal spec at https://www.w3.org/TR/html401/struct/global.html#h-7.5.3

If you need an immediate solution, consider changing the span to a div (which allows h1 elements as children) and set both as inline-block elements.

Answer 8

It is recommended to validate your code using the W3C Validator.

If you encounter any errors in the HTML, such as the one mentioned below:

Error: Element h1 not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

To learn more about the difference between block and inline elements, you can visit Can <span> tags have any type of tags inside them? and refer to the formal spec at https://www.w3.org/TR/html401/struct/global.html#h-7.5.3

If you need an immediate solution, consider changing the span to a div (which allows h1 elements as children) and set both as inline-block elements.

Answer 9

Answer №5

Experiment with flexbox and remove float:left

.logo {
    display:flex;
    align-items:center;
}

Answer 10

Experiment with flexbox and remove float:left

.logo {
    display:flex;
    align-items:center;
}

Answer 11

Answer №6

Take a look at this - I eliminated all the floats and utilized flex properties instead.

body {
    font-size:20px;
    font-family: Optima, sans-serif;
    line-height:1.5;
    padding: 0;
    margin:0;
}

.container {
    width:80%;
    overflow:hidden;
}


header {
    font-family: Monaco, sans-serif;
    color:white;
    padding-top:100px;
    min-width: 90%;
    margin: 0;
    padding: 10px;
    background:#6BD326;
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}

#logo {    
    margin-top: 5px;
    display: flex;
    align-items: center;
}
#logo span{
  margin-left: 10px;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  
}
nav li {
    padding: 0px 20px;
    list-style-type: none;
}

<header>        
<div class="branding">
            <div id="logo">
                <img src="https://cdn.mos.cms.futurecdn.net/BVb3Wzn9orDR8mwVnhrSyd-1200-80.jpg" style="width:100px;" />
                <span><u>My</u>&nbsp;Website&nbsp;bby</span>
            </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Photogallery</a></li>
                <li><a href="">Contact me</a></li>
            </ul>
        </nav>
    </div>
</header>

Answer 12

Take a look at this - I eliminated all the floats and utilized flex properties instead.

body {
    font-size:20px;
    font-family: Optima, sans-serif;
    line-height:1.5;
    padding: 0;
    margin:0;
}

.container {
    width:80%;
    overflow:hidden;
}


header {
    font-family: Monaco, sans-serif;
    color:white;
    padding-top:100px;
    min-width: 90%;
    margin: 0;
    padding: 10px;
    background:#6BD326;
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}

#logo {    
    margin-top: 5px;
    display: flex;
    align-items: center;
}
#logo span{
  margin-left: 10px;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  
}
nav li {
    padding: 0px 20px;
    list-style-type: none;
}

<header>        
<div class="branding">
            <div id="logo">
                <img src="https://cdn.mos.cms.futurecdn.net/BVb3Wzn9orDR8mwVnhrSyd-1200-80.jpg" style="width:100px;" />
                <span><u>My</u>&nbsp;Website&nbsp;bby</span>
            </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Photogallery</a></li>
                <li><a href="">Contact me</a></li>
            </ul>
        </nav>
    </div>
</header>

The text is placed below the image, rather than appearing alongside it

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

How to target specifically images contained within anchor elements using jQuery?

Generating an .html document from a log file

Having trouble getting Google to show breadcrumbs in search results

Internet Explorer 9 does not display content until the ajax/json function has finished executing

Adjusting the color of a value in justGage requires a few simple steps to

When the button is clicked, populate a new form with information from the model

"Patience is a virtue: Tips for waiting until a webpage is completely loaded using

Creating a mockup for a website design project in my class, utilizing HTML and CSS. Encountering issues with the CSS not displaying correctly, unsure of the root cause of the problem

Troubles with showcasing icons on a website

Examine the spans and delete the first-child node

Can you provide me with a comprehensive list of all the colors available in Twitter Bootstrap 3?

What are the available choices for constructing HTML based on an ajax response?

Border extends across two separate rows

Bootstrap 5 - Achieve automatic column width within a row

Deleting an element from an HTML page with jQuery

Enhancing elements with fade-in effects upon hovering

Having trouble understanding the odd behavior in IE7. Suddenly seeing a scrollbar appear when hovering

How can I use AngularJS to save selected assets?

The CSS variable for the Bootstrap Modal header padding, var(--bs-modal-header-padding), is missing or not defined

How can I display a nested div when the parent div's v-if condition is not met?