Menu
I am using column count to allow my text to flow into two different columns but the top of the first column (leftmost) is lower than the other column?
#col {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}<div id="col">
<h3>
Options
</h3>
<h3>
Features and Benefits
</h3>
<h3>
Specifications
</h3>
<h3>
hey
</h3>
<h3>
30 Years Experience
</h3>
</div>I have included a limited section of the code, and even when I fill it with text, there is still a difference in the top of the columns.
709
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
For aligning columns to the left, the align-content property will set to 'flex-start'. For aligning columns to the right, the align-content property will set to 'flex-end'. For aligning columns to the extreme ends, the align-content property will set to 'space-between'.
Adjust vertical and horizontal alignment within Sections and Columns to achieve a “stretch-to-fill” layout. This allows elements of columns with different heights to align with one another.
On the Home tab, click Paragraph, and then click Align. Select the Align with option and then select the paragraph tag pertaining to the column one paragraph. Click OK.
Just a bit of CSS:
CSS:
#col {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
position:relative;
}
h3{display:inline-block;width:100%;}
// Best would be #col > * , because all direct children must be affected.
HTML:
<div id="col">
<h3>
Options
</h3>
<h3>
Features and Benefits
</h3>
<h3>
Specifications
</h3>
<h3>
hey
</h3>
<h3>
30 Years Experience
</h3>
</div>
Snippet:
#col {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
position:relative;
}
h3{display:inline-block;width:100%;}<div id="col">
<h3>
Options
</h3>
<h3>
Features and Benefits
</h3>
<h3>
Specifications
</h3>
<h3>
hey
</h3>
<h3>
30 Years Experience
</h3>
</div>Use :
#col h3 {
margin-top: 0;
}
#col {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
#col h3 {
margin-top: 0;
}<div id="col">
<h3>Options</h3>
<h3>Features and Benefits</h3>
<h3>Specifications</h3>
<h3>hey</h3>
<h3>30 Years Experience</h3>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
