Avatar of Dave Ellis
Dave EllisFlag for United Kingdom of Great Britain and Northern Ireland

asked on 

CSS needed to display results in a horizontal row

I have a application with a fluid design. I have a set of results that I want to display on a single line without using an HTML table.

When the viewport is 900+ pixels then the page would look like:-

Description A, Results A, Description B, Results B, Description C, Results C, Description D, Results D

The Descriptions would be right aligned and the Results left aligned.

When the viewport size is reduced then ideally I would have:-

Description A, Results A, Description B, Results B
Description C, Results C, Description D, Results D

and reduced further

Description A, Results A
Description B, Results B
Description C, Results C
Description D, Results D

Can anyone suggest a solution please ?

Avatar of undefined
Last Comment
Dave Ellis
Avatar of Manuel Marienne-Duchêne
Manuel Marienne-Duchêne
Flag of France image

greetings tigger44, , I have used the HTML line break as <br /> with a CSS class that sets it to -
     display: none;
and then when the width drops below an amount of px then I make the <br /> display, which will drop the following to the next line as in this HTML -

.br500, .br900{display:none;}
@media screen and (max-width: 900px){ .br900{display:inline; } }
@media screen and (max-width: 500px){ .br500{display:inline; } }

Description A, Results A,
<br class="br500" /> Description B, Results B,
<br class="br900" /> Description C, Results C,
<br class="br500" /> Description D, Results D

Open in new window

Outside of a container like a <table> you saying - "The Descriptions would be right aligned and the Results left aligned"  , , don't mean anything.
Avatar of Francisco Igor
See this fiddle
using a combination of "float" properties in nested divs

You can use a container for every description/result pair, and then nest this container in another one with the same properties. I added border colors in containers to clarify the view.
try this


<div class="container">
  <div class="pair">
    <div class="pair">
      <div class="description">Desc1</div>
      <div class="result">Result1</div>
    <div class="pair">
      <div class="description">Desc2</div>
      <div class="result">Result2</div>
  <div class="pair">
    <div class="pair">
      <div class="description">Desc3</div>
      <div class="result">Result3</div>
    <div class="pair">
      <div class="description">Desc4</div>
      <div class="result">Result4</div>

Open in new window

.container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;

.pair {
  float: left;
  white-space: nowrap;
  border: 1px solid #DDD;

.description {
  float: left;
  padding: 3px;
  width: 40%;
  padding-left: 5px;
  border: 1px solid red;

.result {
  float: right;
  padding: 3px;
  padding-right: 5px;
  width: 40%;
  border: 1px solid blue;

Open in new window

Avatar of Dave Ellis
Dave Ellis
Flag of United Kingdom of Great Britain and Northern Ireland image

Blurred text
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews


IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo