Bollate

HTML

[ANSWERED] HTML and CSS Images Won´t Appear Next To Each Other (Not even with “float”!)

By

Nov 20, 2022 , ,

Solution 1 :

Remove all of the attributes from your <img> tags except for the src, and add this code to your css to style the elements:

#bodydiv img{
  width:50%;
  display:inline-block;
  height:50%;
  float:left;
}

For most styling, you cannot declare them as html attributes, unless of course by defining them in a style attribute, which will apply the css to that element.

Also font-color is actually just color.

Here is the code with those fixes (and I replaced the image src values with placeholder images so everyone can see it working):

<head>

  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">

  <style type="text/css">
 * {
      font-family: "Abril Fatface";
    }
    header {
      display: block;
      align-self: right;
    }
    div {
      display: block;
    }
    #bodydiv {
      width: 800px;
    }
    #bodydiv img{
      width:50%;
      display:inline-block;
      height:50%;
      float:left;
    }

    #footerdiv {
      padding-top: 10px;
      display: block;
      clear: both;
      background-color: #00EBCF;
      font-size: 15px;
    }
    h1 {
      font-family: "Abril Fatface";
      background-color: #00EBCF;
      ;
      display: block;
      text-align: center;
    }

    @media only screen and (min-width: 800px) {
      h1 {
        font-family: "Abril Fatface";
        background-color: #00EBCF;
        display: block;
        text-align: center;
        font-size: 45px;
      }
      li {
        float: left;
        margin-right: 10px;
        display: inline-block;
      }
      a:link {
        text-decoration: none;
        color: black;
        font-family: "Abril Fatface";
        color: green;
        font-size: 20px;
        background-color: #94b8b8;
        border-radius: 10px;
        padding: 10px;
        position: relative;
        display: inline-block;
      }
      a:hover {
        text-decoration: none;
        font-family: "Abril Fatface";
        background-color: #A6A6A6;
      }
    }

    @media only screen and (max-width: 799px) {
      h1 {
        font-family: "Abril Fatface";
        background-color: #00EBCF;
        display: block;
        text-align: center;
        font-size: 30px;
      }
      li {
        float: left;
        margin-right: 10px;
        display: inline-block;
      }
      a:link {
        text-decoration: none;
        color: black;
        font-family: "Abril Fatface";
        color: green;
        font-size: 15px;
        background-color: #94b8b8;
        border-radius: 8px;
        padding: 8px;
        position: relative;
        display: inline-block;
      }
      a:hover {
        text-decoration: none;
        font-family: "Abril Fatface";
        background-color: #A6A6A6;
      }
    }

    @media only screen and (max-width: 557px) {
      h1 {
        font-family: "Abril Fatface";
        background-color: #00EBCF;
        display: block;
        text-align: center;
        font-size: 25px;
      }
      li {
        float: left;
        margin-right: 10px;
        display: inline-block;
      }
      a:link {
        text-decoration: none;
        color: black;
        font-family: "Abril Fatface";
        color: green;
        font-size: 10px;
        background-color: #94b8b8;
        border-radius: 4px;
        padding: 4px;
        position: relative;
        display: inline-block;
      }
      a:hover {
        text-decoration: none;
        font-family: "Abril Fatface";
        background-color: #A6A6A6;
      }
    }

    ul {
      list-style: none;
    }   
  </style>
</head>
<body>
  <header>
    <h1> Yaddah Yaddah blah blah</h1>
  </header>
  <div style="margin-bottom: 50px;margin-top: 10px">
    <ul>
      <li><a href="#">blah blah </a></li>
      <li><a href="#">blah blah</a></li>
      <li><a href="#">random text</a></li>
      <li><a href="#">more random text </a></li>
      <li><a href="#">blah blah </a></li>
    </ul>
  </div>
  <div id="bodydiv">
    <img src="https://via.placeholder.com/500" display="inline-block">
    <img src="https://via.placeholder.com/500" height="50%" display="inline-block" ; float="right" ;>
  </div>
  <div id="footerdiv">
    Yaddah yaddah yaddah
  </div>
</body>

Solution 2 :

welcome to SO! There’s enough wrong with your provided example I’d strongly suggest maybe brushing up on some beginner tutorials. Which I am not saying to be rude, just merely trying to help if you care to learn correct semantics and syntax without having to explain each issue that will only serve to frustrate you more with more buggy behavior especially as you try to support different browsers moving forward.

In the meantime, here’s an example of what I think you’re after? Cheers!

html {
  font-family: "Abril Fatface";
}

#header {
  text-align: center;
  background-color:#00EBCF;
}

#navigation {
  margin-top: 10px;
  margin-bottom: 50px;
  text-align: center;
}

#navigation ul {
  list-style: none;
}

#navigation li {
  margin-right: 10px;
  display: inline-block;
}

#bodydiv {
  width: 800px;
  
}

#footerdiv {
  padding-top: 10px;
  background-color: #00EBCF;
  font-size:15px;
}

.side-by-side-children-example {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


a {    
  font-size: 20px;
  background-color: #94b8b8;
  text-decoration: none;
} 
  
a:hover {
  text-decoration: none;
  background-color:#A6A6A6;
}
 

@media only screen and (min-width: 800px) {

  h1 {
    font-size: 45px;
  }   

  a {
    font-size: 20px;
    border-radius: 10px;
    padding: 10px;
  } 
  
}

@media only screen and (max-width: 799px) {

  h1 {
    font-size:30px;
  } 

  a {
    font-size: 15px;
    border-radius: 8px;
    padding:8px;
  }
  
}

@media only screen and (max-width: 557px) {

  h1 {
    font-size:25px;
  } 

  a {
    font-size: 10px;
    border-radius: 4px;
    padding: 4px;
  }
}
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">


<header id="header">
  <h1>Yaddah Yaddah blah blah</h1>
</header>

<nav id="navigation">
    <ul>
        <li><a href="#">blah blah </a></li>
        <li><a href="#">blah blah</a></li>
        <li><a href="#">random text</a></li>
        <li><a href="#">more random text </a></li>
        <li><a href="#">blah blah </a></li>
    </ul>
</nav>

<section id="bodydiv">

  <div class="side-by-side-children-example">
    <img src="https://picsum.photos/200">
    <img src="https://picsum.photos/200">
  </div>

</section>

<div id="footerdiv">
    Yaddah yaddah yaddah
</div>

Problem :

Im trying to float two images side by side inside a <div>. I´ve tried using the float and display=”inline block” attributes, in addition to setting the width of the images to 50%.

Yet somehow, they still appear above and below each other, as opposed to next to each other.

Here´s my code:

<head>

    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">

    <style type="text/css"> 

        * {font-family: "Abril Fatface";}

        header {display:block;align-self: right;}

        div {display:block; }
         #bodydiv {width:800px;}

        #footerdiv {padding-top:10px;display: block;clear:both;background-color:#00EBCF;font-size:15px;}

         h1 {font-family: "Abril Fatface";background-color:#00EBCF;;display:block;text-align:center;} 
        @media only screen and (min-width: 800px) {

            h1 {font-family: "Abril Fatface";background-color:#00EBCF;display:block;text-align:center;font-size:45px;} 

         li {float:left;margin-right: 10px;display: inline-block;} 






         a:link {text-decoration:none;color:black;font-family: "Abril Fatface";font-color:green;font-size:20px;background-color:#94b8b8;border-radius: 10px;padding:10px;position:relative; display:inline-block;} 
        a:hover {text-decoration: none;font-family: "Abril Fatface";background-color:#A6A6A6;}
          }

          @media only screen and (max-width: 799px) {

            h1 {font-family: "Abril Fatface";background-color:#00EBCF;display:block;text-align:center;font-size:30px;} 


         li {float:left;margin-right: 10px;display: inline-block;} 



         a:link {text-decoration:none;color:black;font-family: "Abril Fatface";font-color:green;font-size:15px;background-color:#94b8b8;border-radius: 8px;padding:8px;position:relative; display:inline-block;} 
        a:hover {text-decoration: none;font-family: "Abril Fatface";background-color:#A6A6A6;}
          }

           @media only screen and (max-width: 557px) {

            h1 {font-family: "Abril Fatface";background-color:#00EBCF;display:block;text-align:center;font-size:25px;} 

         li {float:left;margin-right: 10px;display: inline-block;} 



         a:link {text-decoration:none;color:black;font-family: "Abril Fatface";font-color:green;font-size:10px;background-color:#94b8b8;border-radius: 4px;padding:4px;position:relative; display:inline-block;} 
        a:hover {text-decoration: none;font-family: "Abril Fatface";background-color:#A6A6A6;}
          }
        ul {list-style: none;}

    </style>


</head>

    <body>

        <header> <h1> Yaddah Yaddah blah blah</h1></header>

        <div style="margin-bottom: 50px;margin-top: 10px">
            <ul>
                <li><a href="#">blah blah </a></li>
                <li><a href="#">blah blah</a></li>
                <li><a href="#">random text</a></li>
                <li><a href="#">more random text </a></li>
                <li><a href="#">blah blah </a></li>




            </ul>



        </div>

        <div id="bodydiv">

            <img src= "random.jpeg" width=50%; display="inline-block" >
            <img src= "r.jpg" width=50% height="50%" display="inline-block"; float="right"; >


        </div>

        <div id="footerdiv">

            Yaddah yaddah yaddah
        </div>




    </body>

What am I missing?

Thanks in advance!

Comments

Comment posted by Garr Godfrey

display is a style attribute, not a property. style=”display:inline-block” might do something for you. Or, if using float, put the floating element first.

Comment posted by rickyk95

Thanks! I´d forgotten the display attribute is a style attribute.

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022