CODEWITHSUNDEEP
htmlcss
TheKolanN
TheKolanN

Reputation: 71

How to make this two div's next to each other?

I got this HTML:

<div style="float: left; width: 600px; overflow: hidden;">
    <span class="text_vert"> Select Countries : </span><br />
    <div style="float: left;">
        <s:select style="width: 200px; height: 300px;" onchange="reload()"
             headerKey="-1" headerValue="Country Select" list="couList"
             listKey="idCountry" listValue="label" id="countryId" multiple="true"
             name="countryId">
        </s:select>
    </div>
    <span class="text_vert"> Select Languages : </span><br />
    <div style="overflow: hidden; position:relative;">
        <s:select style="width: 200px; height: 300px; overflow: hidden;"
             headerKey = "-1" headerValue="Language Select" list="langList"
             listKey="id" listValue="label" id="langId" multiple="true"
             name="langId">
        </s:select>
    </div>
</div>

I looked into many tutorials but no matter what I do I always get similar result:

Screenshot

How to align this two elements in one line, so the second list is not below the first?

Upvotes: 0

Views: 57

Answers (1)

PoulsQ
PoulsQ

Reputation: 2016

Try this :

<div style="float: left; width: 600px; overflow: hidden;">
    <div style="float: left;">
    <span class="text_vert"> Select Countries : </span><br />
        <s:select style="width: 200px; height: 300px;" onchange="reload()"
             headerKey="-1" headerValue="Country Select" list="couList"
             listKey="idCountry" listValue="label" id="countryId" multiple="true"
             name="countryId">
        </s:select>
    </div>

    <div style="float: left;">
        <span class="text_vert"> Select Languages : </span><br />
        <div style="overflow: hidden; position:relative;">
            <s:select style="width: 200px; height: 300px; overflow: hidden;"
                 headerKey = "-1" headerValue="Language Select" list="langList"
                 listKey="id" listValue="label" id="langId" multiple="true"
                 name="langId">
            </s:select>
        </div>
    </div>
</div>

For more explainations : Your float:left should be enclosing ALL of your HTML that should be at the same Y.

Upvotes: 2

Related Questions