two divs the same line one dynamic width one fixed

Question

I have two divs under one parent div  the parent div has 100  width    lt div id  parent  gt     lt div class  left  gt  lt  div gt     lt div class  right  gt  lt  div gt   lt  div gt    The conditions are    I want two divs on the same line   The right div may or may not be present  When it is present  I want it to always be fixed on the right  However  the left div must be elastic - it s width depends on its content     I have tried both float left  and dispaly inline-block but neither solution seems to work   Any suggestion would be appreciated

User · Answer

I think this is you want    lt html gt   lt head gt   lt style type  text css  gt   parent   width 100   height 100   border 1px solid red     left   float left  width 40   height auto  border 1px solid black     right       float left   width 59   height auto  border 1px solid black     lt  style gt   lt  head gt   lt body gt   lt div id  parent  gt     lt div class  left  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  div gt     lt div class  right  gt This is the right side content lt  div gt   lt  div gt   lt  body gt   lt  html gt    Here is the demo http   jsfiddle net anish aFBmN

User · Answer

Yijie  Check the link maybe that s you want http   jsfiddle net sandeep NCkL4 7    EDIT   http   jsfiddle net sandeep NCkL4 8   OR SEE THE FOLLOWING SNIPPET   x000D   x000D   parent  x000D      overflow hidden  x000D      background yellow  x000D      position relative  x000D      display table  x000D    x000D   left  x000D      display table-cell  x000D    x000D   right  x000D      background red  x000D      width 50px  x000D      height 100   x000D      display table-cell  x000D    x000D  body  x000D      margin 0  x000D      padding 0  x000D    x000D   lt div id  parent  gt  x000D     lt div class  left  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  div gt  x000D     lt div class  right  gt fixed lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I d go with  sandeep s display  table-cell answer if you don t care about IE7   Otherwise  here s an alternative  with one downside  the  right  div has to come first in the HTML   See  http   jsfiddle net thirtydot qLTMf  and exactly the same  but with the  right div  removed  http   jsfiddle net thirtydot qLTMf 1    parent       overflow  hidden      border  1px solid red    right       float  right      width  100px      height  100px      background   888     left       overflow  hidden      height  100px      background   ccc    lt div id  parent  gt       lt div class  right  gt right lt  div gt       lt div class  left  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Nullam semper porta sem  at ultrices ante interdum at  Donec condimentum euismod consequat  Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet  Proin at ante nec neque commodo bibendum  Cras bibendum egestas lacus  nec ullamcorper augue varius eget  lt  div gt   lt  div gt

User · Answer

So left div style depends on the presence of right div. I can't think of a CSS selector allowing that kind of behavior yet.

Thus it seems to me that you'll need to programmatically add a class server side (or in JS) on parent div or left div to do that.

<div id="parent twocols">
  <div class="left"></div>
  <div class="right"></div>
</div>

or

<div id="parent">
  <div class="left"></div>
</div>

So right style is always :

.right {
    float: right;
    width: 200px; /* or whatever value you need */
    /* margin and padding at your discretion */
}

and left style is :

.parent.twocols .left {
    margin-right: 200px; /* according to right div width + margin + padding*/
}

User · Answer

I ve had success with using white-space  nowrap  on the outer container  display  inline-block  on the inner containers  and then  in my case since I wanted the second one to word-wrap  white-space  normal  on the inner ones

User · Answer

HTML    lt div id  parent  gt     lt div class  right  gt  lt  div gt     lt div class  left  gt  lt  div gt   lt  div gt     div right needs to be before div left in the HTML markup   CSS    right   float right  width 200px

[css] two divs the same line, one dynamic width, one fixed

The answer is

Examples related to css

Examples related to html

Tags