Left & right aligned divs on the same line without floats

HTML & CSS
1

Hello again,

I’ve searched around (perhaps I’m not using the right terms) but have failed to find a way of doing the following without floats.

I’d like two divs within a parent div to be positioned on either side within the parent on the same line, thus :

[LEFT <----- Space -----> RIGHT]

Is this easily achievable?

Many thanks,

WS

2

Yes. Discarding floats there are still a number of ways to do this.
display:table for the parent container and display:table-cell for the two sides.
Or inline-blocks:-

.sides {
    box-sizing: border-box;
    width: 50%; /* or less */
    display: inline-block
}

Or you could apply display:flex to the parent container.

3

flex isn’t IE compatible though is it? I’ll give the table version a go.

Thanks

4

The table won’t give you the space in the middle, though you could try making the divs inline and use text align.

It’s well supported now. Just IE9 and less doesn’t support it, but that’s pretty much dead now.

5

Not for some of our clients (civil servants) :tired_face:
oh well, at least they’ve stopped using IE6 (recently) :triumph:

6

:open_mouth:

7

A quick example. For the display table version, I had to nest the divs in the cell to align them to the sides.
With flex the justify-content: space-between takes care of that nicely.

8

It will if three cells are used. :sunglasses:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>three cells, two visible</title>

<style media="screen">
body {
    background: #f0f0f0;
    font: 1em/1.5em arial, helvetica, sans-serif;
 }
#row {
    display: table;
    max-width: 62.5em;
    padding: 1em;
    margin: auto;
    border: 0.06em solid #999;
    box-sizing: border-box;
    background: #fff;
 }
.outer-box {
    display: table-cell;
    width: 33.33%;
    padding: 1em;
    border: 0.06em solid #999;
    box-sizing: border-box;
    background: #ddd;
 }
#inner-space {
    display: table-cell;
    width: 33.33%; 
 }
@media screen and (max-width:30em) {
#row, .outer-box, #inner-space {
    display: block;
    width: auto;
   }
  }     
</style>

</head>
<body> 
<div id="row">
<div class="outer-box">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
  bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
  posuere ac lorem ut, suscipit tincidunt leo.
 </p>
</div>
<div id="innerspace">&nbsp;</div>
<div class="outer-box">
 <p>
  Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
  purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
  Integer sed elit eu orci blandit commodo in in erat.
 </p>
</div>
</div>

</body>
</html>

coothead

9

Here’s another version without extra mark up Just for fun :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	max-width:960px;
	background:#f9f9f9;
	margin:auto;
	text-align:justify;
	width:100%;
	font-size:0.1px;/* Kill white-space*/
}
.box {
	display:inline-block;
	background:red;
	border:1px solid #000;
	padding:5px;
	vertical-align:top;
	font-size:16px;
	font-size:1rem;
}
.wrap:after{
	content:"";
	display:inline-block;
	height:1px;
	width:0;
	font-size:0;
	line-height:0;
	overflow:hidden;
	margin:0 100% 0 0;
}
</style>
</head>

<body>
<div class="wrap">
  <div class="box"> Box on the left</div>
  <div class="box"> Box on the right</div>
</div>
</body>
</html>
1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.