CODEWITHSUNDEEP
htmlcss
Karolina Ticha
Karolina Ticha

Reputation: 531

HTML table-cell how to set width

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%;
}

Upvotes: 0

Views: 95

Answers (2)

Himanshu
Himanshu

Reputation: 490

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%;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115047

table-wrap is not a valid display value. See MDN

Use display:table.

Then you need to give the table a width so the child elements can calculate their own width accordingly.

#wraper {
  display: table;
  width: 70%; /* or your chosen value */
  margin: auto;
}
#left {
  border: 1px solid red;
  display: table-cell;
  width: 30%;
}
#right {
  border: 1px solid blue;
  display: table-cell;
  width 70%;
}
<div id="wraper">
  <div id="left">
    <p>Left</p>
  </div>
  <div id="right">
    <p>Right and Hide</p>
  </div>
</div>

Upvotes: 1

Related Questions