On the same line, there are two divs with different characteristics - one dynamically changing width and the

Question

On the same line, there are two divs with different characteristics - one dynamically changing width and the

I am facing an issue with arranging two divs under one parent div. The parent div is set to have a width of 100%:

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

The specific conditions are as follows:

I need both divs to be 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 side. However, the left div should be flexible and adjust its width based on its content.

I have experimented with both float:left and display:inline-block but have not found a satisfactory solution.

If you have any suggestions or ideas, they would be greatly appreciated.

css html

Answer 1

Answer №1

If you're not concerned about IE7 compatibility, I recommend @sandeep's solution using display: table-cell.

Alternatively, there is another approach, but it requires placing the "right" div first in the HTML structure.

Check out: http://jsfiddle.net/thirtydot/qLTMf/
and the same example without the "right div" included: 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>

Answer 2

If you're not concerned about IE7 compatibility, I recommend @sandeep's solution using display: table-cell.

Alternatively, there is another approach, but it requires placing the "right" div first in the HTML structure.

Check out: http://jsfiddle.net/thirtydot/qLTMf/
and the same example without the "right div" included: 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>

Answer 3

Answer №2

@Yijie; Perhaps this link could be what you're looking for: http://jsfiddle.net/sandeep/NCkL4/7/

UPDATE:

http://jsfiddle.net/sandeep/NCkL4/8/

ALTERNATIVELY, YOU CAN VIEW THE SNIPPET BELOW

#parent{
    overflow:hidden;
    background:yellow;
    position:relative;
    display:table;
}
.left{
    display:table-cell;
}
.right{
    background:red;
    width:50px;
    height:100%;
    display:table-cell;
}
body{
    margin:0;
    padding:0;
}

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

Answer 4

@Yijie; Perhaps this link could be what you're looking for: http://jsfiddle.net/sandeep/NCkL4/7/

UPDATE:

http://jsfiddle.net/sandeep/NCkL4/8/

ALTERNATIVELY, YOU CAN VIEW THE SNIPPET BELOW

#parent{
    overflow:hidden;
    background:yellow;
    position:relative;
    display:table;
}
.left{
    display:table-cell;
}
.right{
    background:red;
    width:50px;
    height:100%;
    display:table-cell;
}
body{
    margin:0;
    padding:0;
}

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

Answer 5

Answer №3

Here is an example of HTML:

<div id="container">
  <div class="right"></div>
  <div class="left"></div>
</div>

(The div with the class "right" must come before the div with the class "left" in the HTML markup)

And here is some corresponding CSS:

.right {
float:right;
width:200px;
}

Answer 6

Here is an example of HTML:

<div id="container">
  <div class="right"></div>
  <div class="left"></div>
</div>

(The div with the class "right" must come before the div with the class "left" in the HTML markup)

And here is some corresponding CSS:

.right {
float:right;
width:200px;
}

Answer 7

Answer №4

When it comes to adjusting the left div style based on the presence of the right div, a CSS selector doesn't readily come to mind.

One possible solution would be to dynamically add a class either server-side or through JavaScript to the parent div or left div element.

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

Alternatively,

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

The style for the right div remains constant:

.right {
    float: right;
    width: 200px; /* adjust as needed */
    /* margin and padding can be customized */
}

For the left div, the following rules apply:

.parent.twocols .left {
    margin-right: 200px; /* accounting for right div width, margin, and padding */
}

Answer 8

When it comes to adjusting the left div style based on the presence of the right div, a CSS selector doesn't readily come to mind.

One possible solution would be to dynamically add a class either server-side or through JavaScript to the parent div or left div element.

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

Alternatively,

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

The style for the right div remains constant:

.right {
    float: right;
    width: 200px; /* adjust as needed */
    /* margin and padding can be customized */
}

For the left div, the following rules apply:

.parent.twocols .left {
    margin-right: 200px; /* accounting for right div width, margin, and padding */
}

Answer 9

Answer №5

My experience has shown that utilizing white-space: nowrap; for the outer container, display: inline-block; for the inner containers, and then applying white-space: normal; to the inner ones (especially if you want the second one to word-wrap) can lead to successful outcomes.

Answer 10

My experience has shown that utilizing white-space: nowrap; for the outer container, display: inline-block; for the inner containers, and then applying white-space: normal; to the inner ones (especially if you want the second one to word-wrap) can lead to successful outcomes.

Answer 11

Answer №6

It seems like this might be what you're looking for:

<html>
<head>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="parent">
  <div class="left">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.</div>
  <div class="right">This is the right side content</div>
</div>
</body>
</html>

Check out the live demo here:http://jsfiddle.net/anish/aFBmN/

Answer 12

It seems like this might be what you're looking for:

<html>
<head>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="parent">
  <div class="left">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.</div>
  <div class="right">This is the right side content</div>
</div>
</body>
</html>

Check out the live demo here:http://jsfiddle.net/anish/aFBmN/

On the same line, there are two divs with different characteristics - one dynamically changing width and the

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

How to use CSS to make a child element's width automatically fill the width of its

Utilizing DIV elements within table cells

"Utilize HTML to make inline-block elements appear small in size while giving the illusion of being

Concealing the resize handle icon using CSS

Is there a way to retrieve the modal's viewport height in Angular?

What steps do I need to take to retrieve data in a JSON array based on its

The fixed left div and scrollable right div are experiencing issues with their alignment

Navigational elements, drawers, and flexible designs in Material-UI

When the mouse hovers over DIV2, the background image of DIV1 will be replaced

modern marquee

What could be causing the div to be wider than the content inside of it?

Different methods of transferring PHP post information to JavaScript

The evolving impact of the HTML5 <video> element

simulate the act of clicking on a download link by utilizing a secondary click

Tips for obtaining the entire date and time on one continuous line without any breaks or separation

Inject data from ajax into the body of the html document

Incorporate a vertical scrollbar in the tbody while keeping the thead fixed for smooth vertical scrolling

Stop tooltips from appearing on hyperlinks in Internet Explorer

Attempting to automate the process of clicking a button on a webpage using cefsharp

Guidelines for retrieving a class name using jQuery when hovering over a div