Menu
I was wondering how I would create multiple columns in a div. It's for a footer and I want a site map, links to social media etc.
I was going to use <multicol> but I then read that it was deprecated so it kind of put me off using it.
Basically I have an 80% wide DIV and I need three columns in it. Preferably each with a margin.
Css:
div.bottom
{
height: 200px;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: none;
margin-bottom: none;
border-top: 4px solid #00ccff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #575757;
}
I just need the HTML now. Thank you for your time.
365
Defining columns in HTML More columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML. <div class="row"> tag is used to initialize the row where all the columns will be added. <div class="column" > tag is used to add the corresponding number of columns.
First example: create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate . col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg, xl or xxl, while the second star represents a number, which should add up to 12 for each row.
Create three divs with float: left; (or right) and give them an exact width.
<div class="bottom">
<div style="float: left; width: 33%;"></div>
<div style="float: left; width: 33%;"></div>
<div style="float: left; width: 33%;"></div>
</div>
See it in action.
142
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
