One DIV displayed as two columns

2 Views

I’m modifying a WordPress theme that’s built upon Bootstrap and would like to get content that will appear in one div to be distributed over two even height columns. Can this easily be done via the Bootstrap framework or CSS?
Thanks.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. What you can do is use some of the new CSS3 elements.

    Please note that this will only work on the latest browsers and in most cases will require browser prefix’s

    div {
  -webkit-column-count: 2;/* Chrome, Safari, Opera */
  -moz-column-count: 2;/* Firefox */
  column-count: 2;
}
    <div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

    As you can see, you have to call the browser specific calls for webkit and moz. There’s a lot of extra functionality about setting widths and other such information so reading some docs on it will be useful.

    Below are a couple of links about how to usage and where its supported

    Read more: MDN

    Browser support: Caniuse

  2. this is the only available solution with bootstrap :

    LIVE DEMO

    <div class="row">
  <div class="col-md-6 col-xs-6 col-lg-6 lol1">somethink</div>
  <div class="col-md-6 col-xs-6 col-lg-6 lol2">somethink</div>
</div>

    if the content of your div is a text you can’t manage to display this content in two column , you have to use other div's inside this container .