CODEWITHSUNDEEP
htmlcss
user818700
user818700

Reputation:

Footer Layout and Vertical Dividers

Just want to ask a few questions about this example:

enter image description here

What is the best way to do this 3 column layout these days? Of course there were tables and now there are divs etc etc. What the latest greatest way to accomplish this? If it was totally up to me I'd have a container div, containing 3 other ones. Set to width: 33%; and display: inline;

Also, how does one get those vertical dividers? Again as far as I know you use that in a table and only display certain borders by which you get a vertical rule effect.

But what's the best way these days to get this effect? Having html5 and css3 in your toolbox..

Thanks in advance!

Upvotes: 1

Views: 11711

Answers (6)

Jonatan
Jonatan

Reputation: 1196

The best way depends on what you want to achieve. How should the columns behave to resizing of the window etc.

If I was doing something like in the picture I would probably use a fixed width so I could have control of the line width for the text.

By using inline-block you can achieve columns that are collapsed and put under each other on a smaller screen (like a phone)

Try to figure aout the desired behavior first.

EDIT: Oops, I misread and confused horizontal with vertical ;-) I think the other answers explains his enough though.

Correct me if I'm wrong but I think that the css3 column property is for multiple columns for the same text body.

Upvotes: 1

Rain Diao
Rain Diao

Reputation: 926

jsFiddle demo: http://jsfiddle.net/yDXLp/3/

<style>
    footer {
        background-color: #eee;
        margin: 10px auto;

    }
    footer h2 {
        font-size: 1.5em;
        font-weight: bold;
    }
    footer > div,
    footer > .divider {
        display: inline-block;
        vertical-align: middle;   
    }
    footer > div {
        padding: 1%;
        text-align: center;
        width:30%;
    }

    footer > .divider {
        font-style: normal;
        height: 240px;
        border: 1px solid #888;
        -webkit-box-shadow: 1px 2px 1px #ccc;
        box-shadow: 1px 2px 1px #ccc;
    }
</style>

<footer>
    <div>
        <h2>Our Client</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        <button>Read more</button>
    </div>
    <i class="divider"></i>

    <div>
        <h2>Pay Rates</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum  </p>
        <button>Read more</button>
    </div>
    <i class="divider"></i>
    <div>
        <h2>About US</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        <button>Read more</button>
    </div>
</footer>

Upvotes: 4

kleinfreund
kleinfreund

Reputation: 6800

I recommend using box-sizing: border-box; (an alternative way to the standard css box model).

What does box-sizing: border-box; do? If you define the width of a div (e.g. 33%) and add borders and paddings it longer affects the calculated with of your div. It remains 33% of the parent with (33% - (borders + paddings)).

The standard box model adds them to the calculated with of 33% (33% + borders + paddings in our case).

HTML markup:

<div class="footer">
    <div class="footer-item item1"></div>
    <div class="footer-item item2"></div>
    <div class="footer-item item3"></div>
</div>

CSS:

.footer {
    box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}

.footer-item {
    width: 33%;
    float: left;
}

.footer-item + .footer-item {
    border-left: 1px solid black;
}

Upvotes: 2

Sowmya
Sowmya

Reputation: 26969

Try this

HTML

<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>

CSS

.outer {
    background: #734e91;
    padding: 12px;
}
.wrap {
    margin: 0 auto;
}
.sub {
    padding: 12px;
    width: 32%;
    height: 150px;
    background: #734e91;
    display: table-cell;
    border-right: solid #a175c4 1px;  
}
.sub:last-child {
    border: 0px;
}

DEMO UPDATED

Upvotes: 4

johnfound
johnfound

Reputation: 7061

The css3 way of doing columns is using "column-*" family of properties

They are now supported by all major browsers and there should be no problems with them.

Personally I use these styles in my home site and they provide pretty flexible (perhaps with some small shortcomings) layout formatting.

Upvotes: 1

Sparky
Sparky

Reputation: 763

Checkout Twitter Bootstrap(http://twitter.github.com/bootstrap/), Gumby Framework(http://gumbyframework.com/)

These frameworks may provide you readymade functionality for the horizontal bar. Else use borders. Set all borders except right as transparent in color

Upvotes: 1

Related Questions