CODEWITHSUNDEEP
htmlcss
shahista inamdar
shahista inamdar

Reputation: 186

How width in percentage is getting assigned to div?

I have main div and inside that i have 3 divs and each have individual width in percentage. So i got divs with 20%, 80% and 100% respectively. Working with them so far i realised that if I have given then width of 200% all together then it divide browser width in two equal parts and first half is considered 100% and other one 100%. Then rest of percentage distribution happens. I am new to CSS but want to make this clear. Is my understanding correct and that's why my code is working correctly? Is there any disadvantage of doing so?

.main {
  font-size: larger;
  font-weight: bold;
}

.column1 {
  position: relative;
  line-height: 30px;
  width: 20%;
  text-align: left;
}

.column2 {
  width: 80%;
}

.column3 {
  position: relative;
  width: 100%;
  float: right;
  text-align: right;
}

.clear-both {
  clear: both;
}

.row {
  border-width: 2px;
  border-bottom-color: #f4f4f4;
  border-style: none;
  position: relative;
  line-height: 30px;
  border-bottom-style: solid;
  margin-top: 0.2%;
  font-weight: normal;
  font-size: 12px;
  display: flex;
}
<div class="row main">

  <div class="column1">CODE</div>

  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

Upvotes: 0

Views: 61

Answers (3)

dippas
dippas

Reputation: 60553

if you use flexbox, it makes it clearer for you instead of using floats mixed with position,

body {
  margin: 0
}

.main {
  font-size: larger;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
}

.column1 {
  flex: 0 20%;
  background: red
}

.column2 {
  flex: 0 80%;
  background: green
}

.column3 {
  flex: 0 100%;
  background: yellow
}
<div class="main">
  <div class="column1">CODE</div>
  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

EDIT OP's comment

I want these 3 columns to be in one row. Working with my code too but total width of main div is 200%. is there any possibility of breaking of ui if i do it in this way

You can do this way:

body {
  margin: 0
}

.main {
  font-size: larger;
  font-weight: bold;
  display: flex
}

.column1,
.column3 {
  flex: 0 20%;
  background: yellow
}

.column2 {
  flex: 1;
  background: green
}
<div class="main">
  <div class="column1">CODE</div>
  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

Upvotes: 2

Amani Ben Azzouz
Amani Ben Azzouz

Reputation: 2565

You can use bootstrap grid system.

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

So you can easily manage your layout depending on which device you are using :

  1. .col-lg* classes refer to large sized devices.
  2. .col-md* classes refer to medium sized devices .
  3. .col-xs* classes refer to small sized devices.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2  col-xs-2  bg-warning">CODE</div>
  <div class="col-md-10 col-xs-10 bg-primary">NAME</div>
  <div class="col-md-12 col-xs-12 bg-success">TOTAL</div>
 </div>

Upvotes: 0

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

You are doing wrong.

Keep following things in mind.

1- Parent/ main div should have appropriate width in percent or pixels. if you don't assign a width then it will take width automatically depending on contents of width.

2- If you are assigning width in percent to child divs (column1, column2 etc) then total of child divs should not exceed 100%. If it exceeds then you will not get desired/appropriate results.

3- You need to use floats or display:inline-block to place all child divs/elements in one row.

.main {
  font-size: larger;
  font-weight: bold;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.column1 {
  position: relative;
  line-height: 30px;
  width: 20%;
  text-align: left;
  float: left;
}

.column2 {
  width: 60%;
  float: left;
}

.column3 {
  position: relative;
  width: 20%;
  text-align: right;
  float: left;
}
<div class="row main">
  <div class="column1">CODE</div>

  <div class="column2 ">NAME</div>
  <div class="column3">TOTAL</div>
</div>

If you are using padding or borders then you may need to use box-sizing: border-box.

Upvotes: 0

Related Questions