HTML table-cell how to set width


Tags: html,css

Problem :

How can I force width to elements with display: table-cell?

<div id="wraper">
  <div id="left">
    <p>Left</p>
  </div>
  <div id="right">
    <p>Right and Hide</p>
  </div>
</div>

My CSS doesn't do anything, width of #left and #righ elements isnt affected.

#wraper {
  display: table-wrap;
}
#left {
  border: 1px solid red;
  display: table-cell;
  width: 30%;
}
#right {
  border: 1px solid blue;
  display: table-cell;
  width 70%;
}


Solution :

it just works fine for me JS Fiddle: https://jsfiddle.net/qq0t46pt/1/

HTML:

<div id="wraper">
  <div id="left">
    <p>Left</p>
  </div>
  <div id="right">
    <p>Right and Hide</p>
  </div>
</div>

CSS:

#wraper {
  display: table-wrap;
}
#left {
  border: 1px solid red;
  display: table-cell;
  width: 30%;
}
#right {
  border: 1px solid blue;
  display: table-cell;
  width 70%;
}

    CSS Howto..

    How to vertical-align to x-height?

    With twitter bootstrap, how can I make it so that there's no word wrap in tables without breaking columns?

    How to make the HTML colors of a Bootstrap design edge-to-edge

    CSS / bxSlider: How to avoid that Images are overlapping parent div

    How to re-size constantly changing text to fit in a div with a fixed width, based on the changing of a