Want to Move a Particular Div to Right

Want to move a particular div to right

You can use float on that particular div, e.g.

<div style="float:right;">

Float the div you want more space to have to the left as well:

<div style="float:left;">

If all else fails give the div on the right position:absolute and then move it as right as you want it to be.

<div style="position:absolute; left:-500px; top:30px;"> 

etc. Obviously put the style in a seperate stylesheet but this is just a quicker example.

How to move the right div to the right with css

It's really easy to do.
Just use float: right;

.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
float: right;
}

How to move the div element to the right side of the page?

The problem is here:

.top-nav{
display:flex;
}

Unless there is a reason for having flex which is not evident in your example, then simply removing it solves the problem (list div floats to the right).

body{    padding: 0px;    margin: 0px;    font-family: 'Roboto', sans-serif;    font-weight: 400;    color: #484848;    line-height: 1.43;}
p{ font-size: 16px; margin: 0px; padding: 0px;}
a: link{ font-size: 16px; text-decoration: none; margin: 0px; padding: 0px;}
a: visited{ text-decoration: none; padding: 0px; margin: 0px;}
h1, h2, h3, h4, h5, h6, ol, ul, li{ margin: 0px; padding: 0px;}
ul, ol{ list-style-type: none;}
::selection{ color: #fff; background-color: #333;}
::-moz-selection{ color: #fff; background-color: #333;}
.clearfix::after{ content: ""; display: table; clear: both;}
/* Top Nav CSS */
.top-nav{ position: fixed; width: 100%; height: auto; border-bottom: 1px solid #ccc;}
.site-logo{ float: left;}
.logo:link{ color: #484848; display: inline-block; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
}
.logo:hover { background-color: #f1f1f1;}
.logo:visited{ color: #484848;}
.logo img{ padding: 12px 18px; width: 100px; vertical-align: middle; border-right: 1px solid #ccc;}
#nav-search-wrapper{ float: left; display: inline-block; width: 490px; height: 100%;}
#nav-search-wrapper form input{ box-sizing: border-box; padding: 22px 10px 18px 52px; width: 100%; border: none;}

#nav-search-wrapper form input::-webkit-input-placeholder{ color: #666; font-size: 14px;}
.top-nav .list{ float: right; border: 1pt solid black;}
.top-nav .list li{ display: inline-block; line-height: 52.547px;}
.top-nav .list ul{ height: 100%;
}
<html><head>    <title>AirBnB</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">    <link rel="stylesheet" type="text/css" href="main.css"></head><body><!-- Top Nav --><div class="top-nav">    <div class="site-logo">            <a href="index.html"  class="logo">                <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg" alt="AirBnB">            </a>    </div>      <div id="nav-search-wrapper">            <form action="#" method="GET">                <input type="text" name="search" id="nav-search" placeholder="Search">            </form>    </div>    <div class="list">        <ul>            <li><a href="">Become A Host</a></li>            <li><a href="">Help</a></li>            <li><a href="">Sign Up</a></li>            <li><a href="">Log In</a></li>        </ul>    </div></div></body></html> 

Position a div container on the right side

Is this what you wanted? - http://jsfiddle.net/jomanlk/x5vyC/3/

Floats on both sides now

#wrapper{
background:red;
overflow:auto;
}

#c1{
float:left;
background:blue;
}

#c2{
background:green;
float:right;
}​

<div id="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>​

How to move a whole div to the right side

Here we go please use this

.d-flex.align-items-start.summary { display: flex; flex-direction: row;  justify-content:space-between;  margin:auto;  max-width:1170px;  width:100%;}
<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">
<img src="https://image.flaticon.com/icons/svg/147/147144.svg" style="width: 150px;max-height: 150px;clip-path: square(22px at center);" class="mr-3 d-none d-sm-block" alt="...">
<i (click)="inputFile.click()" *ngIf="isEditItems" style="color : white;left: 155px; position: absolute; top: 28px; padding: 3px; background-color: rgb(0, 195, 255); border-radius: 50%;font-size: 12px;" class="fa fa-pencil fa-lg" aria-hidden="true"></i>
<div> <div class="col-sm"> <div class="office-address-heading"> <b>Office Address</b> </div> <div class="d-flex align-items-center"> <i class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i> <address class="mb-0"> {{myprofile?.OfficeAddress}} </address> </div> </div> <hr /> <div class="col-sm"> <div class="office-address-heading"> <b>Communication Details</b> </div> <div class="d-flex align-items-center office-address-details"> <i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i> <div><a href="tel:1-562-867-5309">{{myprofile?.Phone}}</a></div> <span class="d-flex align-items-center mail office-address-details"> <i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i> <div> <a href="mailto:rafael.cepeda@lpl.com">{{myprofile?.Email}}</a> </div> </span> </div> </div> </div> </div>

How to move to right a few spaces in div element?

Use padding and margin to add spacing. You can also check the padding and margin of elements using devtools. Then look at the next option to the Styles.

To open devtools:

  • F12
  • Ctrl + Shift + I
  • RMB > Inspect

Sample Image

.pl-2 {
padding-left: 20px;
}

/* OR

.ml-2 {
margin-left: 20px;
} */
<div>
item
<div class="pl-2 ml-2">item 1</div>
<div class="pl-2 ml-2">item 2</div>
<div class="pl-2 ml-2">item 3</div>
</div>

How do I right align div elements?

You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.

How to make an html div to swiftly move to right (for less than 1 second) and disappear?

You can achieve this in so many ways :

1-using transition and css jQuery method:

//changing the style of the box using css method of jQueryvar animationDuration = 800;var animationRepetition = 10;//this array will be used to clear timeouts if user click while animation still goingvar timeoutIds = [];$("#css_method").click(function() {  for (var i = 0; i < timeoutIds.length; i++) {    clearTimeout(timeoutIds[i]);  }  timeoutIds = [];  for (var i = 0; i < animationRepetition; i++) {    var index = i;    var id1 = setTimeout(function() {
$("#box1").addClass("left-opacity-transition").css({ left: 500, opacity: 0 }); }, 2 * index * animationDuration) var id2 = setTimeout(function() {
$("#box1").removeClass("left-opacity-transition").css({ left: 0, opacity: 1 }); }, ((2 * index) + 1) * animationDuration); timeoutIds.push(id1, id2); }});
#box1 {  width: 100px;  height: 100px;  background-color: red;  position: relative;  left: 0;}
button { margin-top: 30px;}
.left-opacity-transition { -webkit-transition-property: left, opacity; /* Safari */ -webkit-transition-duration: .8s; /* Safari */ transition-property: left, opacity; transition-duration: .8s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script><div id="box1"></div><button id="css_method" type='button'>use css method</button>


Related Topics



Leave a reply



Submit