How do I align images inside of a container that contains a paragraph?

HTML & CSS
1

I have put the image inside of the paragraph tag itself and floated it right, however it moves it to the right but underlaps the container edge.

I have taken it out of the paragraph section as well and it still does the same. I have created containers as well for them. I want the image in the container with the paragraph. I have attached an image of the issue I am having as well as my css.

<!-- language: lang-css -->

    body {
      background-image: url(../images/keyboard.jpeg);
      background-repeat: no-repeat;
      background-size: cover;
      font-family: cursive;
    }


    /* GOOGLE FONTS*/

    @import url('https://fonts.googleapis.com/css2?family=Cookie&family=Fuzzy+Bubbles&family=Jost:wght@700&display=swap');
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Cookie';
      font-weight: 700;
    }


    /*ID Classes*/

    #mainTitle {
      color: #FFF;
      font-size: 5em;
      text-align: center;
      text-shadow: 5px 5px 10px #17e85f;
      text-decoration: underline solid;
      font-family: fantasy;
    }

    #container {
      border: 10px solid #FFF;
      margin: auto;
      margin-top: 10px;
      padding: auto;
      width: 50%;
    }

    #footer {
      color: #FFF;
      text-align: center;
      border: 2px;
      border-style: solid;
    }


    /*    REUSABLE CLASSES*/

    .navbar {
      background-color: #0a861d;
      border-radius: 30px;
      text-align: center;
    }

    .navbar li {
      display: inline-block;
      list-style: none;
      margin: 13px 20px;
      text-align: center;
    }

    .navbar ul {
      overflow: auto;
    }

    .navbar li a {
      padding: 3px 3px;
      text-decoration: none;
      color: white;
    }

    .search {
      float: right;
      color: white;
      padding: 12px 75px;
    }

    .navbar input {
      border: 2px solid black;
      border-radius: 14px;
      padding: 3px 17px;
      width: 129px;
    }


    /*SERVICES PAGE LIST*/

    .servicelist ul {
      line-height: 1.5em;
      margin: 5px 0 15px;
      padding: 0;
    }

    .servicelist li {
      font-size: 50px;
      font-weight: 500;
      background-image: linear-gradient(to left, rgba(60, 154, 118, 0.91), #15c723);
      color: transparent;
      text-align: center;
      background-clip: text;
      -webkit-background-clip: text;
    }

    .center {
      text-align: center;
    }

    .margin {
      margin-top: 10px;
    }

    .scontainer {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .box {
      float: left;
      width: 50%;
      color: #ccc;
      text-align: center;
      height: 50%;
      font-size: 50vmin;
      font-family: helvetica;
    }


    /* SINGLE CLASSES*/

    a:hover {
      box-shadow: inset 100px 0 0 0 #54b3d6;
      color: white;
    }

    h2 {
      color: #FFF;
      font-size: 2em;
      text-align: center;
      text-shadow: 5px 5px 10px #17e85f;
      text-decoration: underline solid;
      font-family: fantasy;
    }

    p {
      color: #b8dae2;
      font-family: 'Helvetica Neue', sans-serif;
      font-size: 1.3em;
      line-height: 24px;
      margin: 10px 10px 24px;
      padding: 30px;
      text-align: justify;
      border: 3px solid #FFF;
    }

    .service_styling {
      color: #b8dae2;
      font-family: 'Helvetica Neue', sans-serif;
      font-size: 1.3em;
      line-height: 24px;
      margin: 10px 10px 24px;
      padding: 30px;
      text-align: justify;
      border: 3px solid #FFF;
    }

    .imgcontainer {
      width: auto;
      height: auto;
      border: 2px solid red;
      float: inline-end;
    }

    .realImgContainer {
      width: auto;
      height: auto;
      border: 2px solid red;
      float: right;
    }

    img {
      /* max-width: 50%; */
      /* max-height: 50%; */
      /* border: 5px solid #FFF; */
      /* margin: auto; */
      /* margin-top: 10px; */
      /* padding: auto; */
      /* width: 50%; */
    }


    /*
    .imgHardware{
        float: right;
    }


    .imgSoftware{
        float: right;
    }

    .imgApp{
        float: right;
    }

    .imgCabling{
        float: right;
    }
    */

<!-- language: lang-html -->

    <!--  NAV BAR-->

    <nav class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="locations.html">Locations</a></li>
        <div class="search">
          <input type="text" name="search" id="search" placeholder="Search this website">
        </div>
      </ul>
    </nav>
    <h1 id="mainTitle"> Services</h1>

    <!--   MAIN SECTION-->

    <section id="container">
      <h2> Things We Do </h2>
      <div class="servicelist margin">
        <h2>Hardware</h2>
        <div class="service_styling">
          <span>
    					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
    					<div><img class="realImgContainer" src="images/cpusocket.jpeg" alt="computer socket"></div>
    					</span>
        </div>
        <div style="clear:both"></div>
        <h2>Software</h2>
        <p> We provide the latest software for all kinds of fields. We work directly with vendors to get the best rate - we provide competitive rates and offer affordable and simple subscription solutions - we also carry full version software that is subscription-free.
          <img class="imgSoftware" src="images/code.jpeg" alt="computer code"></p>
        <h2>Application development</h2>
        <p> We can create and deploy custom software for whatever task you need completed. Our seasoned developers specialize in C, C++ and Java. Allowing us to create versailte and flexible software. Our team will with work with you hand in hand to ensure you
          get exactly what you need. We will also provide 24/7 maintenance as well as upgrades on all of our in house software.
          <img class="imgApp" src="images/codedeveloper.jpeg" alt="someone coding"></p>
        <h2>Enterprise cabling</h2>
        <p> We have over 30 years of infrastructure cabling experience. We have in house techncians who can terminate and pull ethernet and fiber optic cabling. We use our own equipment and do all of our work in house - without the use of a third party. So we
          can give you a fair price as well as a clean and concise debriefing of the exact work we will be doing and its core benefits.
          <img class="imgCabling" src="images/switchandcable.jpeg" alt="switch and cable">
        </p>
        </ul>
    </section>

    <!--   SUB SECTION-->

    <section>
    </section>

    <!--   FOOTER-->

    <div id="footer">&copy; 2050</div>

<!-- end snippet -->
2

When you want text content to wrap to the side of a float then the floated object must be first in the html and then the content that follows (if allowed) will float around the floated element. If you expected a float to float up into the content above then that premise would mean the float would disappear though the top of the monitor :slight_smile:

Float the element first and then the content that follows will wrap assuming it has room to do so.

e.g.

<p><img class="realImgContainer" src="https://picsum.photos/id/237/100/100" alt="computer socket"> 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>

The css would be this:

  .realImgContainer {
      border: 2px solid red;
      float: right;
      margin:0  0 1rem 1rem
    }

Note that I changed your span to a p element as that is the semantic element to use for paragraphs. (Note that you cannot nest a div inside a span or a paragraph element).

You should also be aware that you will need to clear floats when you want the content to start below them.

I am also assuming that you wanted content to wrap around the float (if there is room) otherwise if you wanted a columnar layout then flex would be a better choice.

3

Thanks it worked perfectly! How can I become a CSS master like yourself? I am really interested in web development. I like the challenge as in figuring thiungs out until they work - although sometimes it can be frustrating.

4

I have another 3 of these containers - and each paragraph has a different amount of text - how can I adjust it so it will fit each? The sample I provided to you fits perfect but if I add more text, the picture becomes misaligned again.

5

What exactly do you mean by misaligned?

If you add more text to the example I gave above nothing different will happen. Maybe you misunderstand what float does?

The text will wrap to the side of the floated image and if there is more text it will continue under the image across the width of the container. The image becomes encased in the text like a float in the sea :slight_smile:

If instead you wanted 2 separate columns then you would use flex instead of float.

6

The image leaves the container. The lorem ipsum was just a sample. When I put tin the text I actually want to use, it’s not the same amount of characters - so it doesn’t fit. I changed the code to this:


   border: 2px solid #FFF;
      float: right;
      margin:0  0 14rem 14rem;
}

It fits - but doesn’t look natural. There are four paragraphs - each has an image so I created a class for each image(which I don’ think is necessary). I have attached an image for more clarirty.

Capture.PNG
Capture.PNG1128×763 86.5 KB

7

As I said that looks like you don’t want a float at all. :slight_smile:

Also you will rarely use massive margins like you have done as that is a magic number that will not work well in a responsive layout.

If you don’t want text to wrap under the image then use a 2 column flex approach. The container would be display flex and then the two direct children would each automatically turn into columns.

Flex will allow you to set the width of the columns and align as required.

Have a go yourself first as you said you.wanted to learn :).

If you get stuck then post back here and we’ll point you in the right direction :slight_smile:

Floats are removed from the flow and float out of their containers unless you use a clearing mechanism. I mentioned this in my first post. There are various methods to do this and the most common is called clearfix which you can find reference to easily on Google. You won’t need this with the flex approach.