Geek Answers Handbook

CSS how to fill the whole width?

I'm already scared, but still don't know what to do

I have 3 div

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

what am i trying to accomplish

  • div id = center automatically fills the width
  • div id = right is in the correct position div id = center, width = 200px;

what i tried so far

#center{
    background-color: green;
        float: left;
        overflow: auto;
}

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

How to make div id = center fill the entire width with another div (div id = right) in the right position

jsfiddle

sorry for my English

+4
source share
5 answers

I got it from here and found out new / useful.

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

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

Demo

+2
source

CSS, DOM

, float: left; #center, width: auto; overflow: hidden;, .

:

<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;
}
+5

- "" div "" div:

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

h1 inline:

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

.

+4

, - . CSS, , : div:

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

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

20% , div, -, .

.

+2

, css:

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

#centerfill in all the empty space between it and #right.
but you should notice what #centeris behind#right

+1
source

More articles:


All Articles