All geek questions in one place

How can I make div div div and right div have constant width?

So, as the name says, I want to put two divs on the right side of each other and expand the left one if the window is expanded and the right one with a constant width.

Here is what I got so far:

<body>
    <div id="content" style="background-color: red">
        <div id="left" style="margin-right: 100px; background-color: blue">
            This</br>is</br>left.
        </div>
        <div id="right" style="float: right; width: 100px; height: 100px; background-color: green">
            This</br>is</br>right.
        </div>
        <div style="clear:both"></div>
    </div>
</bod>

What produces this:

It is quite sad if you can't see this :(

Ideally, the green square and the blue square should have their vertices aligned with each other. One solution that I found is to put a negative edge setting on a green div that works ... but only as long as the blue div never changes in height. Unfortunately, the blue div can actually change the height in my situation.

Any ideas on how I can fix this? I find it difficult to understand the intricacies of CSS positioning :(

+4
5

position:absolute, - :

<div class="left">This is the left box.</div>
<div class="right">This is the right box.</div>

CSS:

.left {
  position: absolute;
  left: 0px;
  right: 100px;
}

.right {
  position: absolute;
  right: 0px;
  width: 100px;
}

http://jsfiddle.net/Q2TKU/

+1

?

http://jsfiddle.net/bonatoc/N3xWn/

<div id="content" style="background-color: red">
    <div id="left" style=" background-color: blue">

        <div id="right" style="display:inline-block; float: right; width: 100px; height: 100px; background-color: green">
        This</br>is</br>right.
        </div>

    This</br>is</br>left.
    </div>

    <div style="clear:both"></div>

+1

.

HTML:

<div id="content">
    <div id="left">This</br>is</br>left.</div>
    <div id="right">This</br>is</br>right.</div>
</div>

CSS:

#content {
    background-color: red;
    position: relative;
    min-height: 100px;
}
#left {
    margin-right: 100px;
    background-color: blue;
    width: auto;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: green;
}

. : http://jsfiddle.net/audetwebdesign/GfpyL/

#right , #content, position: relative, .

, , #left 100 .

0

flexbox? flexbox . 100px, .

HTML :

<div id="content" >
    <div id="left">
         This<br>is<br>left.
    </div>
    <div id="right">
        This<br>is</br>right.
    </div>
</div>

CSS :

#content {
    /* old*/
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    /* New */
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: flexbox;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

#left {
    /* old */
    -webkit-box-ordinal-group: 1;
       -moz-box-ordinal-group: 1;
        -ms-box-ordinal-group: 1;
            box-ordinal-group: 1;
    /* New */
    -webkit-flex-order: 1;
       -moz-flex-order: 1;
        -ms-flex-order: 1;
            flex-order: 1;

   /* Old */
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-box-flex: 1;
            box-flex: 1;

    /* New */
    width: -webkit-flex(1);
    width: -moz-flex(1);
    width: -ms-flex(1);
    width: flex(1);
 }

 #right {
      width: 100px;

      /* Old */
      -webkit-box-ordinal-group: 2;
         -moz-box-ordinal-group: 2;
          -ms-box-ordinal-group: 2;
              box-ordinal-group: 2;

      /* New */
      -webkit-flex-order: 2;
         -moz-flex-order: 2;
          -ms-flex-order: 2;
              flex-order: 2;

}

jsfiddle : http://jsfiddle.net/sota0805/kykU7/

, .

0

, .

1) div

2) overflow:auto ( ) ,

, :

FIDDLE

:

<div class="wpr">
    <div class="rFloat"></div>
    <div class="blue overflow" contenteditable>this is left</div>

    <div class="rFloat green">This is right</div>
    <div class="overflow"></div>
</div>

CSS

.wpr {
    background: red;
    min-width: 200px;
}
div {
    min-height: 20px;
}
.rFloat {
    width: 100px;
    float:right;
}
.blue {
    background: blue;  
}
.green {
    background: green;
}
.overflow {
    overflow: auto;
}

Notice that in the script I set the attribute contenteditableto true on the blue div - so you can enter the blue area and see that it expands as needed.

0
source

Source: https://habr.com/ru/post/1548218/

More articles:


All Articles