CODEWITHSUNDEEP
htmlcss
zuby
zuby

Reputation: 51

How do I resize a specific box by css

I want to resize to right box whereas left box value (400px) will be fix how do i do that by css? when i resize browser window right box comes down that is not right. here is css and html.

#w {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  border: solid 1px #eee;
  box-sizing: border-box;
}
#left {
  max-width: 400px;
  width: 100%;
  border: solid 1px #000;
  height: 100px;
  float: left;
  box-sizing: border-box;
}
#right {
  max-width: 598px;
  width: 100%;
  border: solid 1px #000;
  height: 100px;
  float: left;
  box-sizing: border-box;
}
.clear {
  clear: both
}
<div id="w">
  <div id="left"></div>
  <div id="right"></div>
  <div class="clear"></div>
</div>

Upvotes: 3

Views: 158

Answers (5)

Razia sultana
Razia sultana

Reputation: 2211

Try

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

.div3 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div4 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
<h2>Without box-sizing</h2>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>

<h2>With box-sizing</h2>
<div class="div3">Both divs are the same size now!</div>
<br>
<div class="div4">Hooray!</div>

Upvotes: 1

Praveen Murali
Praveen Murali

Reputation: 741

Hope it will help you.

   #w {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
        border: solid 1px #eee;
        box-sizing: border-box;
        position: relative;
        padding-left: 400px;
    }

    #left {
        width: 400px;
        border: solid 1px #000;
        height: 100px;
        float: left;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
    }

    #right {
        width: 100%;
        border: solid 1px #000;
        height: 100px;
        float: left;
        box-sizing: border-box;
    }

    .clear {
        clear: both
    }

Upvotes: 0

user7139867
user7139867

Reputation: 1

#w{
        max-width:1000px;
        white-space: nowrap; 
        border:solid 1px #eee;
        box-sizing: border-box;
        width: 100%;
        margin:0;     
}
#left{
      display:inline-block;
      max-width:400px;
      width:100%;
      border:solid 1px #000;
      height:100px;
      box-sizing: border-box;
}
#right{
      display:inline-block; 
      max-width:598px;
      width:100%;
      border:solid 1px #000;
      height:100px;
      box-sizing: border-box;
}
    <div id="w">
    <div id="left">X</div>
    <div id="right">X</div>
     Tested: Firfox & Chrome browsers!
    </div>

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

If flexbox is an option, you can make w a flexbox and:

  1. Give flex: 1 to right for it to self-adjust

  2. Add flex: 0 0 400px to left to keep the width fixed at 400px.

Demo below:

#w {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  border: solid 1px #eee;
  box-sizing: border-box;
  display: flex;
}
#left {
  max-width: 400px;
  border: solid 1px #000;
  height: 100px;
  box-sizing: border-box;
  flex: 0 0 400px;
}
#right {
  max-width: 598px;
  border: solid 1px #000;
  height: 100px;
  box-sizing: border-box;
  flex:1;
}
<div id="w">
  <div id="left"></div>
  <div id="right"></div>
</div>

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use your #left box with fixed width (in my case width: 400px;) and #right box responsive according to screen width using CSS Flexbox.

Just as shown in the snippet below:

#left{
  width: 400px;
  display: inline-block;
  border:solid 1px #000;
  height:100px;
  box-sizing: border-box;
}
#right{
  display: inline-flex;
  width: calc(100% - 405px);
  border:solid 1px #000;
  height:100px;
  box-sizing: border-box;
}
<div id="left"></div>
<div id="right"></div>

Upvotes: 0

Related Questions