Two buttons need to be displayed in one line with vertically aligned text, so I used display: table-cell. However, the two divs are sticking together and margin is not working. Is there a way to separate them?
Check out the code here: http://jsfiddle.net/sy8VC/
Is the presence of an additional <div> in the middle important to you? If not, you could use the following code:
<div id="select">
<div class="btparent" id="parent1">parent1</div>
<div style="width: 3px;display:table-cell;"></div>
<div class="btparent" id="parent2">parent2</div>
</div>
Have you considered utilizing
#choose .btparent { visibility: visible; }instead?
It would be beneficial to utilize the float property in your CSS instead of using display: table-cell.
After making adjustments to your code, here is the updated version. Also, if you opt for float, remember to incorporate a clear floating method within the container (#select).
#select {
margin: 0 auto;
max-width: 300px;
/* Clear floating method: use 'overflow:hidden' */
overflow: hidden;
}
#select .btparent {
border: 5px #AEE239 solid;
color: #2D332D;
text-align: center;
text-decoration: none;
vertical-align: middle;
font-family: Palatino;
font-size: 16px;
background: #D9E6BB;
padding: 10px;
width: 100px;
/* Updated here */
height: 20px;
display: block;
float: left;
margin-right: 10px;
/* ------------- */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
I trust this information proves to be useful for your project.
I'm facing an issue where my javascript code displays a confirmation dialog even when there is no unsaved data. I have simplified the problem to this bare minimum: window.addEventListener("beforeunload", (e) => { e.returnValue = null; retu ...
.container { height: 500px; width: 500px; position: relative; background: black; } .box { transform: skewX(20deg); width: 33%; height: 100%; position: absolute; } .first-box { background: purple; left: 0; } .second-box { background ...
After working on an HTML table element, I decided to include some space between the columns. To achieve this, I used the following css properties: table { border-collapse: separate; border-spacing: 36px 0px; } However, I encountered an issue when attem ...
My code includes a copy function that copies the data from a textarea to the clipboard when a button is clicked. The functionality works perfectly for the first textarea, but for subsequent textareas, the buttons do not perform the copy action. Check out ...
I've implemented code from Google's Material Design website for my project: https://material.io/components/web/catalog/lists/ Although it works well, the issue arises when more list entries are added and I have to scroll down to view them. The p ...
Struggling to create a BootStrap 4 Modal that is centered in the screen and adjusts its width based on content? You're not alone. Despite trying different approaches like the container fluid and CSS methods, achieving a variable width modal is proving ...
I am currently in the process of redesigning a website, and I've encountered an issue with the header markup. While the design looks fine on most browsers, it behaves strangely in Microsoft Edge on Windows 10. The phone number in the header is inexpli ...
I am looking for a way to showcase the echo text generated by PHP on a separate HTML page. I attempted to use jQuery for this purpose, but it proved unsuccessful. Please do not dismiss this question as I have gone through all the previous posts related to ...
Is there a way to merge two variables in SASS to create a single unit together? The current configuration is outlined below: $font-size: 16; $font-unit: px; $base-font-size: {$font-size}{$font-unit} !default; @if unit($base-font-size) != 'px' ...
I've been relying on this JSON ticker for the past month and it's been smooth sailing. However, today it suddenly stopped working. Any ideas on what might have caused this issue? $(function () { startRefresh(); }); function startRefresh() { ...
Currently, I am developing a filtering system for a mySQL database that utilizes dropdown menus. While the system functions correctly when using one filter, I am encountering difficulties in stacking multiple filters. To achieve this, I am retrieving the c ...
When looking for elements with certain properties, you can use queries like this; $$('*[title]') For example, if you want to find elements with a border or border-radius applied, standard queries may not work. $$('*[border-width]') // ...
As a newcomer to gulp, I am curious about the feasibility of achieving my desired outcome. Here is the structure of my projects: root | components | | | component_1 | | styles.scss | | actions.js | | template.html | | ... | componen ...
I have a log file that has the following format, <tr><td>AAA-application-01 <br> Quality_gate_failed_reason:xxxxxxx </td></tr> <tr><td>AAA-application-02 <br> Quality_gate_failed_reason:xxxxxxx </td>&l ...
One of the challenges I am facing in my React Project is with the Navigation Tab from material-ui. The issue I encounter is that the active tab should have a background color, and then revert to its original color when not active. However, the transparency ...
Trying to achieve a hover effect where product titles appear in a contained box when hovering over the product image on the bottom overlay, instead of below the image itself. Tried CSS code recommended by Shopify, but it had no effect: <noscript> ...
While working on a simple python project with an HTML file, I stumbled upon a helpful tutorial that outlined how to execute the code. Check out the provided HTML code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...
The burger menu image I have as a background image is not displaying in my navigation bar or on the page. I set it to appear when the page is responsive (max-width: 480px), but it still doesn't show. I even tried copying the code to my main CSS above ...
Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...
I have an array structured like this: Array ( [0] => Array ( [id] => 1 [child_name] => "Emma" [parent_name] => "Mr Brown" ) [1] => Array ( [id] => 2 ...