Issue
I want to create a box for pros and cons just like Life Hacker which looks like this:
As a beginner in HTML CSS, I started and so far, I have this:
As can see there is too much overlapping. How do I fix this? Also, I would like to align the text with the list.
HTML:
.indent-1 {
float: left;
border: 2px solid orange;
border-radius: 5px;
padding-right: 10px;
padding-left: 10px;
}
.indent-1 section {
float: left;
}
<section class="indent-1">
<section>
<h3>What we like:</h3>
<ul>
<li>Pro 1</li>
<li>Pro 2</li>
<li>Pro 3</li>
</ul>
</section>
<section>
<h3>What we don't like:</h3>
<ul>
<li>Con 1</li>
<li>Con 2</li>
<li>Con 3</li>
</ul>
</section>
</section>
Any more suggestions to make it look pretty will be welcomed.
Thanks
Solution
Grid is the way to go here as you can use the grid-template-columns to set the width equally. Flexbox will do the same but it need a bit more work, especially if you want to stop your headers wrapping. There's a good introduction to grid from Kevin Powell and CSS tricks also have a good guide. It's very powerful and recommended to learn both flex and grid as they solve a lot of problems from the bad old days.
.indent-1 {
display: inline-grid;
grid-template-columns: 1fr 1fr;
border: 2px solid orange;
border-radius: 5px;
padding-right: 10px;
padding-left: 10px;
}
<section class="indent-1">
<section>
<h3>What we like:</h3>
<ul>
<li>Pro 1</li>
<li>Pro 2</li>
<li>Pro 3</li>
</ul>
</section>
<section>
<h3>What we don't like:</h3>
<ul>
<li>Con 1</li>
<li>Con 2</li>
<li>Con 3</li>
</ul>
</section>
</section>
Answered By - Adam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.