Style your webpage with three images positioned at the left, center, and right

I'm having trouble arranging three images - one on the left, one on the right, and one in the center - with equal spacing on both sides. Unfortunately, the code I have doesn't seem to be working as expected:

 #header {
   background: lightgrey;
   background-color: rgba(256, 256, 256, 0.47);
   margin: 15px auto 0px auto;
   display: block;
   height: 80px;
   width: 965px;
 }
 #capçalera1 {
   float: left;
   margin-left: 15px;
   margin-top: 16px;
   margin-bottom: 16px;
 }
 #capçalera2 {
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 #capçalera3 {
   float: right;
   margin-right: 15px;
   margin-top: 18px;
   margin-bottom: 18px;
 }
<div id="header">
  <div id="capçalera1">
    <a href="http://www.uib.cat/">
      <img src="/images/logoblue2.png" width=138px height=44px/>
    </a>
  </div>
  <div id="capçalera3">
    <a href="http://www.iac3.eu/">
      <img src="/images/iac3ieec.jpeg" width=58px height=40px/>
    </a>
  </div>
  <div id="capçalera2">
    <img src="/images/test.png" width=531px height=51px/>
  </div>
</div>

The images on the left and right are positioned correctly, but the centered image appears "glued" to the left one. I aim to adjust its top margin and ensure it is equidistant from the left and right images.

Your assistance is greatly appreciated!

htmlcss

Answer №1

<div id="header">
    <div id="capçalera1">
   <a href="http://www.uib.cat/"><img src="/images/logoblue2.png" width=138px height=44px/></a>
   </div>
   <div id="capçalera3">
    <a href="http://www.iac3.eu/"><img src="/images/iac3ieec.jpeg"  width=58px height=40px/></a>
    </div>
       <div id="capçalera2">
   <img src="/images/test.png" width=531px height=51px/>
   </div>
</div>

That seems a bit complex...

How about simplifying it like this?

<div id="header">
 <ul>
   <li><a href="http://www.uib.cat/"><img src="/images/logoblue2.png" width=138px height=44px/></a></li>
   <li><a href="http://www.iac3.eu/"><img src="/images/iac3ieec.jpeg"  width=58px height=40px/></a></li>
   <li><img src="/images/test.png" width=531px height=51px/></li>
 </ul>
</div>

CSS

#header ul {
 margin: 0;
 padding: 0;
}
#header ul li {
 display: inline-block //or you can float them,
}
#header ul li:nth-child(even){
 margin: 0 10px;
}

Answer №2

If you want to create a layout using HTML and CSS, you can achieve it by using a single div container with three spans nested inside. Here is an example:

<div class="container">
<span>
    <a href="http://www.example.com/"> <img ... ></a>
</span>
<span>
  <a href="http://www.sample.com/">  <img ... ></a>
</span>
<span>
    <img ... >
</span>

To style the layout using CSS, you can use the following code:

.container{ width:50%; margin:0 auto; text-align:center}
.container span{ width:30%; margin:0 1%;  }

Answer №3

We can utilize the power of flexbox for this task! Simply remove any previous styling on the headers, and add the following code:

#header {
    display: flex;
    justify-content: space-around;
    background:  lightgrey;
    background-color:  rgba(256, 256, 256, 0.47);
    margin: 15px auto 0px auto;
    display: block;
    height: 80px;
    width: 965px;
}

It's important to note that support for this feature may be limited.

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

Unusual hue in the backdrop of a daisyui modal

https://i.stack.imgur.com/fLQdY.png I have tried various methods, but I am unable to get rid of the strange color in the background of the Modal. Just for reference, I am using Tailwind CSS with Daisy UI on Next.JS. <> <button className='btn ...

javascriptcssreactjstailwind-cssdaisyui

The vertical scrolling feature will come to a halt once it reaches a specific limit

Check out this website: How can I prevent the vertical scroll from continuing past the orange footer boundary? ...

cssscroll

What is the best way to add a checkbox tag in Rails using JavaScript?

I am attempting to use javascript to append the values from option fields to checkboxes in Rails. Here is a snippet of my javascript code: $("#regions option").each(function(){ $("#region-checkboxes").append('<li><%= check_box_tag "region ...

javascriptjqueryhtmlruby-on-railsruby

When anchor links (href) are incorporated within a flex layout and flex-direction is set to row, they may not function as

I've designed a website with three horizontal pages, each filling the entire screen. There's a fixed menu with links that scroll to specific pages when clicked. However, users can also scroll horizontally to navigate between screens. If two page ...

htmlcssflexbox

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Can anyone assist with implementing the following features in D3 JS? I need to fix the x-axis position so that it doesn't scroll. The values on the x-axis are currently displayed as numbers (-2.5, -2.0, etc.), but I want them to be shown as percentag ...

javascriptcsstypescriptd3.jsbar-chart

Tips for preventing PyCharm from automatically completing HTML and Django template tags

While working on Django templates in PyCharm, I noticed that it automatically closes the tags. This can be helpful when starting a new tag, but it becomes annoying when I want to place existing content within a different tag because I have to delete or mov ...

htmldjangopycharm

Purchased a website design - should I go with a table structure or CSS layout?

Recently, I decided to hire a new web designer for one of my projects. After multiple attempts, he finally delivered a beautifully designed webpage by sending me 20 poorly sliced images from Photoshop and an entire HTML file with table structure. When I r ...

htmlcsslayout

Triggering a Javascript load event after injecting HTML

Is there a way to detect when injected HTML, such as an iframe containing a video, finishes loading using JavaScript? I attempted to add JavaScript at the end of the injected content, but it is not running as expected. Furthermore, I prefer not to use jQ ...

javascripthtmlajaxdom

Basic code with an onclick function runs smoothly on Chrome, but encounters issues on Firefox

Struggling with a peculiar issue while trying to create a userscript using jQuery and JavaScript. The problem arises when attempting to add an onclick event to an image. Surprisingly, it works perfectly in Chrome (with TamperMonkey), but fails to respond i ...

javascripthtmlfirefoxonclickgreasemonkey

Obtain the row ID from a database by selecting checkboxes

I am facing a challenge when trying to remove a row from my MS Access database using checkboxes on my JSP page. Each row in the displayed database has a checkbox, but I am struggling to retrieve the rowId and link each checkbox with its respective row. Any ...

javascripthtmljspcheckbox

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

On my main page, I have an empty div with only a background image. To prevent it from collapsing, I created a sticky footer using the following code: * { margin:0; padding:0; } html, body, #wrapper{ height: 100%; } body &g ...

htmlcssfooter

What's the reason for the malfunction of  ?

How can I add space between firstname and lastname using   in my code? Despite setting the character set to utf-8, the space is not being rendered correctly. I even tried using tab space, but it didn't work as expected. export class AppCompone ...

htmlangulartypescriptecmascript-6

Can a dropdown menu be integrated into a text area?

Is it within the realm of possibility to achieve this? I believe it's worth exploring, so here goes my question. The Servlet API functions as a ticketing process or script that scans a form for specific form fields that match its predefined list of n ...

javascripthtmlajaxservlets

Get the Best Width for CSS3 Printing

After running my code to window print the table (report), the output is displayed below: https://i.sstatic.net/chZ2b.png This is the code I used: CSS @media print { body * { visibility: hidden; } #reportArea, #reportArea * { visibility: ...

javascripthtmlcss

Having trouble with video playback in the HTML5 media player on Codeigniter platform

I'm attempting to incorporate a video into my web application using the HTML5 media player within the Codeigniter framework. Below is the code snippet I have been working on: public function view($settings, Screen $screen) { ...

phphtmlcodeignitervideoweb-applications

Difficulty maintaining consistent line widths while setting up a CSS border grid on a table

What is the most effective method for creating a table with a 1px grid (internal and external)? Could it be possible that Chrome and Edge have issues with borders in certain scenarios? On this Codeply example, the standard approach is taken - setting bord ...

htmlcsshtml-table

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

htmlcss

Exploring the depths of CakePHP 3's debug_kit in a subdirectory

After developing locally, I transferred everything to the server. The functionality is working fine, but I am having issues with the debugkit not displaying correctly. I am unable to access the js, css files, etc. All I see is an empty box with a placehol ...

phpcsscakephp-3.x

Utilizing the p-input-icon-left component in conjunction with the p-autocomplete feature

How can I incorporate PrimeNG input field icons into a p-autocomplete field? For example: <span class="p-input-icon-left"> <i class="pi pi-search"></i> <input type="text" pInputText [(ngModel)]="value1" placeholder="Searc ...

htmlangularprimeng

A step-by-step guide on utilizing img src to navigate and upload images

I would like to hide the input type='file' element with id "imgInp" that accepts image files from users. Instead, I want them to use an img tag to select images when they click on a specific img tag. How can this be achieved using jQuery? Here i ...

javascriptjquerycsshtml