tags:

views:

43

answers:

4
+2  Q: 

Inline div acts like block when containing block input buttons.

I'm not great with CSS, but I want to create two select lists with a button panel between them to control the movement of selected items back and forth. I want it to look like this:

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

I have the following HTML:

<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>

And the following CSS:

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;
}

If I make the buttons block elements, their containing div starts acting like it's a block element too. I want the buttons to be block elements relative to each other, but I want the button panel to flow inline with the selects. I suspect there's something important I don't understand here. Help?

+3  A: 

  1. Block-level elements are not allowed within inline elements

  2. Usually one would float the three boxes one after the other keeping them blocks

div.clientsBox {
    float: left;
}

div#clientButtons {
    float: left;
    width: 15%;
}
Developer Art  2010-08-25 14:20:46
+2  A: 

I was able to accomplish the desired look with the following code. Not sure if you were trying to stay away from floats or what not, but this 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>
bradenkeith  2010-08-25 14:28:27
Also note I've updated your button values to include the correct HTML entity
bradenkeith  2010-08-25 14:33:27
+1 for that, thanks!
psicopoo  2010-08-25 15:52:41
A:  
<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>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>
</body>
</html>
Frank Malina  2010-08-25 14:30:24
You may need to add a clear:both on the element below, depends on how you use it.
Frank Malina  2010-08-25 14:32:18
A: 

There is a CSS property display: inline-block, but is is not supported by all browsers. With this slightly updated code

<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>

You can use this valid CSS to show what you want

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; }
Jan Turoň  2010-08-25 14:47:44

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?