Position Right Without Float

How do you align a div vertically without using float?

In you case here, if you want to right-align that green button, just change the one div to have everything right-aligned:

<div class="action_buttons_header" style="text-align: right;">

The div is already taking up the full width of that section, so just shift the green button the right by right-aligning the text.

Right Side align without float

if you don't want use floats, just try with inline-block, like so:

#chatWindow {
   text-align: right;
}

.chat-bubble-user {
   display: inline-block;
   text-align: left; 
}

JsBin (tested on Fx20): http://jsbin.com/awimev/2/edit

Align div to right, without using float

Use display:inline-block your child element on section

add text-align:right :nth-child(2n+2) to your .javascript section element

.javascript:nth-child(2n+2) {
  text-align:right;
}

.js-wrapper {
    background-color: #8E8ABC;
    border-bottom-right-radius: 12em;
    border-top-right-radius: 12em;
    width: 40%;
    display:inline-block;
}
.js-wrapper2 {
    background-color: #8AACBA;
    border-bottom-left-radius: 12em;
    border-top-left-radius: 12em;
    width: 40%;
    display:inline-block;
}
.js-wrapper3 {
    background-color: #76B783;
    border-bottom-right-radius: 12em;
    border-top-right-radius: 12em;
    width: 40%;
    display:inline-block;
}

https://jsfiddle.net/lalji1051/qgfLnd1s/21/

Position right without float

You can fix this by applying a clearfix on the .navbar.

Add this

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Add the .clearfix class:

<div class="navbar clearfix">

The navbar will now expand vertically to compensate for the lack of horizontal space.

Horizontally align div without float

You can use display:inline-block or display:table-cell with the inner content.

Flex layout (See also T J's answer):

#parent{ display:flex; justify-content: space-between; }

JSFiddle

Table layout:

#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

Inline-block layout :

#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

Divs docked right without float

Absolute elements won't behave in a decent manner they won't bother any blocks in their ways.

Since the element header has a height you can add the cen element under it by giving top:"whatever the height the header is"

Here the height of the header is 225px

Stack the cen in a position of top: 255px so it will be below the header.

Try this...

*{box-sizing:border-box;}body{    width:900px;    height:850px;    margin-left:auto;    margin-right:auto;}
#header{    width:900px;    height: 225px;    position: absolute;    right:0px;    border:1px solid black;    top:0;}
#cen{    width: 900px;    height: 240px;    position: absolute;    right:0px;    top:225px;    border:1px solid orange;}

<!DOCTYPE html><html><head>    <meta charset="utf-8" />
    <title></title>    <link rel="stylesheet" type="text/css" href="main.css" />
</head><body>
    <div id="header">
    </div>
    <div id="cen">
    </div>
</body></html>

How to align elements in navbar right without using float?

You could either use

text-align:justify; + display:inline-block; DEMO, you can then use : vertical-align:middle; to align your element to each other's middle DEMO bis

display:flex; + justify-content:space:between; DEMO2 You can then use margin:auto; to center on both axis DEMO3

Align divs in same line without using float and width

Looking at the required layout, the borders and padding refer to the whole thing, not just the First div.

If you put both divs in a container and put that styling on the container, you could use flex to align the divs within container.

.container {
  display: flex;
  margin-bottom: 10px;
  margin: 15px 0px 0px 20px;
  padding-top: 35px;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}

.first {
  color: #377fd9;
  font-size: 1.375rem;
}

.second {
  cursor: pointer;
  text-align: end;
  padding: 8px 0;
}

.first,
.second {
  flex: 1;
}

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
</div>

Text-align without float for menubar with css

You can select the last element which is email with the nth-child() selector.
And the following code place the email tab to the right of the menu.

li:nth-child(4) {
    float: right !important;
}

Position Right Without Float

How do you align a div vertically without using float?

Right Side align without float

Align div to right, without using float

Position right without float

Horizontally align div without float

Divs docked right without float

How to align elements in navbar right without using float?

Align divs in same line without using float and width

Text-align without float for menubar with css

Related Topics

Leave a reply