asked on 2/7/2016

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 ?

CSS

Last Comment

Dave Ellis

1/20/2023

Manuel Marienne-Duchêne

2/7/2016

i think you would use flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Member_2_248744

2/8/2016

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 -

<style>

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

</style>
<hr>
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.

Francisco Igor

2/9/2016

See this fiddle
https://jsfiddle.net/FranIg/ka95o196/3/
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.

Manuel Marienne-Duchêne

2/9/2016

try this

https://jsfiddle.net/MMD1310/j8bv7fes/

<div class="container">
  <div class="pair">
    <div class="pair">
      <div class="description">Desc1</div>
      <div class="result">Result1</div>
    </div>
    <div class="pair">
      <div class="description">Desc2</div>
      <div class="result">Result2</div>
    </div>
  </div>
  <div class="pair">
    <div class="pair">
      <div class="description">Desc3</div>
      <div class="result">Result3</div>
    </div>
    <div class="pair">
      <div class="description">Desc4</div>
      <div class="result">Result4</div>
    </div>
  </div>
</div>
</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

ASKER CERTIFIED SOLUTION

Dave Ellis

1/20/2023

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

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