Creating a column in CSS that maximizes width without utilizing 100% or causing text wrap

Trying to keep a three-column div from spilling over the page can be tricky. The first two columns must not exceed 200px, while the third column should be at least 280px wide. The issue arises when there is a table in the third column with long sentences inside td tags causing the column to widen and spill over.

If setting the table width to 100% causes the third column to overflow below the first two columns, you may need to use a fixed width for the table. This contradicts the goal of having the page size itself automatically. Is there a workaround for this dilemma?

<div class="column1">
</div>
<div class="column2">
</div>
<div class="column3">
    <table width="300px"> <!- would prefer 100% -->
    </table>
</div>

CSS Code:

div.column1, div.column2 {
    float: left;
    max-width: 280px;
    padding: 5px;
}

div.column3 {
    float: left;
    min-width: 280px;
    padding: 5px;
}

.column3 table {
    table-layout: fixed;
    word-wrap: break-word;
}

.column3 td {
    white-space: normal;
    word-wrap: break-word;
}

Answer №1

To achieve the desired layout without wrapping your <div>s, you can utilize the calc function along with an overflow container.

Here is the HTML code:

<div class="overflow">
<div class="column1">
    text and text and text and text
</div>
<div class="column2">
    cakes and cakes and cakes and cakes
</div>
<div class="column3">
    <table width="300px">
        <tr><td>pie</td><td>foo</td><td>bar</td></tr>
        <tr><td>left</td><td>center</td><td>right</td></tr>
    </table>
</div>
</div>

The corresponding CSS code is as follows:

*{
    padding:0;
    margin:0;
}
div.overflow{
    min-width:700px;
}
div.column1, div.column2 {
    float: left;
    max-width:200px;
    padding: 5px;
    background-color:red;
}

div.column3 {
    float: left;
    min-width:280px;
    padding: 5px;
    background-color:blue;
    width:calc(100% - 410px);
}

.column3 table {
    table-layout:fixed;
    word-wrap:break-word;
    width:100%;
}

.column3 td {
    white-space: normal;
    word-wrap:break-word;
}

You can view a working example at this link: http://jsfiddle.net/BbJW9/

Answer №2

There are several different strategies that can be used to achieve the desired layout. One option is to utilize table-cell for the columns, as demonstrated in this example.

Example

Are you able to adapt this solution to fit your needs?

CSS

.cols {
    display: table-cell;
    overflow-x: wrap;
}

.left {
    min-width: 10px;
    max-width: 200px;
    height: 200px;
    background-color: red;
    color: white;
}
.middle {
    min-width: 10px;
    max-width: 200px;
    height: 200px;
    background-color: white;
}
.right {
    min-width: 280px;
    height: 200px;
    background-color: blue;
    color: white;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a multiline centered navigation bar item using Bootstrap 4

My navigation bar is functioning properly with single-line items, but encounters alignment issues when dealing with multi-line items: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> ...

Tips for identifying the clicked location inside an element using JavaScript?

Is there a way in JavaScript to find out the exact position of a click within an element, like its distance from the left, right, or center? I'm struggling to determine whether the clicked area is on the left, center, or right side. https://i.stack.i ...

Use CSS to create a fullscreen animation for an element

Is there a way to animate a div element so that it expands to fit the screen when clicked without specifying an initial position? I need the div to be able to adjust dynamically within the screen. .box { width: 80px; height: 80px; background: red; ...

Identifying Oversized Files on Safari Mobile: A Guide to Detecting Ignored Large Files in

Mobile browsers such as Safari have a tendency to ignore large files when passed in through the <input type="file">. For example, testing with a 10mb image file results in no trigger of any events - no change, no error, nothing. The user action is si ...

How can CSS positioning be utilized to align lines accurately?

Recently, I created a basic jsbin to draw a line connecting two points. It doesn't rely on any drawing libraries; just plain JavaScript and jQuery. I managed to calculate the angle using code I found in this library. When dragging the circle at the ...

CSS- Strategically placing and centering images above specific keywords in (any) HTML content without disrupting the flow of text

My main objective involves dynamically inserting images above text on any given page using a content script. The challenge lies in maintaining the proper alignment of the text after adding the images. To achieve this, I surround the words where the image i ...

Exploring the integration of foreign languages within C# code?

In search of a C# expert who can assist me with a question I've been struggling to find an answer for all day. Google searches have yielded outdated information, and I need fresh insight. Wondering if there's a way to incorporate CSS and HTML in ...

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

Currently working on a page layout using Thymeleaf and Bootstrap 5. I have divided the page into two parts, with this section behaving as desired: <main role="main" class="pb-3"> <br> <p>Post office ex ...

Elements floating in space, stretching across the entire width

In my design, I have a fixed size layout with a centered content container. My goal is to have the menu (home, about, contact, login) span 100% of the screen width. You can view the current setup in this jsfiddle: http://jsfiddle.net/Hxhc5/1/ I am aimin ...

Is there a way to validate form elements in HTML prior to submitting the form?

In my form, I am utilizing PHP for validation and processing, but I am interested in verifying elements as they are being filled out. Is there a way to check the current value of an element before the form is submitted? ...

Adjusting the range input alters color progressively

I am trying to create a range input with a dynamic background color that changes as the slider is moved. Currently, the background is blue but I want it to start as red and transition to yellow and then green as the slider moves to the right. Does anyone ...

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

I am currently in the process of customizing a theme and a plugin within WordPress. In the plugin, there is a button that allows users to click on it to bring up a form where they can ask questions. While I want users to post their questions through this p ...

Create an HTML document with a bottom section that shows up on every page when printed

I am currently working on creating a footer for an HTML file where the requirement is to have the footer displayed on each printed page. I came across a solution that fixes specific text to every page that I print. Here is the code snippet: <div class ...

A newline within the source code that does not display as a space when rendered

Written in Chinese, I have a lengthy paragraph that lacks spaces as the language's punctuation automatically creates spacing. The issue arises when inputting this paragraph into VSCode - there's no seamless way to incorporate line breaks in the s ...

What is the most efficient way to convert an entire HTML page into a different language using Django?

As I work on building a website with Django framework, I am faced with the task of translating my web page into French while keeping all other pages in English. <html lang="fr"> Despite setting the code as shown above, I am encountering issues wher ...

CSS code completion in PhpStorm is not functioning properly for Twig extended templates

Currently, I am working with PhpStorm 2016.1 and facing an issue with file autocomplete. The scenario is as follows: @mycss .style {color : red} @base.html.twig [...] <link rel="stylesheet" href="/vendor/mycss.css" /> <!--HERE AUTOCOMPLETE OF s ...

Differences between JavaScript's window.onload and body.onload functionsWhen

My inquiry is similar yet slightly distinct from the one queried here: window.onload vs <body onload=""/> The comparison in that prior query was between utilizing window.onload and inline js. My question pertains to the disparity between ...

Incorporate HTML into server forms while dynamically appending form elements in ASP.NET

I have a database table that stores custom fields for specific forms. While I am able to dynamically build these forms from the code behind, the layout is not visually appealing. I am looking for a way to neatly wrap the form in a table. Below is the code ...

Troubleshooting: Jquery show effects not functioning as expected

Currently, I am facing an issue where I am attempting to display a fixed div using the show function of jQuery. Although the show function itself is working properly, when I try to include an effect from jQuery UI, it does not seem to work as expected. Bot ...

Create fluidly changing pictures within varying div elements

Hello there! I have a form consisting of four divs, each representing a full page to be printed like the one shown here: I've successfully created all the controls using AJAX without any issues. Then, I load the images with another AJAX call, and bel ...