How to make 1 div centre align and other float right using CSS

Question

I want to make my div2 to centre align and div3 to be at right.

I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">

<div style="height: 20px;width:20px;background-color: red;">
  Hello
</div>

<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>

visit below code I answer yesterday.[http://stackoverflow.com/questions/43450161/how-can-i-add-3-columns-in-an-html-page-using-css/43450339#43450339] — chirag solanki, Apr 18 '17 at 05:46
But is it OK if the two divs start overlapping on small screens? One of the strengths of floating is that it avoids overlap. — Mr Lister, Apr 18 '17 at 11:47

score 5 · Answer 1 · answered Apr 18 '17 at 05:56

Please try with this code:

<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">

<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
  Hello
</div>

<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>

Chathurika Senani · Answer 2 · 2017-04-18T06:01:12.683

1

Add style="margin: auto;" to your div2 element. And style="margin-left: auto;" to your div3 element.

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">

<div style="margin:auto; height: 20px;width:20px;background-color: red;">
  Hello
</div>

<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>

edited Apr 18 '17 at 06:01

answered Apr 18 '17 at 05:41

Chathurika Senani

716
2
9
25

It does work but it gives me result as in second image i attached. I want div 2 to consider width of main div and be align in center. Now it only consider width = main div - div3 and then get align to center which is not what is expected to happen. – shahista inamdar Apr 18 '17 at 05:52
I have edited the answer adding a code snippet. According to that what are the changes you need? – Chathurika Senani Apr 18 '17 at 06:02

score 1 · Answer 3 · answered Apr 18 '17 at 05:45

.main {
  display: block;
  position: relative;
  width:100%;
  text-align: center;
  border: 1px solid red;
}
.main .div1 {
  display: inline-block;
  border: 1px solid;
}
.main .div2 {
  float: right;
  border: 1px solid;
  display: inline-block;
}

<div class="main">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
</div>

score 1 · Answer 4 · answered Apr 18 '17 at 05:46

Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.

.center {
  margin: 0 auto;
}

.right {
  float: right;
}

In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:

<div class="outer">
    <div class="right"></div>
    <div class="center"></div>
</div>

https://jsfiddle.net/dcqpw12u/1/

score 1 · Answer 5 · answered Apr 18 '17 at 05:49

You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically

.main {
  text-align: center;
  background-color: red;
  height: 50px;
  position: relative;
}

.div2 {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.div3 {
  background-color: green;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

<div class="main">
  <div class="div2">SOME DIV 2</div>
  <div class="div3">SOME DIV 3</div>
</div>

It worked for me. Thanks – shahista inamdar Apr 18 '17 at 06:55 — shahista inamdar, Apr 18 '17 at 06:55

score 1 · Answer 6 · answered Apr 18 '17 at 06:08

.contentmain{
    background: white none repeat scroll 0 0;
      color: black;
      height: auto;
      width: 35%;
      float: left;
      background:red;
  }
  .contentCenter{
    background: white none repeat scroll 0 0;
      color: black;
      height: auto;
      width: 30%;
      float: left;
      background:yellow;
  }
  .contentRight{
    background: white none repeat scroll 0 0;
      color: black;
      height: auto;
      width: 35%;
      float: right;
      background:red;
  }

<div class="contentmain">
  Main<br/>
  Content<br/>
 </div>
 <div class="contentCenter">
  Center<br/>
  Content<br/>
 </div>
 <div class="contentRight">
  Right<br/>
  Content<br/>
 </div>

This might be fulfill your requirement.

score 1 · Answer 7 · answered Apr 18 '17 at 07:21

<!DOCTYPE html>
<head>
<style>
.div0 {
  text-align: center;
  border-style: solid;
  border-width: 5px;
  height: 50px;
  border-color: red;
  position: relative ;
}
.div1 {
  border-style: solid;
  border-width: 4px;
  right: 0%;
  height: 40px;
  width:40px;
  border-color: green;
  position: absolute;
 }

 .div2 {
  left: 50%;
  right:50%;
  width:40px;
  position: absolute;
  border-style: solid;
  height: 40px;
  border-width: 4px;
  border-color: green;
    }
</style>            
</head>
<body>
<div class="div0">
  <div class="div1"><p>div1</p></div>
  <div class="div2"><p>div2</p></div>
</div>  

</body>
</html>

basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on Position and right property left property could be found on the site.

what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute

To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.

How to make 1 div centre align and other float right using CSS

7 Answers7