Is there a way for an element to automatically adjust its width to match another element?

I'm in the process of creating a new website...

Check it out here: www.girlzwithmoustaches.com/home2

One feature I have is a social media icon banner that I designed to be part of the header...

Below is the CSS code.. Now, I'm looking for a way to make sure that the top banner matches the width % of the image right below it. I want the social media icons to stay aligned with the rightmost portion of the image slideshow when the user resizes the window or based on their browser window size.

Any suggestions on how to achieve this? The social media icons are in a basic structure of ul with li elements.

 #headerwhat {
position: absolute;
top: 30px;
left:100px;
width: 70%;
height: auto;
vertical-align: middle;
horizontal-align: middle;

}

.smbanner {
width: 200px;
height: 50px;
position: relative;
float:right;
top: 0px;
left: 0px;

}

.smicons {
display: inline-block;
padding: 3px;
}

Answer №1

In order for the widths to align, you must maintain consistent percentages.

For example, if you set the #headerwhat width to 70%, the only way for them to resize proportionally is to also set the .smbanner width to 70%.

Does that clarify your question?

Answer №2

Insert the picture into the header and set the top banner to stretch across 100% of the width

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

Invisibility of form data on new page - PHP and Javascript

I have a webpage with multiple hyperlinks. Each hyperlink should redirect the user to a new page with the URL sent as POST data. What I can do: 1. Open the new page successfully. The issue I'm facing: 1. On the new page, I cannot access the URL ...

Is it common for content to duplicate when using the 'position: fixed' property in CSS media print?

Consider the following div element: ... <div id='section-to-print'>CONT /*Content*/ </div> ... Accompanied by this CSS code snippet: @media print { * { -webkit-transition: none !important; ...

Encountered an unexpected "<" error while using Ajax with MySQL

I am trying to accomplish a simple task - retrieve a table from a MySQL database. Previously, I was using basic MySQL code and it was working fine. However, after switching to MySQLi, I encountered an error: Uncaught SyntaxError: Unexpected token < ...

I clicked on the Bootstrap Navbar button but unfortunately nothing occurred

I'm encountering an issue with my navbar. When the screen size is reduced, a button appears, but clicking it does not trigger any action. Here's my code; however, I'm unsure why the button in the Navbar isn't functioning as intended. ...

Chrome's struggle with displaying multiple backgrounds on retina screens due to CSS complications

My goal is to create top and bottom shadows for a parent container when scrolling through the content. This effect works perfectly everywhere except on Chrome browser with retina screens, where it behaves strangely. The background becomes stuck at the top, ...

Issue with navigation links on HTML website not functioning as expected

I would like the dropdown menu items to be clickable. For example: Menu item: Services Sub items: - branding } These already have working links - marketing } However, when I try to replace '#' with a link for Services, it d ...

The issue with jQuery click function seems to be limited to Firefox

After a long hiatus from posting here, I hope this isn't breaking any rules. For those who prefer visual examples, you can visit the live page at: The drop-down menu functions perfectly in IE, Chrome, and Safari, but seems to be causing issues in Fir ...

Personalizing the design of Bootstrap

As a beginner in working with Bootstrap, I am currently focused on creating an index html page for an online shop. For reference, here is an example - https://jsfiddle.net/a393wtng/1/ Upon resizing the output frame, it becomes apparent that 4 products can ...

An issue occurred during the compilation of an Angular6 project

I am embarking on my first Angular project and may not grasp every detail perfectly. In my search for guidance, I came across the command "ng build --prod" on Google and decided to give it a try. Everything seemed to be going smoothly at first until an err ...

There seems to be an issue with the integration of Bootstrap in my JavaScript file

Is there a way to ensure that each new data entry in the array appears next to each other rather than stacking beneath one another? This is a JavaScript file with HTML written in Bootstrap format. const collegeData = [{ name: "University of Penn ...

Is there a method to automatically execute an 'onchange' function whenever a value is updated due to an AJAX response?

Many drop down menus are present on my page; <... onchange="callthisfunction(...)"...> While a manual change easily triggers the function, using ajax to load saved data does not register the value as changed and the function is not triggered. Is th ...

Creating an array using Vue.js

When I initialize a Vue data array like this [0: Object, 2: Object];, the console log in Vue shows the array as [0: Object, 1: undefined 2: Object];. This causes issues when iterating through with 'v-for="cell in row.cells"' as it results in tryi ...

Rotate the horizontal scroll of an inner div within an outer div using CSS

I am looking to create an outer div with horizontal scroll and inner div with vertical scroll where the inner div moves along with the outer div. <body> <div id="wrapper"> <div id="outer">content outer <div id="inner"&g ...

What is the best way to include the border-radius CSS property to a dropdown element in Ant Design?

Adding the border-radius CSS property to my dropdown component from ant design has been a bit challenging for me. I attempted to modify the antd-css file and include a style object directly into the component, but unfortunately, I did not achieve the des ...

I am looking to verify a time input using Joi

I have created a form with date and time input fields. I utilized the joi library for input validation to ensure that the date and time inputs are not left empty separately. Although I have managed to apply date validation successfully, I am facing challen ...

Which method is more effective: utilizing AJAX to retrieve page elements, or just toggling their visibility?

When it comes to web development, particularly in jQuery, should I preload my page and use jQuery to manipulate the DOM, or should I do it the other way around? This debate involves: <div id="item1" ></div> <div id="item2"></div> ...

I'm having trouble finding a solution to remove the white space

I've been troubleshooting a website and noticed some unexpected whitespace on the page. Even though I have set my page wrapper div and other elements to width: 100%, the content in between is not utilizing the full width of the screen. I suspect this ...

Retrieving text content within a span element using CSS

Here is the Jsfiddle that I experimented with http://jsfiddle.net/LpH8B/2/ <span>*</span> <br> <span>*</span> <br> <span>hdhdf</span> span[text='*'] { color:red; } I am looking to target ...

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

Ensuring text is perfectly centered within a div, regardless of its length

In the quest to center text of unknown length within a div, challenges arise. Constraints limit its size to a certain extent, making it unclear whether one or two lines will be needed. As such, traditional methods like line-height are not viable options. A ...