Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to get CSS table-cell to 100% for responsive design

How to get CSS table-cell to 100% for responsive design

Problem

How do I get the following setup with CSS to work?

layout

jsfiddle

http://jsfiddle.net/16ex38mL/2/

Basically, I intend to put an input box to #header-nav-content-search and let the div and the one below it resize responsively to 100% of the remaining Width. I have two static width columns. One is the first one with 240px, and one is the last one with 200px.

code

#header-nav-content-search {
  width: 100%;
}

didn't do the trick.

Problem courtesy of: gco

Solution

I have concentrated on reducing the HTML markup needed. The following example is mainly based on that excellent sketch of yours, so it will need some tweaking.

Basic Idea

Create a three "column" CSS table with the center cell remaining fluid:

I contain 4 fluid divs with the class ".inner"

The center cell contains your 4 inner boxes with the class .inner

Basic CSS Styles

  • box-sizing: border-box will allow us to calculate percentage width including padding and borders

  • The main container, .table, is given a fixed height (could be changed to percentage)

  • The .inner divs are display: inline-block and are given appropriate percentage widths and fixed heights equal to half the containers height

  • The left and right columns are given their fixed widths

  • .table is given an appropriate min-width to prevent the inner divs from overlapping

Note: In the HTML markup, the inner divs closing and opening tags have no space between them. This is important as it prevents a gap that is present with inline elements.

Refer to this article for more information.

CSS / HTML / Demo

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
}
.table {
  display: table;
  height: 300px;
  width: 100%;
  min-width: 600px;
  table-layout: fixed;
}
.cell {
  display: table-cell;
  vertical-align: top;
}
.left {
  width: 240px;
}
.right {
  width: 200px;
  border-left: solid 1px #000;
}
.inner {
  display: inline-block;
  height: 150px;
  vertical-align: top;
}
.center-left {
  width: 30%;
}
.center-right {
  width: 70%;
}
/* Borders */

.table {
  border: solid 1px #000;
}
.inner {
  border-bottom: solid 1px #000;
  border-left: solid 1px #000;
}
.center-right .inner {
  border-right: solid 1px #000;
}
.inner:nth-child(3),
.inner:nth-child(4) {
  border-bottom: none;
}
240px width
30% width 50% height
70% width 50% height
30% width 50% height
70% width 50% height
200px width
Solution courtesy of: misterManSam

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to get CSS table-cell to 100% for responsive design

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×