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

The footer refuses to adhere to the bottom of the page

Creating an application for inputting data by utilizing angular material and javascript

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

Utilizing CSS to Target IDs Using Classes

CSS - Placeholder styling not being effective when selectors are grouped

Support for Arabic in database, PHP, and JavaScript

Ways to ensure that the height of the second row in the second column matches that of the first column

Enhancing Your Images with jQuery

Warning: Potential Infinite Loop when using Vue JS Category Filter

Managing selected ticket IDs in a table with AngularJS

Tips on confirming the completion of my form when the next button is pressed

Creating an email body using css and html from a file on Android - how can it be done?

What is the best method for overlaying text on individual images in a slideshow?

The functionality to deselect multiple options in a select box is not functioning properly

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

Persistent column menu in ag-grid

Change the position of the specified footer on the one-page website

The iframe HTML code is appearing as normal text within a table

Implementing color transitions in javascript

Arrange the table in alphabetical order and categorize it