ansaurus

Question

Answer 1

+4 A:

Float the divs in a parent container.

<div class="aParent">
<div>
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div>
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>
</div>

and style it like so:

.aParent div {
  float: left;
  clear: none; 
}

Robusto 2010-03-10 13:24:30

Answer 2

A:

Wrap them both in a container...

<div class='container'>

<div>
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div>
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

</div>

Then make the CSS look something like this:

.container{ float:left; width:100%; }
.container div{ float:left;}

Brant 2010-03-10 13:26:15

Answer 3

A:

You need to float the divs in required direction eg left or right.

Sarfraz 2010-03-10 13:26:27

Answer 4

A:

<html>
<head>
<style type="text/css">
#floatingDivs{float:left;}
</style>
</head>

<body>
<div id="floatingDivs">
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div id="floatingDivs">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

</body>
</html>

TheMachineCharmer 2010-03-10 13:27:46

Answer 5

+1 A:

<div>
<div style="float:left;width:45%;" >
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div style="float:right;width:45%;">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>

Clear must be used so as to prevent the float bug (height warping of outer Div).

style="clear:both; font-size:1px;

coderex 2010-03-10 13:27:58

What does the final nested div do? Why `clear:both`? why `font-size:1px` ?

Cheeso 2010-03-10 13:29:40

To clear the floats. I believe the "font-size: 1px" is an IE compatibility thing. I could be wrong.

psiko.scweek 2010-03-10 15:18:18

Answer 6

A:

Add a class to each of the divs:

<div class="source">
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div class="destination">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

With this CSS:

.source, .destination {
  float: left;
  width: 48%;
  margin: 0;
  padding: 0;
}
.source {
  margin-right: 4%;
}

That's a generic percentages solution - using pixel-based widths is usually much more reliable. You'll probably want to change the various margin/padding sizes too.

You can also optionally wrap the HTML in a container div, and use this CSS:

.container {
  overflow: hidden;
}

This will ensure subsequent content does not wrap around the floated elements.

DisgruntledGoat 2010-03-10 15:16:00

ansaurus

tags:

views:

answers:

How to Align Two Divs Horizontally

related questions