javascript - CSS how to fill the entire width? - Stack Overflow

admin2025-04-04 0

i already goggle 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 i try to acplish

div id=center is auto fill the width
div id=right is in right position of the div id=center, width=200px;

what i try 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 right position of it

jsfiddle

forgive my english

i already goggle 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 i try to acplish

div id=center is auto fill the width
div id=right is in right position of the div id=center, width=200px;

what i try 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 right position of it

jsfiddle

forgive my english

Share Improve this question edited Oct 26, 2013 at 4:35 Mr. Alien 157k36 gold badges303 silver badges285 bronze badges asked Oct 26, 2013 at 3:16 ilike 991 silver badge11 bronze badges

1 #center { width: 80%; } #right{ width: 20%; max-width: 200px;} this should get you close enough I guess. – KBN Commented Oct 26, 2013 at 3:54

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

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

Demo

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

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.

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

Adding this separate since the other one may be useful to someone in the future. Here's the only CSS only solution I could e 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.

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1743757940a217727.html

javascriptCSS how to fill the entire widthStack Overflow

最新回复(0)