Arranging Pictures Beside Text Using CSS

I have a puzzling issue that I cannot seem to find an answer for despite the countless times it has been asked.

In my footer, there is aligned copyright text, and I am attempting to add 3 logos to the right of it without any line breaks. However, when the screen becomes too small to display both the copyright and the logos side by side, I would like the logos to move below the copyright.

<footer>

        <div class="legal">
            <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
            <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

            <p>
                Trademark text
            </p>

            <br />
            <p>
                Copyright text
            </p>
        </div>

        <div class="logos">
            <a href="#" target="_blank">
            <img src="logo1.png" />
            </a>

            <a href="#" target="_blank">
                <img src="logo2.png" />
            </a>
            <a href="#" target="_blank">
                <img src="logo3.png" />
            </a>       
        </div>

</footer>

https://i.sstatic.net/LFias.png

Despite trying various methods such as wrapping copyrights and logos in separate divs and using float: left and right, I failed due to needing the copyright text to be centered within the footer as illustrated above.

Your guidance on this matter would be greatly appreciated.

htmlcssalignment

Answer №1

If you're looking to achieve a specific layout on your website, there are various techniques you can employ.

For instance, if the screen size is too small to accommodate both the copyright and logos together, consider moving the logos below the copyright section.

To accomplish this, you can utilize CSS Media rules in your stylesheet.


An alternative approach would be to implement CSS Flexbox for positioning elements on your page.

footer{
  width:100%;
  display:flex;
  flex-flow: row wrap;
  align-items:center;
}

.legal{
  width:80%;
  text-align:center;
}

.logos{
  width:20%;
  text-align:right;
}

@media screen and (max-width:800px){
  .legal{
   width:100%; 
  }
  .logos{
   width:100%;
   text-align:center;
  }
}
<footer>
  <div class="legal">
    <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
    <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

    <p>
      Trademark text
    </p>
    <p>
      Copyright text
    </p>
  </div>

  <div class="logos">
    <a href="#" target="_blank">
      <img src="logo1.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo2.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo3.png" />
    </a>       
  </div>
</footer>


Another option is to explore CSS Grid as a layout solution for your webpage.

footer{
  width:100%;
  display:grid;
  grid-template-rows: 1fr;
  grid-template-columns: 80% 1fr;
  align-items: center;
}

.legal{
  text-align:center;
}

.logos{
  justify-self: end;
}

@media screen and (max-width: 800px){
  footer{
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
  }
  .logos{
  justify-self: center;
  }
}
<footer>
  <div class="legal">
    <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
    <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

    <p>
      Trademark text
    </p>
    <p>
      Copyright text
    </p>
  </div>

  <div class="logos">
    <a href="#" target="_blank">
      <img src="logo1.png" />
    </a>

    <a href="#" target="_blank">
      <img src="logo2.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo3.png" />
    </a>       
  </div>
</footer>

For further guidance on utilizing Grid and Flexbox layouts, check out these helpful resources: CSS Flexbox | CSS Grid

Additionally, learn more about Media Rules by visiting this link: CSS Media Rule

I hope this information proves useful for your web design needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the height of the Iframe to match the content within it

After conducting my research, I have not been able to find a solution. Although I am not an expert in jQuery, it seems that the code is not functioning properly. Within the iframe are links that expand when clicked to display content. However, the height o ...

javascriptjqueryhtmliframeexpand

Is there a method in JS/jQuery to fill my input field with a constant string and ensure leading zeros are included?

I am looking to create an input textbox that starts with a fixed string followed by up to 6 leading zeros. As the user types in the input box, the leading zeros will be automatically removed once the maximum length of 6 characters is reached. The initial s ...

javascripthtmljquery

What are the strategies employed by Wix in utilizing mobile and desktop CSS?

While browsing through Wix, I stumbled upon something quite intriguing that left me puzzled. On a desktop with a width of 2560px, the Wix page loaded normally. But what caught my attention was when I resized the screen to make it smaller, either by using ...

htmlcssvelo

Is it possible to change the name using TextBoxFor in MVC2?

Can someone help me understand why the name attribute for my textbox is not changing even though I manually defined it like this: <%: Html.TextBoxFor(model => model.Name, new { @id = "txt1", @name = "txt1" })%> The id is updated to "txt1" but th ...

htmlasp.netasp.net-mvcasp.net-mvc-2html.textboxfor

Is it possible to achieve the same functionality as :first-child by employing :nth-of-type without a selector?

Currently tackling a console warning related to MUI5/emotion (I believe) I have noticed that the pseudo class ":first-child" might pose potential risks during server-side rendering. It may be worth considering replacing it with ":first-of-type". I wonder ...

cssmaterial-uiemotion

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

Attempting to fill a collection of JSON entities through a GET call?

When handling a GET request that contains a list of JSON objects, I want to display the data in an input field on the screen using ng-model for data binding. The structure of the JSON get request is as follows: [{"make":"Mahindra","vin":"1987","model":"XU ...

javascripthtmlangularjsjson

The JQuery loading symbol does not prevent keyboard interactions

I successfully implemented a Jquery busy indicator in my application using the following link: However, I noticed that even though it prevents users from clicking on input elements while loading, I can still navigate to these elements by pressing the tab ...

javascriptjqueryhtmlcssangularjs

Unable to align element to the left due to the position being below

<ul class="unlist clearfix"> <li class="clearfix"> <h3>List Item</h3> <time datetime="2013-08-29"><span>29</span> Ags 2013</time> </li> ...

csscss-float

Is there a way to display all of them inline in Woocommerce?

Can anyone assist with making each of these inline? https://i.sstatic.net/YF9bu.png <div class="atc_nsv"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <ul> <li><img class="ad lazyloaded" data-src="//cdn.shopif ...

javascriptphphtmlcsswoocommerce

When the FLASK button is triggered, retrieve data from the FLASK and display it

This is a unique test where I will create a button to retrieve information from a MySQL database. However, it's important to first understand this concept. So here is my custom text within the Flask framework: @app.route('/pythonlogin/home', ...

pythonhtmlflaskpost

Unraveling AngularJS: Mastering the Art of Interpolating Interpol

Trying to interpolate a string retrieved from the database, such as "Users({{users_count || 0}})", poses a problem. Using {{}} or ng-bind for interpolation does not work properly. The HTML code written is {{data.usersCount}}, but instead of ren ...

javascripthtmlangularjsinterpolationstring-interpolation

What is the best way to format this <li> element so that the second line of text starts directly below the beginning of the first line, rather than below the bullet point itself?

Is there a way to align the second row of a list item directly below the text and not below the bullet point? <ul class="arrow-list"> <li>Clear and consistent brand identity</li> <li>+47.08% Increase in website registration ...

htmlcss

The alignment of two elements is off in mobile display

Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing? <v-co ...

cssvue.jsflexboxvuetify.js

Challenges experienced during the process of uploading a website to the server

I seem to have encountered an issue where the Navigation background image is missing after uploading my website onto the server. Surprisingly, everything else seems to be working perfectly. What could possibly be the cause of this discrepancy? navbar-de ...

javascripthtmlcss

Struggling with inserting a fresh form into every additional <div> section

During my quest to develop a To-Do list application, I encountered a new challenge. In my current implementation, every time a user clicks on New Category, a new div is supposed to appear with a custom name and a specific number of forms. However, an issu ...

javascriptjqueryhtml

The text enclosed by a span located inside a div and identified by xpath

I am struggling to extract text from a span nested within another text in a div (highlighted in the image). https://i.sstatic.net/8uIWz.png This snippet of code is relevant ... <div id="groupBlock3"> <div class="groupBlockTitle& ...

htmlxpath

Creating consistent height for elements in different columns using Bootstrap 5

I'm struggling with keeping the ".item" elements equal height in different columns. Does anyone have a solution for this? <div class="container"> <div class="row"> <div class="col-8"> <h3& ...

cssflexboxbootstrap-5

Dynamic HTML5 elements in constant motion

I'm interested in creating an HTML5 canvas that features bouncing circle and square elements that interact with each other, potentially spinning upon collision. The best example I've come across so far is located at this link. var canvas = docu ...

javascripthtmlhtml5-canvascollisiongravity

Methods of using jQuery to conceal table rows according to child class name

I need to filter out rows in a table that do not contain a specific class. For instance: <tr id="game-22590" class="game"> <td class="pos left-edge"> <div>2</div> </td> <td class="cost"> < ...

javascriptjqueryhtmlhtml-tableclassname