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

Creating a linear video playback system

Establish a background image that can be scrolled

Tips for showcasing an image partially with primefaces/jsf

Using CSS to ensure that the cards have consistent heights when using both React and Bootstrap

Is there a way to make an HTML link target the same as JavaScript window.opener?

The backdrop moving in a reverse direction

Utilizing fab-icons with CDN in Next.js version 13.4

React js web application facing excessive content problem

How can I incorporate a custom icon into the <i> tag in HTML like Bootstrap does with its icons?

Struggling to access your account on the Django website?

Retrieve items from the parent row of selected checkboxes

Tips for displaying the initial slide when a tab is loaded on a multi-tab webpage

Learn how to troubleshoot and resolve a bug in the mobile Chrome browser that pertains to the position fixed feature

Include a parent class within the style tags in your CSS code

Craft a Flawlessly Repeating Sound Experience - Online

Issue with rendering Html Element on FireFox compared to Chrome

Struggling to make JavaScript read JSON data from an HTML file

Design a Logo-aligned Header using Bootstrap 4 for a professional and sleek look

Styling menus with CSS

What is the best way to create divs that can close and hide themselves when clicked from inside the div itself?