如何使页脚元素与CSS具有相同的宽度

Question

I have a footer for my project which has two images... each one of them is stuck to a particular corner. The lower left corner is the Division logo (system_footer_left); while the lower right corner is the Brand Logo (system_footer_right). What I would like to do is to have the size of the section to be the same as the width, even if the widths of the images are not the same.

How can I make this happen?

In my current project design, the left logo is about half the width of the right logo.

I am rusty with CSS, I have not been able to find any answers online. I did not want to set the width as a fixed percentage as I would like to have it be dynamic, so that if we change brand assets (logos) it will just "plug and play".

 #system_footer { padding: 5 5 0 5; position: fixed; left: 0; bottom: 0; width: 100%; background-color: rgba(5, 51, 107, .75); text-align: center; margin: auto; } #system_footer_center { padding: 10px; bottom: 0; background-color: transparent; color: #FFD700; text-align: center; font-size: 12px; font-weight: 500; margin: auto; word-wrap: break-word; text-shadow: 2px 2px 2px #FF8C00; } #system_footer_right { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; float: right; max-width: 30%; text-align: right; border: 3px outset rgba(208, 207, 204, .5); -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; -webkit-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); } #system_footer_right:hover { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; float: right; max-width: 30%; text-align: right; border: 4px outset rgba(231, 231, 229, 1); -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; -webkit-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); } #system_footer_left { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; float: left; max-width: 30%; text-align: left; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; border: 3px outset rgba(208, 207, 204, .5); -webkit-box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); } #system_footer_left:hover { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; float: left; max-width: 30%; text-align: left; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; border: 4px outset rgba(231, 231, 229, 1); -webkit-box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); } .cny-logo-sm { width: auto; max-height: 35px; object-fit: scale-down; } @media screen and (min-width: 300px) { #system_footer_center { font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1000 - 300))); } } /* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */ @media screen and (min-width: 1000px) { #system_footer_center { font-size: 16px; } } 

 <div id='system_footer'> <div id='system_footer_left'> <img src='../resources/logo/b_white_trans.png' alt='(Decorative) ' class='cny-logo-sm'> </div> <div id='system_footer_right'> <img src='.../resources/logo/cny.png' alt='CNY (Logo)' class='cny-logo-sm'> </div> <div id='system_footer_center'> <p>For technical support, please contact XXXX at <a href='mailto:DONTEMAIL@MY.BRAND.COM?subject=MCR System'>XXX@XXXX.XXX</a></p> </div> </div> 

I am trying to get the left and right footer element frames to be the same width dynamically.

Answer 1

You can try something like this. You can't by CSS set the same width for 2 elements based on their content, you can set the width in percent or in other relative units for both containers and align content inside. I have updated hover effects and sizes because it looks bad when content jumps. I remove duplicated CSS, you have same styles on the left and the right blocks. Images keep aspect ratio, updated styles. Sorry for my bad English.

 .cny-logo-sm { display: block; margin: auto; width: auto; max-width: 100%; max-height: 35px; object-fit: contain; } #system_footer { box-sizing: border-box; display: flex; justify-content: space-between; padding: 5px 5px 0; position: fixed; left: 0; bottom: 0; right: 0; width: 100%; background-color: rgba(5, 51, 107, .75); text-align: center; margin: auto; } #system_footer_center { flex: 1 0 auto; padding: 10px; bottom: 0; background-color: transparent; color: #FFD700; text-align: center; font-size: 12px; font-weight: 500; margin: auto; word-wrap: break-word; text-shadow: 2px 2px 2px #FF8C00; } #system_footer_right { order: 3; } #system_footer_left, #system_footer_right { display: inline-block; flex: 1 1 30%; /*max-width: 30%;*/ box-sizing: border-box; background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 15px; text-align: right; border: 3px outset rgba(208, 207, 204, .5); -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; -webkit-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); } #system_footer_left:hover, #system_footer_right:hover { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; max-width: 30%; border: 4px outset rgba(231, 231, 229, 1); -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; -webkit-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); } @media screen and (min-width: 300px) { #system_footer_center { font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1000 - 300))); } } /* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */ @media screen and (min-width: 1000px) { #system_footer_center { font-size: 16px; } } 

 <div id='system_footer'> <div id='system_footer_left'> <img src='https://via.placeholder.com/150x30' alt='(Decorative) ' class='cny-logo-sm'> </div> <div id='system_footer_right'> <img src='https://via.placeholder.com/270x270' alt='CNY (Logo)' class='cny-logo-sm'> </div> <div id='system_footer_center'> <p>For technical support, please contact XXXX at <a href='mailto:DONTEMAIL@MY.BRAND.COM?subject=MCR System'>XXX@XXXX.XXX</a></p> </div> </div> 

Answer 2

I am still not sure I understand you request but I think that this is what you are needing

#system_footer_left img,
#system_footer_right img{
    width:100%;
}

 #system_footer { padding: 5 5 0 5; position: fixed; left: 0; bottom: 0; width: 100%; background-color: rgba(5, 51, 107, .75); text-align: center; margin: auto; } #system_footer_center { padding: 10px; bottom: 0; background-color: transparent; color: #FFD700; text-align: center; font-size: 12px; font-weight: 500; margin: auto; word-wrap: break-word; text-shadow: 2px 2px 2px #FF8C00; } #system_footer_right { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; float: right; max-width: 30%; text-align: right; border: 3px outset rgba(208, 207, 204, .5); -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; -webkit-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); } #system_footer_right:hover { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; float: right; max-width: 30%; text-align: right; border: 4px outset rgba(231, 231, 229, 1); -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; -webkit-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: -1px -0px 1px 1px rgba(255, 255, 255, 0.75); } #system_footer_left { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; float: left; max-width: 30%; text-align: left; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; border: 3px outset rgba(208, 207, 204, .5); -webkit-box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); } #system_footer_left img, #system_footer_right img{ width:100%; } #system_footer_left:hover { background: rgb(170, 213, 255); background: -webkit-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: -o-linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); background: linear-gradient(rgba(170, 213, 255, 0.5) 8%, rgba(5, 51, 107, 1) 29%, rgba(5, 51, 107, 0.6362920168067228) 67%, rgba(170, 213, 255, 1) 100%, rgba(5, 51, 107, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aad5ff", endColorstr="#05336b", GradientType=1); padding: 14px; float: left; max-width: 30%; text-align: left; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; border: 4px outset rgba(231, 231, 229, 1); -webkit-box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); -moz-box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); box-shadow: 1px -0px 1px 1px rgba(255, 255, 255, 0.75); } .cny-logo-sm { width: auto; max-height: 35px; object-fit: scale-down; } @media screen and (min-width: 300px) { #system_footer_center { font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1000 - 300))); } } /* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */ @media screen and (min-width: 1000px) { #system_footer_center { font-size: 16px; } } 

 <div id='system_footer'> <div id='system_footer_left'> <img src='https://via.placeholder.com/500x60?text=Decorative' alt='(Decorative) ' class='cny-logo-sm'> </div> <div id='system_footer_right'> <img src='https://via.placeholder.com/250?text=logo' alt='CNY (Logo)' class='cny-logo-sm'> </div> <div id='system_footer_center'> <p>For technical support, please contact XXXX at <a href='mailto:DONTEMAIL@MY.BRAND.COM?subject=MCR System'>XXX@XXXX.XXX</a></p> </div> </div> 

Answer 3

If I understand what you're asking, you could use grid:

https://codepen.io/cschloegel/pen/wVzKZo

<div class="grid-container">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer">
    <div class="footer-left"></div>
    <div class="footer-center"></div>
    <div class="footer-right"></div>
  </div>
</div>

CSS:

.grid-container {
  background-color:lightgrey;
  height:100vh;
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 100px 1fr 100px;
  grid-template-areas: "header header header" "content content content" "footer footer footer";
}

.header { 
  grid-area: header;
  background-color: grey;
}

.content { grid-area: content; }

.footer {
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "footer-left footer-center footer-right";
  grid-area: footer;
  background-color:grey;
}

.footer-left { 
  grid-area: footer-left;
  border: 4px solid black;
  background-color:darkgrey;
}

.footer-center { grid-area: footer-center; }

.footer-right { grid-area: footer-right;
  border: 4px solid black;
  background-color:darkgrey;
}