I am facing a frustrating problem with the html layout of a form. Due to restrictions within a large framework, I am unable to make significant changes to the structure. However, I need to reposition a button to a more suitable location. While I have made some progress, I am not completely satisfied with the current solution. Maybe you could provide me with some fresh ideas on this matter. To illustrate my approach, here is a simplified version:
The layout consists of two container divs: top and bottom. The top container displays a fixed-width button on the left side, which may vary in width depending on its label translation. Meanwhile, the bottom container contains various elements, including a second button at the top. Although it functions properly, its appearance is not ideal. My goal is to visually move it into the top container since there is a logical connection between the two buttons. Unfortunately, directly placing it inside the top container is not an option currently. Therefore, I have utilized a fixed position for the second button, but adjusting its horizontal placement poses a challenge. Calculating the distance from the first button to prevent overlap while considering translations results in an unsightly gap between the two buttons.
In an attempt to improve the layout, I explored using a pseudo-element (::before) on the second button. Utilizing the translated label of the first button stored as a property, I attempted to replicate it in the CSS to create a before pseudo-element matching the length of the first button. The code example below demonstrates this technique.
My main struggle lies in positioning the pseudo element beneath the first button in the top container. This method was intended to indirectly align the second button accordingly, but unfortunately, it seems impractical. As someone new to coding and styling, I thought seeking guidance here might lead to a viable solution...
Below is a greatly simplified code snippet showcasing my approach:
Please refer to the provided JSFiddle link to interact with the code:
HTML:
<div id="top-container">
<button>multilingual button text</button>
</div>
<div id="bottom-container">
<h2>Some title opening the bottom container
<span class="into-top-container">
<button id="place-me" reference-text="multilingual button text">button to be placed</button>
</span>
</h2>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</div>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
#place-me {
position: fixed;
top: 0;
left: 400px;
margin: 5px;
background: yellow;
}
#place-me::before {
z-index: 0;
/*visibility: hidden;*/
position: absolute;
content: attr(reference-text);
margin: 0 5px;
padding: 0;
background: gold;
right: 100%;
}
Notes:
In the given code, the second button is positioned using
left: 400px;. I aim to modify this value but setting it toleft: 0does not yield the desired outcome...The visibility CSS rule for the pseudo-element is currently disabled for demonstration purposes
It should be noted that the second button is not nested within the top container but logically aligns below the title of the bottom container. The objective is to visually shift it upward into the top container, which is close to achieving the desired result except for the horizontal alignment...
For further clarity, here is a screenshot upon request:
https://i.sstatic.net/RmF2Z.png
This image extracted from the above JSFiddle includes a red ellipse highlighting the pair of elements I intend to relocate and a directional arrow indicating the preferable destination. The aspiration is to precisely position the second button adjacent to the first one without specifying a fixed horizontal coordinate. Hence, the pseudo-element serves as a placeholder. Once accomplished, I will conceal the pseudo-element and ensure proper alignment based on the length of the translated text.
The ultimate goal is illustrated in the following depiction: