Changing space and width in Chrome and Safari - html

I have this table which has some data (input & select etc...), When any option is not selected, the spacing is correct in all browsers, but when I click on the select the spacing will be changed only in Safari and Chrome but it won't change in Firefox.
Chrome BEFORE clicking on Select
Chrome AFTER clicking on Select
Firefox BEFORE&AFTER clicking on Select
I did not include any code because it works fine in Firefox, and I thought maybe it's some css issue regarding browsers which I should put in my styles, but if needed I will also put my codes.
UPDATE
I added also the codes:
Working jsFiddle
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%">
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
<br />
</div>

One option is to set the select's containing div to position:relative;, and the select itself to position: absolute; That takes it out of the flow and thus prevents the resizing of elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
.rTableCell {position: relative;}
.rTableCell select {position: absolute; left: 20px; top: 12px;}
</style>
</head>
<body>
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px; " class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" >
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
<br />
</div>
</body>
</html>

A bit hackish, but if you're not opposed to using a little JavaScript, you can drop down the select on load and immediately close it back up.
window.onload=function(){
var sel = document.getElementById('campaignGoalId');
sel.size=sel.options.length;
sel.size = 1;
}
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%">
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
</div>

Related

How to add indexing marks and values to input type range

Hi I'm trying to add a label to the range slider I had tried using options but it is not working.
How can I make range value 100% it is showing an overall 4% because of Max="4" i want to increase 25% every slide and make it 100% in 4 steps
Can anyone suggest to me how do I add a label to the range slide.
var slider = document.querySelector('#slider');
function range_change_event() {
var percent = slider.value;
lbl.textContent = percent + '%';
}
slider.addEventListener('input', range_change_event);
<input id="slider" type="range" min="1" max="4" step="0" list="volsettings" />
<label id="lbl" id="value" for="slider">0%</label>
<datalist id="volsettings">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</datalist>
</div>
Trying to achieve desire output
¿something like this?
<div style="width: 300px">
<input style="width: 100%;" id="slider" type="range" min="0" max="100" step="25" />
<div style="width: 100%; display: inline-block; padding-left: 8px;">
<div style="display: inline-block; width:24%; float:left;">|</div>
<div style="display: inline-block; width:24%; float:left;">|</div>
<div style="display: inline-block; width:24%; float:left;">|</div>
<div style="display: inline-block; width:24%; float:left;">|</div>
<div style="display: inline-block; float: left;">|</div>
</div>
<div style="width: 100%; display: inline-block; padding-left: 5px;">
<div style="display: inline-block; width:24%; float:left;">0</div>
<div style="display: inline-block; width:24%; float:left;">1</div>
<div style="display: inline-block; width:24%; float:left;">2</div>
<div style="display: inline-block; width:24%; float:left;">3</div>
<div style="display: inline-block; float: left;">4</div>
</div>
</div>
<label id="lbl" id="value" for="slider" list="volsettings"></label>
<br />
<label id="lbl2" id="value" for="slider" list="volsettings"></label>
<script>
var slider = document.querySelector('#slider');
range_change_event();
function range_change_event() {
var percent = slider.value;
lbl2.textContent = (percent / 25);
lbl.textContent = percent + '%';
}
slider.addEventListener('input', range_change_event);
</script>

How to make Dropsdownlist + text inline under 768px?

I'm trying to make my dropdownlists I have created to be on the same line under 768px.
Right now, I'm using the form-inline, but that only works over 768px and not under.
Can any tell me how this can be done? Have tried with a list, but that did not work well.
As you can see in the fiddle, I want some text over each dropdownlist. I know i'm not using an label, cause this makes
My Jsfiddle
<div class="col-xs-12">
<div class="form-inline">
<div class="form-group">
Adult<br />
<select class="dropdown" id="Dropdown-adult">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
Child (3-15)<br />
<select class="dropdown" id="Dropdown-child">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Infant (0-3)<br />
<select class="dropdown" id="Dropdown-infant">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Pet<br />
<select class="dropdown" id="Dropdown-pet">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="padding-top15">
<button type="submit" class="bookingbutton">BOOK NOW</button>
</div>
</div>
</div>
Hope someone can tell me what I should look at.
Updated:
I think you guys have misunderstood what I was trying to tell. Right now when viewing the page over 768px the dropdownlists are inline as they should be.
If the webpage goes under 768px, all the dropdownlists going out of the inline, which it should not do. I just want to use 2 lines instead of 5-8
I just want it to look the same as it does over 768px. I have uploaded the image of how it should look like under 768px.
It's because Bootstrap add classes to make a responsive grid. If you want your lists to be always on the same line just add this in you css:
.form-group{
display:inline-block
}
JS Fiddle: https://jsfiddle.net/f8gfa768/1/
If I understood you correctly, you want to achieve under 768px width:
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
Those br tags are messing up your styles. Why don't you remove them, and add display: block/inline-block styles to select element, depending on the window width, which will replace that br:
select{
display: inline-block;
}
#media (min-width: 768px){
select{
display: block;
}
}
#Dropdown-adult {
height: 30px;
font-size: 15px;
width: 45px;
}
#Dropdown-child {
height: 30px;
font-size: 15px;
width: 80px;
}
#Dropdown-infant {
height: 30px;
font-size: 15px;
width: 80px;
}
#Dropdown-pet {
height: 30px;
font-size: 15px;
width: 45px;
}
#Dropdown-vehicles {
max-width: 100%;
height: 30px;
width: 100%;
font-size: 15px;
}
.bookingbutton {
background-color: #F6861F;
border-style: none;
height: 30px;
width: 110px;
color: white;
font-size: 15px;
text-align: center;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
}
.padding-top15 {
padding-top: 15px;
}
select{
display: inline-block;
}
#media (min-width: 768px){
select{
display: block;
}
}
<div class="col-xs-12">
<div class="form-inline">
<div class="form-group">
Adult
<select class="dropdown" id="Dropdown-adult">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
Child (3-15)
<select class="dropdown" id="Dropdown-child">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Infant (0-3)
<select class="dropdown" id="Dropdown-infant">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Pet
<select class="dropdown" id="Dropdown-pet">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="padding-top15">
<button type="submit" class="bookingbutton">BOOK NOW</button>
</div>
</div>
</div>
JSFiddle

3 side by side boxes, toggle which ones show by dropdownlist

http://jsfiddle.net/rnmk0zhz/5/
My JSFiddle is above
I have 3 drop down boxes, and below them are three divs which are hidden. When 'no' is selected I want the box directly under it to show.
I dont want it to always show on the left. I want the middle box under the middle dropdown list if no is selected in the middle, the other two to hide unless one of those are selected also. If the user selects 'no' in two boxes then I want two boxes to show.
I've tried floating them, but the padding is off when one hides and one shows. Absolute position wont work because there are rows of these and they'll overlap.
I hope I'm clear on what I'm trying to do here.
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;">
<span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;">
<span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;">
<span>box3</span>
<br/><br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
I think you can simplify it to this using jquery toggle:
$("[class^='box'").hide();
$("#ddl1").on("change", function() {
$('.box1').toggle($(":selected", this).text() == "no");
});
$("#ddl2").on("change", function() {
$('.box2').toggle($(":selected", this).text() == "no");
});
$("#ddl3").on("change", function() {
$('.box3').toggle($(":selected", this).text() == "no");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;"> <span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;"> <span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;"> <span>box3</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
After your comment about the position of the boxes i suggest to use visibility: hidden instead of display: none:
$("[class^='box'").css("visibility", "hidden");
$("#ddl1").on("change", function() {
$(":selected", this).text() == "no" ? $('.box1').css('visibility', 'visible') : $('.box1').css('visibility', 'hidden');
});
$("#ddl2").on("change", function() {
$(":selected", this).text() == "no" ? $('.box2').css('visibility', 'visible') : $('.box2').css('visibility', 'hidden');
});
$("#ddl3").on("change", function() {
$(":selected", this).text() == "no" ? $('.box3').css('visibility', 'visible') : $('.box3').css('visibility', 'hidden');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;"> <span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;"> <span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;"> <span>box3</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
Updating the answer after the change
Give a class say .box to the boxes and float it so that they are in one line. Also I have set width to the boxes as well as textarea giving !important. You should remove the inline widths of the textarea and the boxes and then remove this !important
.box {
width: 25% !important;
float: left;
margin-left: 5%;
}
.box textarea {
width: 100% !important;
}
See fiddle
try the below sample, hope this will help you
.box1, .box2, .box3{
visibility: hidden;
}
#wrapper{
width:95%;
overflow:auto;
}
Fiddle Demo

div outside the parent div

i'm trying to create a page structure, but i have a problem with position of div.
I have 2 div (purple) into a div parent (red). And after parent div, another div (green). I want to have the green div bottom the red one.
But the browser show me the purple div not into the red one (their parent), and so the green div is not under the red and purple divs, but only under the red one.
I make a snippet to show you:
div#form {
background: red;
}
div#search {
background: yellow;
}
div.accostati {
float: left;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>
Have you any idea how to show the purple div into the red one, in order to have green div under both purple and red divs...
Thank you!
Add overflow:auto to div#form:
div#form {
background: red;
overflow:auto;
}
div#form {
background: red;
overflow:auto;
}
div#search {
background: yellow;
}
div.accostati {
float: left;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>
You can use display: inline-block for both those divs
Like this
div#form {
background: red;
display: inline-block;
}
div.accostati {
display: inline-block;
margin: 5px;
background: purple;
}
div#form {
background: red;
display: inline-block;
}
div#search {
background: yellow;
}
div.accostati {
display: inline-block;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>

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?
Block-level elements are not allowed within inline elements
Usually one would float the three boxes one after the other keeping them blocks
div.clientsBox {
float: left;
}
div#clientButtons {
float: left;
width: 15%;
}
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='>' /><br />
<input type='button' id='removeButton' value='<' />
</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>
<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>
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; }