How to Align Two Columns of Text in CSS

How to align two columns in HTML

Try this piece of code.

This is called a grid layout, which is currently one of the most used types of layouts ones. The main idea about it is just splitting your page into boxes and stacking them together.

.myself .property{  width:30%;  display:inline-block;  box-sizing:border-box;  text-align:right;  }
.myself .value{ text-align:left; padding-left:10px; width:70%; display:inline-block; box-sizing:border-box; }
<div class="myself"><div class="property">Name:</div><div class="value"> First Last</div> <div class="property">Age:</div><div class="value"> 21</div> <div class="property">Movie:</div><div class="value"> xxxxxx Last</div>   </div>

how to align two columns in a row CSS

Each column should have the same flex-basis, and since you want two columns, a 50% flex-basis works fine. I use the flex shorthand below to also tell the browser that flex-grow is not allowed while flex-shrink is allowed, which works well with your flex-wrap declaration on the parent (.row).

That gets you most of the way, but your buttons were still displayed inline, which caused them to stack in an undesirable way and to be inconsistent widths. Setting them to display: block fixes both issues, and allows you to drop the width: 100% that wasn't being followed anyways.

I removed the responsive adaptations because they were interfering with the presentation on StackOverflow.

section {  background-color: #ede6c1;  padding: 15px;  text-align: center;}
article { padding: 10px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.row { display: -ms-flexbox; /* IE10 */ display: flex; justify-content: center;}
.column { -ms-flex: 50%; /* IE10 */ flex: 0 1 auto; margin: 30px;}
.menu-button { display: block; box-sizing: border-box; background-color: rgba(85, 100, 83, 0.8); padding: 20px 0; font-size: 30px; margin: 10px 0; width: 200px; border-radius: 25px; box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);}
.menu-button:hover { box-shadow: 1px 1px 1px rgba(71, 69, 69, 0.787); color: black;}
a { color: black; text-decoration: none;}
a:hover { color: rgba(71, 69, 69, 0.787); text-decoration: none;}
<section>  <article>    <h1>Seattle Colours</h1>    <div class="row">      <div class="column">        <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Wood type</a>        <a class="menu-button" href="../Wood-Type/.html" role="button">Specification</a>        <a class="menu-button" href="../Wood-Type/.html" role="button">Pricing</a>      </div>
<div class="column"> <a class="menu-button" href="../Wood-Type/.html" role="button">News</a> <a class="menu-button" href="../Wood-Type/.html" role="button">FAQ</a> <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Images</a> </div> </div> </article></section>

How to align text differently in different columns using CSS columns property?

You can use JavaScript to check if the paragraph is on the left side of the container, and then add a class to right align the text.

The tradeoff is that it won't work for text that spills over between columns. Maybe the easiest way around that is to prevent it happening with CSS, but it can make the text imbalanced.

const center = document.querySelector('.twocol-text').getBoundingClientRect().width / 2;

[...document.querySelectorAll('.twocol-text > p')].forEach(p => {
const {
left
} = p.getBoundingClientRect();

if (left < center) {
p.classList.add('right-align');
}
})
.twocol-text {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
-webkit-column-gap: 84px;
-moz-column-gap: 84px;
column-gap: 84px;
-webkit-column-rule: 1px solid #496C4A;
-moz-column-rule: 1px solid #496C4A;
column-rule: 1px solid #496C4A;
}

.right-align {
text-align: right;
}

p {
margin-top: 0;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
<h1 class="centeralign largebotpad">Why no plastic?</h1>
<div class="twocol-text">
<p>Over the past few decades, plastic has increasingly become an integral part of our daily lives. The issue with our reliance on plastic, though, is that this relationship comes at significant environmental cost.</p>
<p>Water bottles, product packaging, textiles, grocery bags, and medical supplies, all contribute to the more than 400 million tons of plastic produced every single year worldwide. Of that, less than 10% is being recycled, and the vast majority is accumulating
in landfills or sloughing off in the natural environment as litter.</p>
<p>Plastic is also a threat to wildlife, creeping up in the food chain all the way to our plates. It is predicted that by 2050, there will be over 12 billion metric tons of plastic sitting in landfills. Yikes.</p>
<p>In 2018 we decided to make our own line of clean containers and housewares that will be part of the solution. We opted for tried-and-true stainless steel as our main canvas to create elegant and minimalist, sturdy, and easy to clean products for children
and adults alike, without all the nasties.</p>
</div>

Vertical align two columns, a shorter and a longer text

On top of flexbox, you can use display: table; and vertical-align http://jsfiddle.net/xxab2345/2/

Or even display: inline; or display: inline-block; and vertical-align
http://jsfiddle.net/xxab2345/3/

Align two columns in the same div horizontally

just use flex on the <article> tag

article {
margin: 0 auto;
padding-top: 80px!important;
padding-bottom: 10%!important;
width: 80%;
display:flex;
justify-content:space-around;
align-items:start;
}

#news, #date{
display:block;
text-align:center;
margin:0;
}

h2,
p {

font-size: 1em;
font-weight: normal;
}

p {
margin: 0 0 0 300px;
white-space: normal;
}
<h2 id='news'>NEWS</h2>
<article id="lyrics">
<h2 id='date'>31.08.2022</h2>
<p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
</article>

Align two columns with CSS

If you just want it this one place, you can do it with margin-left.

Another answer is to make your labels inline-block elements and give them all a set width.

How to align two columns of text in CSS

As per my comment, I think the best element for the job is an ordered list.

ol {   font-family: georgia, serif;   font-size: 16px;   font-weight: bold;}ol li span {   font-family: arial, sans-serif;   font-weight: normal;   font-size: 12px;}
<ol>  <li><span>Entry one<br>text on another line</span></li>  <li><span>Entry two</span></li>  <li><span>Entry three</span></li>  <li><span>Entry five</span></li>  <li><span>Entry six</span></li></ol>

How do I center align a two column list under a paragraph of text on a responsive website?

Make only one <div> as container and use display: flex.

Here's how I'd do it :

<div id="container">
<ul>
<li><i class="fa fa-check"></i> Item 1</li>
<li><i class="fa fa-check"></i> Item 2</li>
<li><i class="fa fa-check"></i> Item 3</li>
</ul>
<ul>
<li><i class="fa fa-check"></i> Item 4</li>
<li><i class="fa fa-check"></i> Item 5</li>
<li><i class="fa fa-check"></i> Item 6</li>
</ul>
</div>

And in CSS :

#container {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
/* it will calculate automatically, try space-between too */
}

#container ul {
max-width: 50%;
}

It should be okay like that. Take a look at the multiple CSS Flexbox properties, it will keep your code correct and easier !

how to align multiple line text as the column of the table

Just make your Angular create the following HTML structure:

.table {  display: table;}
.row { display: table-row;}
.cell { display: table-cell; padding: 0 10px;}
<div class="table">  <div class="row">    <span class="cell">December</span>    <span class="cell">15,2015</span>    <span class="cell">5 a.m.</span>  </div>  <div class="row">    <span class="cell">October</span>    <span class="cell">10, 2010</span>    <span class="cell">6 p.m.</span>  </div>  <div class="row">    <span class="cell">March</span>    <span class="cell">12, 2012</span>    <span class="cell">12 a.m.</span>  </div></div>


Related Topics



Leave a reply



Submit