What is a better vertical divider solution? - html

Question

better way of making a vertical divider in a centre of 2 divs. I want the divider to be in middle the "why choose" and "gallery"
like my example
This is what I've tried but if you have a better solution than this that'd be great. Giving 75px padding seems ok but I don't think its the best practice.
.why-choose-us{
padding: 0 10px;
width: 500px;
float: left;
ul li{
list-style-type: none;
margin-left: -30px;
line-height: 2;
clear: both;
}
}
.gallery{
width: 400px;
float: left;
padding-left: 75px;
border-left: 1px solid #c1c1c1;
img{
border-radius: 3px;
padding: 5px
}
}
So if divs are 400px each then few more px are still available for the divider, so let say .
http://jsfiddle.net/21g2Lona/1/

Answer 1

May be use CSS multicolumn layout?
-webkit-column-count: 2;
You would just need to place all the markup in one column, let the CSS create the separator for you.
PS: You would need to use appropriate vendor prefixes along with -webkit.

Answer 2

I am a huge fan of the CSS flexbox module for these kinds of layouts. You can read about it here. It's currently supported by 86% of the browsers people use according to http://caniuse.com/#feat=flexbox.
To make it show up correctly in all browsers you can use fallbacks and prefixes.
However, your solution is also fine. I just would use margin instead of padding if you're doing it this way. And of course, using float for these kinds of major layouts can lead to many problems and could require lots of additional CSS rules to fix.

Answer 3

I'm a fan of using box-sizing: border-box sizing whenever you need to divide a page vertically and include padding, margings, or borders.
The default box-sizing is content-box which will apply the width rule only to the content of the element--if borders, padding, or margin are added they will be in-addition to the width. border-box changes this so the width rule applies to the entire element--if borders, padding, or margin are added they will not increase the element's size, but rather consume space within the element.
Here's an updated Fiddle: http://jsfiddle.net/21g2Lona/5/
Here's the salient bits:
section {
float: left;
padding-left: 10px;
width: 50%;
box-sizing: border-box;
}
.gallery{
float: left;
border-left: 1px solid #c1c1c1;
...
}
The section rule does pretty much everything but add the border. The key bit is the combination of box-sizing: border-box and width: 50%. Together they mean that each <section> will be 50% of the width of their parent element, and that their width includes their border, margin, and padding. Regular box-sizing uses content-box, in which case the width rule applies only to the content--adding any padding, border, or margin will further widen the element's overall size on page.