Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Question

Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Struggling to figure out how to achieve this in html, I would like the solution to be limited to just html + css. Javascript/jquery is being utilized on the site, yet I don't want my design to rely on javascript.

Section A contains a list of variable width items pulled from a database, ranging from 9em-15em wide. Section B also has overflowing text. My goal is for A to adjust its width based on content and for Section B to take up any remaining space available.

Is there a way to make this work? Any recommendations for books that could help me build a strong foundation in html+css would be appreciated!

---------------------------------------------
|          |^|                             |^|
|          | |                             | |
|          | |                             | |
|          | |                             | |
|    A     | |             B               | |
|          | |                             | |
|          | |                             | |
|          | |                             | |
|          | |                             | |
|          | |                             | |
|          |v|                             |v|
----------------------------------------------

The current setup I have causes issues when Section B overflows, resulting in "A" shrinking and the divs going onto two lines, which is not acceptable.

<div id="SectionA" style="float:left">
 <div>Just TEst data</div>
 <div>Just data</div>
 ...
 <div>Just data</div>
</div>
<div id="SectionB" style="float:left">
  <!-- A bunch of content here -->
</div>

css html

Answer 1

Answer №1

Consider viewing it from a different perspective:

<div id="SectionB">
 <div id="SectionA">
  <div>Just Test data</div>
  <div>Only information</div>
  ...
  <div>Simply details</div>
 </div>
 <!-- Plenty of content goes here -->
</div>

div#SectionA {max-width:15em; float:left;}

div#SectionB {width:100%;}

This method is expected to function perfectly

Answer 2

Consider viewing it from a different perspective:

<div id="SectionB">
 <div id="SectionA">
  <div>Just Test data</div>
  <div>Only information</div>
  ...
  <div>Simply details</div>
 </div>
 <!-- Plenty of content goes here -->
</div>

div#SectionA {max-width:15em; float:left;}

div#SectionB {width:100%;}

This method is expected to function perfectly

Answer 3

Answer №2

    <div id="SectionX" style="float:right;width:auto;max-width:200px">
 <div>New Test information</div>
 <div>Updated data</div>
 ...
 <div>More updated data</div>
</div>
<div id="SectionY" style="float:right;width:auto;max-width:200px">
  <!-- Additional content goes here -->
</div>

Possibly this solution may be effective

Answer 4

    <div id="SectionX" style="float:right;width:auto;max-width:200px">
 <div>New Test information</div>
 <div>Updated data</div>
 ...
 <div>More updated data</div>
</div>
<div id="SectionY" style="float:right;width:auto;max-width:200px">
  <!-- Additional content goes here -->
</div>

Possibly this solution may be effective

Answer 5

Answer №3

<style>
#sectiona{
float:left;
overflow:auto}
#sectiona>div{
white-space:no-wrap}

</style>

<div id="sectiona" style="float:left">
 <div>This is only a test</div>
 <div>Just some random data</div>
 ...
 <div>More data here</div>
</div>
<div id="sectionb" style="float:left">
  <!-- There is a lot of content in this section -->
</div>

I believe this setup should be effective.

Although, your diagram indicates that the columns should have equal height which can be difficult to achieve with just css.

Answer 6

<style>
#sectiona{
float:left;
overflow:auto}
#sectiona>div{
white-space:no-wrap}

</style>

<div id="sectiona" style="float:left">
 <div>This is only a test</div>
 <div>Just some random data</div>
 ...
 <div>More data here</div>
</div>
<div id="sectionb" style="float:left">
  <!-- There is a lot of content in this section -->
</div>

I believe this setup should be effective.

Although, your diagram indicates that the columns should have equal height which can be difficult to achieve with just css.

Answer 7

Answer №4

It appears that your approach might necessitate individual scrollbars for each section, reminiscent of frames in older versions of HTML. To achieve this, you would need a parent container div for both sections with fixed heights and set the height of both sections to 100%.

<style>
#frameset {
  background-color: lightBlue;
  position: absolute; /* my method for simulating frameset */
  bottom: 0; /* consider specifying height instead if not using absolute positioning */
  top: 0;
  left: 0; 
  right: 0;
}
#menu, width {
  width: auto;
  height: 100%;
}
#menu {
  background-color: bisque;
  max-width: 15em;
  float: left;
  overflow-y: scroll; /* can change to auto, but remember:
   scrollbar is inserted from inside. Content may require line breaks
     when scrollbar is added */
}
#content {
  overflow-y: auto;
}
</style>

<div id="frameset">
  <div id="menu">aaaaaaaaaaa</div>
  <div id="content">b</div>
</div>

Answer 8

It appears that your approach might necessitate individual scrollbars for each section, reminiscent of frames in older versions of HTML. To achieve this, you would need a parent container div for both sections with fixed heights and set the height of both sections to 100%.

<style>
#frameset {
  background-color: lightBlue;
  position: absolute; /* my method for simulating frameset */
  bottom: 0; /* consider specifying height instead if not using absolute positioning */
  top: 0;
  left: 0; 
  right: 0;
}
#menu, width {
  width: auto;
  height: 100%;
}
#menu {
  background-color: bisque;
  max-width: 15em;
  float: left;
  overflow-y: scroll; /* can change to auto, but remember:
   scrollbar is inserted from inside. Content may require line breaks
     when scrollbar is added */
}
#content {
  overflow-y: auto;
}
</style>

<div id="frameset">
  <div id="menu">aaaaaaaaaaa</div>
  <div id="content">b</div>
</div>

Answer 9

Answer №5

Let me take a stab at this problem:

<!DOCTYPE html>
<head>
    <title>Testing Out Columns</title>
    <style type="text/css">
    #first { float: left; }
    #second { overflow: hidden; }
    </style>
</head>
<body>
<div id="first">
    <ul>
        <li>Here is</li>
        <li>Some content with varying widths</li>
        <li>to test</li>
        <li>things out</li>
    </ul>
</div>
<div id="second">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod felis turpis, quis cursus est ullamcorper eget. Etiam mollis ultricies velit in convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque finibus libero non sapien euismod tempor. Vestibulum posuere placerat odio ut efficitur. Aenean nec mi nulla. In hac habitasse platea dictumst. Integer pellentesque ornare urna sed congue. Suspendisse potenti. Ut pharetra bibendum lectus ut tempus. Donec sit amet felis quis sem faucibus eleifend vel ac mauris.</p>
    <p>Nam tincidunt viverra nunc, eget varius lacus scelerisque eget. Duis fermentum dapibus neque non hendrerit. Suspendisse potenti. Aliquam aliquet metus justo, sit amet lobortis orci scelerisque vitae. Fusce vestibulum pulvinar purus, sed tincidunt ipsum lobortis nec. Mauris mattis arcu sit amet nisi feugiat, ut sagittis tortor suscipit. Nullam molestie nibh magna, vitae vehicula elit consequat non. Nunc venenatis egestas enim, nec pellentesque tortor elementum nec. Proin eu dui a tortor placerat porttitor interdum sit amet ligula.</p>
</div>
</body>
</html>

This should do the trick. The #first section floats to the left without a specified width, allowing its content to define the width. The #second section doesn't overlap with the first one thanks to overflow: hidden. Just keep in mind that this method may not be compatible with IE versions older than 7.

Answer 10

Let me take a stab at this problem:

<!DOCTYPE html>
<head>
    <title>Testing Out Columns</title>
    <style type="text/css">
    #first { float: left; }
    #second { overflow: hidden; }
    </style>
</head>
<body>
<div id="first">
    <ul>
        <li>Here is</li>
        <li>Some content with varying widths</li>
        <li>to test</li>
        <li>things out</li>
    </ul>
</div>
<div id="second">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod felis turpis, quis cursus est ullamcorper eget. Etiam mollis ultricies velit in convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque finibus libero non sapien euismod tempor. Vestibulum posuere placerat odio ut efficitur. Aenean nec mi nulla. In hac habitasse platea dictumst. Integer pellentesque ornare urna sed congue. Suspendisse potenti. Ut pharetra bibendum lectus ut tempus. Donec sit amet felis quis sem faucibus eleifend vel ac mauris.</p>
    <p>Nam tincidunt viverra nunc, eget varius lacus scelerisque eget. Duis fermentum dapibus neque non hendrerit. Suspendisse potenti. Aliquam aliquet metus justo, sit amet lobortis orci scelerisque vitae. Fusce vestibulum pulvinar purus, sed tincidunt ipsum lobortis nec. Mauris mattis arcu sit amet nisi feugiat, ut sagittis tortor suscipit. Nullam molestie nibh magna, vitae vehicula elit consequat non. Nunc venenatis egestas enim, nec pellentesque tortor elementum nec. Proin eu dui a tortor placerat porttitor interdum sit amet ligula.</p>
</div>
</body>
</html>

This should do the trick. The #first section floats to the left without a specified width, allowing its content to define the width. The #second section doesn't overlap with the first one thanks to overflow: hidden. Just keep in mind that this method may not be compatible with IE versions older than 7.

Answer 11

Answer №6

To achieve the desired layout, applying CSS is essential.

.a {

float: left;

}

The content in b will wrap around a element.

Allow the width to adjust automatically based on the data retrieved from the database.

Ensure that the height is controlled to prevent b from dropping below a.

Answer 12

To achieve the desired layout, applying CSS is essential.

.a {

float: left;

}

The content in b will wrap around a element.

Allow the width to adjust automatically based on the data retrieved from the database.

Ensure that the height is controlled to prevent b from dropping below a.

Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Send form data without reloading the page and connect it to a JavaScript script

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Angular Script Linking

Ensure the following elements remain in place once an element has been concealed

The HTML document is having trouble establishing a connection with socketio

Having Trouble Adding a CSS File to Your Django Project? Can't Seem to Get it

What causes Firefox (Mobile) to zoom out of my webpage?

Displaying a loading screen while a jQuery ajax request is in progress

Utilize jQuery to export HTML or JSON data to an Excel spreadsheet

Issue with the back-to-top button arises when smooth-scrolling feature is activated

I am currently working on creating a timer and I am looking to position these three buttons in a circular formation

Tips on how to position a expanding textarea in line with buttons

Obtaining the width of a child table using Jquery

error being triggered due to relative positioning

Using CSS to disable an image map in conjunction with dynamically adjusting CSS styling

When scrolling, dynamically change the background color by adding a class

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

How can I place text on top of an image with a filter using Bootstrap?

Optimizing Angular for search engines: step-by-step guide