CODEWITHSUNDEEP
htmlcss
DPMC87
DPMC87

Reputation: 85

Table creation, how to align one column left and having two rows to the right

I'm trying to have a column aligned left and then two rows to the right of it in a table like in my picture. Red and blue boxes are both supposed to be 50% of the height and 60% of the width. (sorry about the crude photo, Photoshop bugged out on me and paint isn't my forte) I've tried to create the table but can only seem to get it in rows.

Also in one of the boxes I have text that I want to be on the bottom of the table. I've tried to achieve this using vertical-align:bottom; but I'm not sure if this is the best way to achieve this.

I understand this is a simple question but can't wrap my head about it. Here is my fiddle:http://jsfiddle.net/DPMC87/fmx9o2a2/enter image description here

Upvotes: 1

Views: 2916

Answers (4)

Marty Cortez
Marty Cortez

Reputation: 2343

No need for floats to do this!

You can do this with flexbox.

There are a few benefits to going with flexbox over floats:

  1. Much less CSS
  2. No clearfix hacks
  3. Flexbox more appropriately fits your use case

enter image description here

.container {
    display: flex;
    height: 500px;
}

.left {
    flex: 1;
    background-color: black;
}

.right {
    flex: 1.5;
    display: flex;
    flex-direction: column;
}

.right__red {
    flex: 1;
    background-color: red;
}

.right__blue {
    flex: 1;
    background-color: blue;
}
<div class="container">
    <div class="left"></div>
    
    <div class="right">
        <div class="right__red"></div>
        <div class="right__blue"></div>
    </div>
</div>

The key is setting the .right div to having 1.5 times the width of the .left div. This will give it 60% of the width.

Use flex-direction: column to allow the red and blue cells to take up 50% of the height of the container, no matter how tall it is.

Here is a great source of info on flexbox. In some ways I think that flexbox is a step above floats, which were a step above table-based layout.

Upvotes: 1

zer00ne
zer00ne

Reputation: 43910

The explanation is in the table.

html {
  box-sizing: border-box;
  font: 400 16px/1.4'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
}
body {
  width: 100vw;
  height: 100vh;
}
.main {
  table-layout: fixed;
  border-collapse: collapse;
  height: 100%;
  width: 100%;
}
.black {
  background: black;
  width: 40%;
}
.blue {
  background: blue;
  width: 60%;
  height: 50%;
}
.red {
  background: red;
  width: 60%;
  height: 50%;
}
td {
  color: white;
  vertical-align: bottom;
}
<table class="main">
  <tbody>
    <tr>
      <td class="black" rowspan='2'>
        <h3><u>It's Very Responsive</u></h3>
        <p>This is the 1st column. To extend this cell, use the rowspan attribute.</p>
        width: 40% height: 100%
      </td>
      <td class="blue">
        <h3><u>It's Designed Tight, No Misalignments</u></h3>
        <p>This is the second column and the first row.</p>
        width: 60% height: 50%
      </td>
    </tr>
    <tr>
      <td class="red">
        <h3><u>There are Essential Properties in .Main</u></h3>
        <p>This is the second column and the second row.</p>
        width: 60% height: 50%
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

No need for tables or even flexbox for this layout! You can accomplish it using a few floats, and it still remains fully responsive.

Here is a screenshot of the final result:

Layout

And here is a live demo of the code that produces that result:

html, body {
    margin: 0;
}

html, body, #outer {
    width: 100%;
    height: 100%;
}

#blk {
    height: 100%;
    width: 40%;
    float: left;
}
#red, #blu {
    height: 50%;
    width: 60%;
    float: right;
}

#blk {
    background: black;
}

#red {
    background: red;
}

#blu {
    background: blue;
    color: white;
}
#blu > span {
    position: absolute;
    bottom: 0;
    padding: 10px;
}
<div id="outer">
    <div id="blk"></div>
    <div id="red"></div>
    <div id="blu"><span>Text aligned bottom</span></div>
</div>

JSFiddle Version: https://jsfiddle.net/229zjpj7/

Upvotes: 2

Bipu Bajgai
Bipu Bajgai

Reputation: 404

Table layout is also a good way to accomplish what you want. but i would prefer using float property.

Yes we have used fixed height for blocks now , in my code it is 200px, and using fixed height for it is not a good option. i would write small JS, for it to calculate height itself. or may be same height js for both columns.

HTML

<div class="column-wrap">
    <div class="column"></div>
    <div class="column">
        <div class="box"></div>
        <div class="box align">
            <div class="holder">
                I am verticall bottom aligned
            </div>
        </div>
    </div>
</div>

CSS 

.column-wrap {
    overflow: hidden;
    color: #fff;
    text-align: center;
}
.column {
    float: left;
    width: 60%;
    height: 200px;
}
.column:first-child {
    width: 40%;
    background :red;
    height: 200px;
}
.box {
    height: 50%;
    background : blue;
}
.box:first-child {
    background : black;
}
.align {
    white-space: nowrap;
}
.align:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    marin-right: -0.25em; /* margin because inline block element takes 4px space for it. */
}
.align .holder {
    display: inline-block;
    vertical-align: bottom;
    white-space: normal;
}

here is a link to fiddle. http://jsfiddle.net/fmx9o2a2/6/

Upvotes: 0

Related Questions