Two Divs the Same Line, One Dynamic Width, One Fixed

two divs the same line, one dynamic width, one fixed

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
}
<div id="parent">
    <div class="right">right</div>
    <div class="left">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.</div>
</div>

CSS: two divs in one line, dynamic(left) and fixed(right) width. make overflow text on dynamic div

Use CSS Flexbox. Its quite easy to implement it in flexbox. Make your .parent a flex container and apply flex properties to .dynamic { flex: 1; }. Everything will get in place automatically.

Have a look at the snippet below:

.parent {  display: flex;  width: 100%;}
.dynamic {  flex: 1;}
.cutting-text {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

<div class="parent"><div class="dynamic cutting-text">could be very long text. overflows till max-width reached, so doesn't work for small screens</div><div class="fixed">30.11.16</div></div>

How to design 2 divs on the same line, width fixed at left, responsive at right, and same height for the both

You can use Flex model to achieve that...

Demo

.wrap {
    display: flex;
}

.left {
    width: 50%;
    background-color: grey;
}

.right {
    flex: 1;
    background-color: red;
    vertical-align: top;
}

Not happy with the flex? Use display: table; for the parent element and set the child elements to display: table-cell;

.wrap {
    display: table;
}

.left {
    width: 50%;
    background-color: grey;
    display: table-cell;
}
.right {
    display: table-cell;
    background-color: red;
    vertical-align: top;
}

Demo

Centering Two Dynamic-Width Divs On The Same Line and

You're making things hard for yourself! This can be done quickly and easily with inline-blocks. Have a nice JSfiddle.

Lets explain the code:

.wrapper
{
    text-align: center;   /* specifies that the inline-blocks (which are treated 
        like text here) will be centered. */

    font-size: 0;  /* Explained later */
    max-width: 1000px;  /* Your desired max-width */
    position: relative;  /* These two lines center your wrapper in the page. */
    margin: 0 auto;
}

Now for the inside 50% elements:

.left, .right{
    display: inline-block;  /* This will treat these divs like a text element.  
       This will work with the parent's "text-align: center" to center the element. */

    min-width: 300px;
    width: 50%;
    font-size: 16px;  /* Explained below */
    vertical-align: text-top;   /* Explained below */
}

You might be wondering why font-size is included. It is because with this method comes a little quirk - if a font size is kept at default, the div's will have an annoying gap between them that can not be eliminated with margin.

Sample Image

However, adding font-size: 0; to the parent element eliminates this gap. It's weird, and you then have to specify the font-size for your children elements, but it's well worth it for the ease of use.

But there's still a problem - the blue element is pushed down, and isn't flush on the top. This can be remedied with vertical-align: text-top; This will make sure all Div elements are aligned by the tops, so they lay in a more pleasant pattern. This is just another little quirk to remember when using inline-blocks. I know it seems like a lot of things to fix just for something this simple, but compared to your other options using inline-block is the cleanest and easiest way of going about this. (Though if you prefer, jshanley offers a very good alternative using float elements)

Sample Image

Also, because these children are now treated like text, they will automatically reposition themselves when the window gets too small! No media-queries needed. Yay.

Good luck.

two fixed width divs and one dynamic (NO content)

As I understand you need something like this:

html:

<div class="leftFence"></div>
<div class="center"></div>
<div class="rightFence"></div>

css:

.leftFence,
.rightFence {
    position: fixed;
    height: 100%;
    width: 52px;
    background: red;
    top: 0;
}
.leftFence {
    left: 0;
}
.rightFence {
    right: 0;
}
.center {
    margin: 0 52px;
    height: 100px;
    background: gray;
}

Demo

How to keep two dynamic divs on same line and force to word wrap on right

Any reason you can't use a float as nature intended?

Fiddle demo

.images {    float:left;    border:1px solid black;    height: 200px;}.text {    border:1px solid black;    overflow: hidden;}

<div class='wrapper'>  <div class='text'>    <div class='images'>images</div>
    long text long text long text long text long text long text long text long text long text long text</div></div>

How to align two divs next to each other, first is fixed width, second is dynamic height

The simplest solution would be to use display: flex as shown below. It allows you to have exactly what you needed without taking too much care about the child elements.

#parent {  /* Set parent to flex, starting at     the very left corner. */  display: flex;  justify-content: flex-start;  /* If you want the icon to be on top,     use flex-start instead of center */  align-items: center;}
#X {  /* Set fixed width. This part is important,     otherwise it would stretch the icon */  width: 44px;}
#Y {  /* Set the #Y container to 100% width.     It will be stretched since it is a     relative width but its content stays within its borders */  border: 1px solid #000;  width: 100%;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><div id="parent">    <div id="X"><i class="fa fa-exclamation-triangle"></i></div>    <div id="Y">text goes here<br>      with some more<br>lines</div></div>

Two Divs the Same Line, One Dynamic Width, One Fixed