The inline div behaves like a block element when it contains block input buttons

I'm struggling with CSS, but I have a vision of creating two select lists with a button panel in between to facilitate moving selected items back and forth. Here's a visual representation of what I am aiming for:

+----------------------+-+       +----------------------+-+
|                      | |  ___  |                      | |
|                      | | |_>_| |                      | |
|                      | |  ___  |                      | |
|                      | | |_<_| |                      | |
|                      | |       |                      | |
|______________________|_|       |______________________|_|

At the moment, my HTML setup looks like this:

<div id='recipientSelection'>
    <div class='clientsBox'>
        <select id='allClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' />
        <input type='button' id='removeButton' value='<' />
    </div>
    <div class='clientsBox'>
        <select id='chosenClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
</div>

This is accompanied by the following CSS styling:

div#recipientSelection {
    margin-left: 50px;
    width: 90%;
}

select#allClients {
    width: 25%;
}

select#chosenClients {
    width: 25%;
}

div.clientsBox {
    display: inline;
}

div#clientButtons {
    display: inline;
    width: 15%;
}

input#appendButton {
    display: block;
}

input#removeButton {
    display: block;
}

However, when I set the buttons as block elements, it affects the containing div as well. My intention is to have the buttons act as block elements only relative to each other while ensuring that the button panel remains inline with the selects. There seems to be a key understanding that I am missing here. Any insights or guidance on how to achieve this would be greatly appreciated.

Answer №1

  1. An inline element cannot contain block-level elements

  2. It is common practice to float three boxes consecutively while maintaining their block display


div.clientsBox {
    float: left;
}

div#clientButtons {
    float: left;
    width: 15%;
}

Answer №2

I managed to achieve the desired layout using the code below. I'm not sure if you were looking to avoid floats or anything, but this solution does work.

CSS:

    div#recipientSelection {
        margin-left: 50px;
        width: 90%;
    }

    select#allClients {
        width: 100%;
    }

    select#chosenClients {
        width: 100%;
    }

    div.clientsBox {
        float:left;
        width: 30%;
    }

    div#clientButtons {
        float:left;
        width: 4%;
        margin-left:20px;
    }

HTML

<div id='recipientSelection'>
    <div class='clientsBox' style="clear:left;">
        <select id='allClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='&#62;' /><br />
        <input type='button' id='removeButton' value='&#60;' />
    </div>
    <div class='clientsBox' style="clear:right;">
        <select id='chosenClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
</div>

Answer №3

<html>
<head>
<style>
#recipientSelection{width:300px}
.clientsBox{width:40%}
#clientButtons{width:20%}
.clientsBox,
#clientButtons{display:block;float:left}
#clientButtons{text-align:center}
</style>
</head>
<body>
<div id='recipientSelection'>
    <div class='clientsBox'>
        <select id='allClients' size='5'>
            <option>example1</option>
            <option>example2</option>
            <option>example3</option>
            <option>example4</option>
            <option>example5</option>
            <option>example6</option>
            <option>example7</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' />
        <input type='button' id='removeButton' value='<' />
    </div>
    <div class='clientsBox'>
        <select id='chosenClients' size='5'>
            <option>example1</option>
            <option>example2</option>
            <option>example3</option>
            <option>example4</option>
            <option>example5</option>
            <option>example6</option>
            <option>example7</option>
        </select>
    </div>
</div>
</body>
</html>

Answer №4

Not all browsers support the CSS property display: inline-block. Here is an updated code snippet:

<div id='recipientSelection'>
    <div id='allClients'>
        <select size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='chosenClients'>
        <select size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' /><br/>
        <input type='button' id='removeButton' value='<' />
    </div>
    <div style="clear: both"></div>
</div>

To achieve the desired layout, you can utilize this valid CSS:

div#recipientSelection { width: 90%; margin: 0 auto; text-align: center; }
div#allClients { width: 25%; float: left; }
div#chosenClients { width: 25%; float: right; }
div#allClients select, div#chosenClients select { width: 100%; }
div#clientButtons { display: block; width: 15%; text-align: center; margin: 0 auto; }

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

Maximizing performance with internal Bootstrap?

An interesting concept to consider is that the fastest website could actually be an empty webpage. Each additional piece of data added compromises performance, yet it's the server's responsibility to send all the code to the client. When using ...

Adjustable height for text input field

Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...

Exploring Ember Octane (version 3.22 and above): benefits of using {{on 'click' this.function}} over traditional onclick={{this.function}} method

When working with Ember Octane, there are two different ways to attach a function to an event in an hbs file. The first way is the EmberJS approach: {{on 'click' this.function}} Alternatively, you can use the classic HTML method: onclick={{this ...

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

Is it possible to customize a row with checkboxes in ng2-smart-table when creating a new row?

When adding a new row, I would like a checkbox in the Status column and an input text field in the Image column. You can see an example image here. ...

The functionality of the anchor tag is not supported by the Safari browser on iPhone devices

Having some trouble with a named anchor tag in the iPhone Safari browser. It's functioning properly in desktop browsers, including Safari, but not working on mobile Safari. Odd! For instance, my URL appears as: http://www.example.com/my-example-arti ...

How jQuery Mobile Navbar behaves with 4 elements instead of 5

I am currently experimenting with jQuery Mobile and I have come across a discrepancy. The documentation states that the navbar should wrap on five elements, but in my testing, it is wrapping at only four elements. Is this the expected behavior? Here is th ...

`Is it possible to modify the background color of InputAdornment in Material-UI TextField?`

For the first 10% of the text field, one background color is used, while for the remaining 90%, another background color is applied. <TextField className={classes.root} type="text" placeholder="username" var ...

Increase the size of the class element when hovered over

I have assigned a class to the "next" and "previous" functions on my webpage, and I am interested in increasing their size on hover so that they take up more space and push the other elements aside. For example: When I hover over the NEXT button, I want i ...

Utilizing Data Filters to Embed HTML in Vue.js?

I have been attempting to utilize the Filter feature in Vue.js to insert HTML tags within a String. The documentation indicates that this should be achievable, however, I am not having any success. The objective is for the data to be just a String that is ...

Trouble with saving the positioning after drag and drop

I am currently facing an issue with my drag-and-drop script where the coordinates of positioned relative divs are not being saved in the same position when I reload. These divs are contained within a container with specific height and width, restricting t ...

Overflow of dropdown menus in HTML CSS

Hello, I am new to both html and stack overflow. Please forgive me if this question has already been asked, as I couldn't find anything (but maybe I didn't search enough?). I have tried using overflow and clear properties, but I am struggling to ...

Utilizing Node-Red: Linking an External CSS File with HTML Elements

If there are any resources on this particular topic available on the Node-Red website, please share them with me. My current project involves building a static website using HTML, JavaScript, and CSS with Node-Red. I am utilizing HTTP GET nodes to call my ...

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

Dynamic Positioning in Javascript Application

When working on a javascript project, I needed to create a div element. Here is the code snippet I used: const divStyle = {left: offsetPercent + '%', 'position': 'absolute'}; <div style={divStyle}/> However, I encounte ...

Reducing text size upon cell selection in Material UI Table

Seeking assistance in identifying the CSS property responsible for subtly shrinking text within cells when selected To see the issue, simply click on a cell in this code sandbox: https://codesandbox.io/s/material-ui-table-virtualized-t2xkt IMPORTANT: se ...

Adapting CSS styles according to the height of the viewport

Goldman Sachs has an interesting webpage located here. One feature that caught my eye is the header that appears as you scroll down, with squares changing from white to blue based on the section of the page. I'm curious about how they achieved this ef ...

Tips for speeding up the transition time of a floating header while scrolling

On this website , I am interested in adjusting the timing of the transition effect on the header background when hovering on scroll. Currently, the transition begins between two scrolls, but I would like it to start immediately after the first scroll. Can ...

Attempting to repair navigation menu on grou.ps website

Hey there, I'm currently working on improving the appearance of my website. The original site can be found at . After integrating it with the grou.ps community platform, I noticed that the navigation menu is not displaying correctly and the image is ...

What is the best way to format MySQL table data into rows and columns for display?

<?php mysql_connect('server', 'user', 'Pass'); mysql_select_db('add'); $query =mysql_query('select * from addimage'); while( $row = mysql_fetch_assoc($query) ) { echo "$row[url]"; } ?> This code ...