In a div, i want 1 item to be left aligned and the other right aligned - css

Question

I have 2 elements:
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
and i wanted to make a align left and b to align right. Normally im used to leveraging float, but i wanted it to fit within the confines of the parent object for cleanliness.
Im trying to get A and B be clean and line up horizonally while 1 is on 1 size of the div.
I was trying various attempts of display:inline-block and then doing a flight right etc but that isnt getting the desired effect.
EDIT It seems that generally speaking, float right and left were working. The issue is that the bottom alignment is off which was annoying me.
If i am incorporating a float right and float left, it works based on the element, but if there a way to line it up so that both A and B are resting on the bottom of the parent?

Answer 1

have you considered flex ?
#parent {
display:flex;
justify-content:space-between;
}
div {
margin:auto 0 0;/* they line up from bottom in this margin case */
border:solid;
}
<div id="parent">
<div id="a">a</div>
<div id="b">b<br/>line</div>
</div>
or
#parent {
display:flex;
justify-content:space-between;
}
div {
border:solid;
/* no rules about behaviior makes each boxes of a row same height */
}
<div id="parent">
<div id="a">a</div>
<div id="b">b<br/>line</div>
</div>
now question doesn't say about size (width/height) of boxes :)

Answer 2

Here's another option (based off your new criteria)
HTML
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
CSS
#a, #b {
width: 50%;
display: table-cell;
vertical-align: bottom;
}
#parent {
width: 100%;
display: table;
}
FIDDLE

Answer 3

Try this:
<div id="parent">
<div id="a" style="float: left;">Hello</div>
<div id="b" style="float: right;">World!</div>
<div style="clear: both;"></div>
</div>
Need something in the middle of it?
<div id="parent">
<div id="a" style="float: left;">Hello</div>
<div id="b" style="float: right;">World!</div>
<div style="text-align: center;">holy schmoley</div>
<div style="clear: both;"></div>
</div>
All together now.
<style type="text/css">
#a {
float: left;
}
#b {
float: right;
}
#c {
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley</div>
<div class="clear"></div>
</div>
Of equal heights:
<style type="text/css">
#a, #b, #c {
height: 100%;
}
#a {
background-color: #ff0000;
float: left;
}
#b {
background-color: #00ff00;
float: right;
}
#c {
background-color: #0000ff;
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley</div>
<div class="clear"></div>
</div>
Aligned to the bottom using absolute, I recommend adding a margin to the #c div to prevent any odd overlapping:
<style type="text/css">
#parent {
position: relative;
}
#a, #b {
position: absolute;
bottom: 0;
}
#a {
background-color: #ff0000;
}
#b {
background-color: #00ff00;
right: 0;
}
#c {
background-color: #0000ff;
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley<br /><br /><br /></div>
<div class="clear"></div>
</div>
Float with Flex
<style type="text/css">
#container {
/* width: 600px; */
}
#parent {
position: relative;
}
#a {
display: flex;
float: left;
justify-content: space-between;
width: 100%;
}
#b {
background-color: #ff00ff;
float: left;
width: 100px;
}
#c {
background-color: #00ff00;
float: right;
width: 100px;
}
#d {
padding: 0 100px 0 100px;
width: inherit;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
<br /><br /><br /><br /><br /><br />Heres my content!!<br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
&copy Copyright
Float with flex, bottom positioning:
<style type="text/css">
#container {
/* width: 600px; */
}
#parent {
position: relative;
}
#a {
bottom: 0;
display: flex;
float: left;
justify-content: space-between;
position: absolute;
width: 100%;
}
#b {
background-color: #ff00ff;
float: left;
width: 100px;
}
#c {
background-color: #00ff00;
float: right;
width: 100px;
}
#d {
padding: 0 100px 0 100px;
width: inherit;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
<br /><br /><br /><br /><br /><br />Heres my content!!<br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
&copy Copyright
Using the flex float bottom as your full page layout:
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
}
#parent {
position: relative;
height: 100%;
}
#a {
display: flex;
float: left;
justify-content: space-between;
width: 100%;
position: absolute;
bottom: 0;
}
#b {
background-color: #ff00ff;
width: 100px;
float: left;
}
#c {
background-color: #00ff00;
width: 100px;
float: right;
}
#d {
bottom: 0;
left: 100px;
right: 100px;
position: absolute;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
Heres my content!!<br /><br /><br />
</div>
</div>
</div>
</div>

Answer 4

div#a{text-align:left;}
div#b{text-align:right;}
Or vice-versa will do the trick.

Answer 5

If you want to avoid float then you can use display: table; to achieve the desired effect. But this will need an additional wrapper.
CSS
#wrap {
display: table;
width: 100%;
}
#parent {
display: table-row;
width: 100%;
}
#a {
display: table-cell;
width: 50%;
background: green;
}
#b {
display: table-cell;
width: 50%;
background: red;
}
HTML
<div id="wrap">
<div id="parent">
<div id="a">AAAA</div>
<div id="b">BBBBB<p>
asdfafasfasdf
</p></div>
</div>
</div>
See my jsfiddle .

Answer 6

give 50% width to each div a and b and then make a float:left and b float:right .
and give equal height to both divs a and b .
try it
<div id="parent">
<div id="a">div a</div>
<div id="b">div b</div>
</div>
#a {
background:red;
float:right;
width:50%;
height:200px;
}
#b {
width:50%;
background:green;
float:left;
height:200px;}