Put Element To The Right Side Of A Div

September 23, 2022 Post a Comment

I'd like to know how I can put these divs to the right side of the White div. http://prntscr.com/5jmm6q As you can see, it stacks under the left div, and I want it to be to the upp

Solution 1:

Bit change in HTML

<div id="base">
    <section style="color: black;">
      <!-- added new div here -->
  <div class="leftMain"><div id="leftmenu">
            <div class="titlebox"><div class="text"><?php echo NOM_SITE;?></div></div>
            <ul>
                <li><a href="#">DATA</a></li>
                <li><a href="#">DATA</a></li>
                <li><a href="#">DATA</a></li>
            </ul>
        </div>


        <div id="leftmenu">
            <div class="titlebox"><div class="text">MENU</div></div>
            <ul>
                <li><a href="#">DATA</a></li>
                <li><a href="#">DATA</a></li>
            </ul>
            </div>

        <div id="leftmenu">
            <div class="titlebox"><div class="text">MENU</div></div>
            <ul>
                <li><a href="#">DATA</a></li>
            </ul>
            </div>

        </div>

        <div id="rightmenu">
            <div class="titlebox"><div class="text">MENU</div></div>
            <div class="droite_text">
                <li><a href="forum.php?id=1">DATA</a></li>
            </div>
        </div>

        <div id="rightmenu">
            <div class="titlebox"><div class="text">MENU</div></div>
            <div class="droite_text">
            DATA
            </div>
        </div>

CSS changes

 .leftMain{
     float:left;
    }
#rightmenu {
   float:right;
    }

http://jsfiddle.net/2oqbh17L/1/

Solution 2:

Here you can see the example.http://jsfiddle.net/fL5gg70o/

#leftmenu {
 float:left;
}

And for right div:

#rightmenu {
 float:right;
 }

Solution 3:

You should put everything You want to have on left to one container #left for example and add float: left to it. Everything You want to have on right put in #right and add float: right

Also You have some mistakes in code (for example many elements with #leftmenu id - id should be uniqe

here is fiddle http://jsfiddle.net/rwspycft/1/

Baca Juga

Solution 4:

You would need to float those elements. However, if you float them they will flow out of the document flow. I'd try messing around with:

clear: both;

or/and

overflow: hidden;

http://jsfiddle.net/afgmyw4t/

Click the JSfiddle I have recreated your problem. I floated the elements left, and right. Then added clear:both; on the left elements to keep them within the document flow. They may need a few styling tweaks, if you have any trouble please leave a comment.

Solution 5:

You could wrap menus around separate div and set the float properties for both.

.rightt {
    float: right;
    vertical-align: text-top;
    margin: 0 auto;
    width: 50%;
}

.leftt {
    float: left;
    width: 50%;
}

<div id="base">
    <section style="color: black;">
        <div class='leftt'>
        <div id="leftmenu">
            <div class="titlebox"><div class="text"><?php echo NOM_SITE;?></div></div>
            <ul>
                <li><a href="#">DATA</a></li>
                <li><a href="#">DATA</a></li>
                <li><a href="#">DATA</a></li>
            </ul>
        </div>


        <div id="leftmenu">
            <div class="titlebox"><div class="text">MENU</div></div>
            <ul>
                <li><a href="#">DATA</a></li>
                <li><a href="#">DATA</a></li>
            </ul>
            </div>

        <div id="leftmenu">
            <div class="titlebox"><div class="text">MENU</div></div>
            <ul>
                <li><a href="#">DATA</a></li>
            </ul>
            </div>
</div>

<div class='rightt'>
        <div id="rightmenu">
            <div class="titlebox"><div class="text">MENU</div></div>
            <div class="droite_text">
                <li><a href="forum.php?id=1">DATA</a></li>
            </div>
        </div>
        <div id="rightmenu">
            <div class="titlebox"><div class="text">MENU</div></div>
            <div class="droite_text">
            DATA
            </div>
        </div>
        </div>

FIDDLE

Html5 Tips