# Help with CSS Columns

**URL:** <https://forums.realmacsoftware.com/t/help-with-css-columns/30077>\
**Category:** RapidWeaver Classic\
**Created:** [December 6, 2019, 3:42pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077 "2019-12-06T15:42:47Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [December 6, 2019, 3:42pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/1 "2019-12-06T15:42:47Z")

</div>

I need a little (or quite possibly a lot) of help with some CSS. I’m using Nick Cates Writer Theme for a blog and would like to create a “footer” to match the rest of the website (built in Foundation).

My test page is [here](http://one11sandbox.com/css/).

What I would like is the center image centered vertically in the footer, and the Terms and Conditions line to line up with Lebanon, TX line.

I tried following Net Ninja’s [tutorial](https://youtu.be/d-MHl_Q_hp8), but had no luck. I’m happy to pay someone for the time to write the code, please DM me.

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [December 6, 2019, 4:34pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/2 "2019-12-06T16:34:38Z")

</div>

> [@dropgates](#):
>
> would like to create a “footer” to match the rest of the website (built in Foundation).

Do you have a link to a sample page of what the footer is on the other pages?

---

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [December 6, 2019, 5:40pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/3 "2019-12-06T17:40:51Z")

</div>

@teefers, I do. [https://smarthomestennessee.com](https://smarthomestennessee.com)

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [December 6, 2019, 5:45pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/4 "2019-12-06T17:45:10Z")

</div>

@dropgates, How did you add the footer to the page? I didn’t see any extra content area.

---

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [December 6, 2019, 5:52pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/5 "2019-12-06T17:52:27Z")

</div>

In the html code section for that page.

 ![10%20AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/a/ba7f8af0d0c6af3275533e727760347d92b3c682.png)

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [December 6, 2019, 6:19pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/6 "2019-12-06T18:19:12Z")

</div>

Okay,

You could try something like this, I changed the code in the body section:

```auto
<div class="footer">
    <div class="left">
        <p><b>Contact:</b>
            <br>
            P: (615) 547-9222<br>
            E: info@smarthomestennessee.com<br>
            <br>
            <b>Address:</b>
            <br>
            910 Buck Run Court<br>
            Lebanon, TN 37087</p>
    </div>

    <img src="https://smarthomestennessee.com/files/small_p333_n45.png" alt="best of home guide award" 
        height="100" width="100">

    <div class="right">© 2019 Smart Home Protection Systems, Inc.<br>
        Licenses - TN C-1332, KY 0823471
        <br>Terms and Conditions</div><br>

</div>

```

And then replace the CSS you added with this:

```auto
.footer {
	display: flex;
    padding: 20px;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: rgb(14, 55, 109);
    color: white;
}
.right {
	font-size: 8pt;
    line-height: 160%;
    text-align: right;
}

```

---

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [December 6, 2019, 8:27pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/7 "2019-12-06T20:27:24Z")

</div>

@teefers Thank you. I truly appreciate it.

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [December 6, 2019, 9:02pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/8 "2019-12-06T21:02:35Z")

</div>

Hope it works for you. You can mess with the padding and color. You could also try changing the `justify-content` to `space-evenly` or `space-between`.

---

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [December 6, 2019, 9:18pm UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/9 "2019-12-06T21:18:18Z")

</div>

I added `<br>` just before the image and it shifted it over more center on the page. And I added the same image to simulate icons for now and changed the banner in the theme. I’m pretty sure the client is going to approve this.

Thank you again…

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [January 6, 2020, 7:18am UTC](https://forums.realmacsoftware.com/t/help-with-css-columns/30077/10 "2020-01-06T07:18:26Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.