locked
Centering 2 aligned Divs RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2037455357 posted

    Hello There.

    I have the following markup with 2 divs that are side by side. But they are Float left and Right, with an another div wrapped round to try and center the divs next to each other

    on the page.  How do I bring the 2 divs in the middle whilst still keeping them side by side.

    <!DOCTYPE html>
<html>

<style>

</style>

<div style="text-align:center;">
     <div style="float: left;">
        <span>div1</span>
        <select size="5">
           <option value="c1">India</option>
           <option value="c2">US</option>
           <option value="c3">UK</option>
           <option value="c4">Australia</option>
        </select>
		</div>
		
    <div style="float: right;">

        <span>div2</span>
        <select size="5">
           <option value="r1">1</option>
           <option value="r2">2</option>
           <option value="r3">3</option>
           <option value="r4">4</option>
        </select>
    </div>
</div>

</html>

    Kind Regards

    Rob

    Thursday, October 10, 2019 8:29 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User753101303 posted

    Hi,

    For the outer div you could try something such as <div style="margin:auto;width:20em"> (ie give  width and let margin to be sized automatically)

    I would also suggest to consider moving away from float and to give a try at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 10, 2019 8:40 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User753101303 posted

    Hi,

    For the outer div you could try something such as <div style="margin:auto;width:20em"> (ie give  width and let margin to be sized automatically)

    I would also suggest to consider moving away from float and to give a try at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 10, 2019 8:40 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2037455357 posted

    Execellent

    Thank you Patrice

    Working example below

    <!DOCTYPE html>
<html>

<style>

.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}

</style>



<div class="flex-container">
     <div>
        <span>div1</span>
        <select size="5">
           <option value="c1">India</option>
           <option value="c2">US</option>
           <option value="c3">UK</option>
           <option value="c4">Australia</option>
        </select>
		</div>
		
    <div>

        <span>div2</span>
        <select size="5">
           <option value="r1">1</option>
           <option value="r2">2</option>
           <option value="r3">3</option>
           <option value="r4">4</option>
        </select>
    </div>
</div>

</html>

    Thursday, October 10, 2019 9:33 AM