CSS How To Fill The Entire Width?

Question

i already goggle but still don't know what to do i have 3 div

center

Solution 1:

If you need a pure CSS Solution, than consider altering your DOM

First of all, remove float: left; property from #center, and than I've added width: auto; and overflow: hidden; properties which will make the columns independent.

Reference Code :

<div id="container">
    <div id="right"></div>
    <div id="center"></div>
</div>

#container {
    height: auto;
    overflow: hidden;
}

#center {
    background-color: green;
    width: auto;
    height: 20px;
    overflow: hidden;
}

#right {
    background-color: red;
    float: right;
    height: 20px;
    width: 200px;
}

Solution 2:

Doesn't work that way - you need to nest the 'right' div inside of the 'center' div:

<body>
  <div id="container">
    <div id="center">
      <h1>center</h1> 
      <div id="right">
        <h1>right</h1> 
      </div>
    </div>
  </div>
</body>

Then make the h1 display inline:

h1 {
  display: inline-block;
}
#center {
  background-color: green;
  float: left;
  width: 100%;
}
#right {
  background-color: red;
  float: right;
  width: 200px;
}

Here's an updated fiddle.

Solution 3:

I got this from here and learnt a new/useful one.

The following solution will not affect your dom in making changes.

#center{
    background-color: green;
    float: left;
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
}

DEMO

Solution 4:

Adding this separate since the other one may be useful to someone in the future. Here's the only CSS only solution I could come up with, but there's a caveat: you have to use percentage based widths on both divs:

#center {
  background-color: green;
  display: inline-block;
  float: left;
  width: 80%;
}

#right {
  background-color: red;
  float: left;
  width: 20%;
}

20% should be close to what you need on the smaller div, and you can use media queries if necessary to keep it from being too wide on larger screens.

Here's an updated fiddle.

Solution 5:

What can i do is customize your css :

#center{
    background-color: green;
    position : absolute;
    width : 100%;
    z-index : -1;
}

#center fill all the empty space between it and #right.
but you have to notice it that the #center is behind the #right

JavaScript Guide