CODEWITHSUNDEEP
htmlcssionic-framework
Yian
Yian

Reputation: 199

Two columns centered content with divider

I can't seem to get this one right. I am building a mobile app (ionic / AngularJS), and I want a bottom bar (footer), divided into two boxes with a gap in the middle. It each side would have the text centered directly in the middle of it.

It would fit full width (100%).

What I'm trying to do enter image description here

I have created it in a fiddle:

http://jsfiddle.net/MYwPt/112/

My HTML:

<div class="faketab">
    <table>
        <tr>
            <td>LEFT BOX</td>
            <td class="centerpiece"></td>
            <td>RIGHT BOX</td>
        </tr>
    </table>
</div>

CSS:

.faketab
{
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-color: #b2b2b2;
    background-color: #f8f8f8;
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
    color: #4d4d4d;
    position: absolute;
    bottom: 0;
    z-index: 5;
    width: 100%;
    /* height: 49px; */
    border-style: solid;
    border-top-width: 1px;
    background-size: 0;
}
.faketab table tr td {
    width: 2em;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    vertical-align: middle;
    font-size:18px;
}
.centerpiece{
    border-left: 0.1em solid black;
}

Upvotes: 1

Views: 1035

Answers (6)

Asons
Asons

Reputation: 87262

Here is a cleaned up and simple structure that does all you ask.

Edit: This fiddle has prefixed flex attributes.

Edit 2: This fiddle has display: table instead of flex and will work down to IE8.

.faketab {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 2px 2px;           /* space around buttons */
}
.faketab > div:first-child {
  margin-right: 2em;            /* space between boxes */
}
.faketab > div {
  width: 50%;
  height: 60px;
  font-size:18px;
  border: 2px solid #b2b2b2;
  background-color: #f8f8f8;
  color: #4d4d4d;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="faketab">
  <div>BUTTON</div>
  <div>BUTTON 2</div>
</div>

Upvotes: 1

shadeed9
shadeed9

Reputation: 1826

What you need to do is to add display: table-cell for each td and then change the code like the following:

HTML

<div class="faketab">
    <table>
        <tr>
            <td>LEFT BOX</td>
            <td>RIGHT BOX</td>
        </tr>
    </table>
</div>

CSS

.faketab table tr td {
    display: table-cell;
    width: 1%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    vertical-align: middle;
    font-size:18px;
}

.faketab table tr td:last-child {
  border-left: 1px solid black;
}

DEMO

You can do the same result with less markup and cleaner code that could work on mobile.

1. <a> links

HTML

<div class="tabs tabs--block">
  <a href="#" class="tabs__item">Left tab title</a>
  <a href="#" class="tabs__item">right tab title</a>
</div>

CSS

.tabs {
  width: 320px;
  margin: 100px auto;
  border: 1px solid #000;
}

.tabs--block .tabs__item {
  display: block;
  width: 50%;
  float: left;
  padding: 1em;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
}

.tabs--block .tabs__item:last-child {
  border-left: 1px solid #000;
}

.tabs--block:after {
  content: "";
  clear: both;
  display: table;
}

.tabs--block .tabs__item {
  display: block;
  width: 50%;
  float: left;
  padding: 1em;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
}

.tabs--block .tabs__item:last-child {
  border-left: 1px solid #000;
}

2. Flexbox

HTML

<div class="tabs tabs--flex">
<a href="#" class="tabs__item">Left tab title</a>
  <a href="#" class="tabs__item">right tab title</a>
</div>

CSS

.tabs--flex {
  display: flex;
}

.tabs--flex .tabs__item {
  flex: 0 0 50%;
  padding: 1em;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
}

.tabs--flex .tabs__item:last-child {
  border-left: 1px solid #000;
}

DEMO

Upvotes: 0

Szilard Vigh
Szilard Vigh

Reputation: 11

I prefer to use divs. You need to set only the display property to inline and the float to left. For the text text-align: center.

body{
  margin:0;
}
.faketab{
  display:inline-block;
  position: absolute;
  bottom: 0;
  width:100%;
  border-top:1px solid;
}

.tabs{
  float:left;
  width:49.5%;
  text-align:center;
}

.tabs:hover{
  color: #B0B0B0;
}

.vertical{
  float:left;
  border-left:1px solid;
  height:15px;
}
<div class="faketab">
  <div class="tabs">LEFT BOX</div>
  <span class="vertical"></span>
  <div class="tabs">RIGHT BOX</div>
</div>

Good luck!

Upvotes: 1

Fazil Abdulkhadar
Fazil Abdulkhadar

Reputation: 1101

Please use 'flex-direction' and padding for the class called 'faketab table tr td'

HTML

<div class="faketab">
        <table>
            <tr>
                <td>LEFT BOX</td>
                <td class="centerpiece"></td>
                <td>RIGHT BOX</td>
            </tr>
        </table>
    </div>

CSS

.faketab
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: horizontal;
    -moz-flex-direction: horizontal;
    -ms-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-color: #b2b2b2;
    background-color: #f8f8f8;
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
    color: #4d4d4d;
    position: absolute;
    bottom: 0;
    z-index: 5;
    width: 100%;
    /* height: 49px; */
    border-style: solid;
    border-top-width: 1px;
    background-size: 0; 
} 
.faketab table tr td {
    width: 1em;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    vertical-align: middle;
    font-size:18px;
    flex-direction:row; 
    padding:0 50px 0 10px; /* this */ 
}
.centerpiece{
    border-left: 0.1em solid black;
}

Upvotes: 0

prajakta
prajakta

Reputation: 162

Simply add following properties and can change width and height of div according to design you requires: 

.faketab td{
      float:left;
      width:45%;
      border:1px solid #000;
      height:100px;
    }
    .centerpiece{
      width:3% !important;
      float:left !important;
    }

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Used to this CSS border-spacing Property

table{border-spacing: 0;}


table{border-spacing: 0;}

.faketab
{
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-color: #b2b2b2;
    background-color: #f8f8f8;
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
    color: #4d4d4d;
    position: absolute;
    bottom: 0;
    z-index: 5;
    width: 100%;
    /* height: 49px; */
    border-style: solid;
    border-top-width: 1px;
    background-size: 0;
}
.faketab table tr td {
    width: 2em;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    vertical-align: middle;
    font-size:18px;
}
.centerpiece{
    border-left: 0.1em solid black;
}
<div class="faketab">
    <table>
        <tr>
            <td>LEFT BOX</td>
            <td class="centerpiece"></td>
            <td>RIGHT BOX</td>
        </tr>
    </table>
</div>

Upvotes: 0

Related Questions