CSS Layout - Dynamic Width Div

CSS Layout - Dynamic width DIV

try

<div style="width:100%;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>

or

<div style="width:100%; border:2px solid #dadada;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>    
</div>

How to make dynamic width div in 3 coloumn css flex box

Here you go.

Just apply flex:1 to all of the divs but flex: 1 0 100%; to the center div so it defaults to as wide as it can before hitting the max-width you wanted.

html,body {  min-height: 100% !important;  height: 100%;}
body {  margin: 0;  background-color: #ddd;  display: flex;}
.left,.center,.right {  flex: 1;  height: 100%;}
.left {  width: auto;  background-color: red}
.center {  display: flex;  min-height: 100vh;  flex-direction: column;  flex: 1 0 100%;  width: 100%;  max-width: 1200px;  background-color: green;}
.right {  width: auto;  background-color: blue;}

<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>

HTML/CSS - dynamic width div next to bottom-right aligned fixed width div

You can use display:inline-block for div like:

*{    margin:0;    padding:0;}.main {    border-collapse: collapse;}
.left {    display:inline-block;    width: 80%;    background-color: blue;}
.right {        text-align: center;     vertical-align: bottom;     background-color: red;    display:inline-block;    width: 20%;}

<div class="main">      <div class="left">          <span>Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text</span>        </div><div class="right">          <span>Fixed text</span><br/><span>Fixed text</span>        </div></div>

CSS div dynamic width with two values

A hacky approximation using clamp(). You need an extra wrapper that has a shrink-to-fit behavior (I used float but you can consider inline-block). 100% of the child width will refer to its own width since its parent is shrink-to-fit.

I use clamp and compare 100% with 175px.

If 100% > 175px we have (100% - 175px)*10000 a big positive value clamped to 100vw, your full width behavior (we have to hide the overflow)

If 100% < 175px we have (100% - 175px)*10000 a big negative value clamped to 175px

#container {
  overflow:hidden;
}

.text-div {
  width: clamp(175px, (100% - 175px)*10000, 100vw);
  background:yellow;
  margin:5px;
}

.wrap {
  float: left;
  clear: left;
}

<div id="container">
  <div class="wrap">
    <div class="text-div">
      Short Text
    </div>
  </div>
  <div class="wrap">
    <div class="text-div">
      Looooooooooooooooooooooooooong Text
    </div>
  </div>
</div>

Dynamic width of div elements inside a fixed width div

Basically you are asking for a table where the width of every cell should be the same in proportion of the fixed width of the parent.

It is possible in CSS if you know the maximum possible number of children (if not you will always use all the space but the width of each cell will change based on the content)

When you know the maximum number if children, you add that property to the class .height: max-width:Npx where N is the width of the parent divided by the number of children

.container {    border:1px solid #000;    border-radius:5px;    width:500px;    display:table;}.child{    display:table-cell;    border-right:1px solid #000;}
.child:last-of-type {    border:none;}.height{    min-height:100px;}

<div class="container height">    <div class="child height">Child 1</div>    <div class="child height">Child 2</div>    <div class="child height">Child 3</div>    <div class="child height">Child 4</div>    <div class="child height">Child 5</div></div>

dynamic and fixed width with css

.wrapper {   width:100%;     height:200px;     border:2px solid blue; }
.right { height:200px;    width:60%;    background:red;    float:right;}.left { width:auto;    height:200px;    background:green;    }}

<div class="wrapper">      <div class="right">hello</div>      <div class="left">dude</div> </div>

CSS 3 divs with dynamic width

Easily can be achieved with flexbox.

.table {  display: flex;  flex-direction: row;  width: 729px;  height: 343px;}
.left {  flex: 1;  background-color: red;}
.center {  max-width: 429px;  max-height: 343px;  background-color: green;}

.right {  flex: 1;  background-color: deepskyblue;}

<div class="table">  <div class="left"> a </div>
  <div class="center"> <img src="https://c1.staticflickr.com/9/8452/7936998300_6ab78565ff_m.jpg"> </div>
  <div class="right"> c </div></div>

Ways to set div width and height dynamically

You have to add height:100% to html and body tag.
Then use calc() css function for height and width properties to get result.

Refer my snippet for both the Scenarios . Its working.

html, body{ height:100%;}header{ width:100%; height:50px;background:#777;}.nav{ height: calc( 100% - 50px ); width:200px; float:left; background:#888;}.container{ color:#fff; float:left; width:calc( 100% - 200px ); height:calc( 100% - 50px ); background:#222;}

<header>HEADER</header>  <div class="nav">NAV</div><div class="container">Container</div>              

---

Related Topics