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

Question

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;
}

html css

Answer 1

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

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 3

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;
}

Answer 4

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;
}

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

Answer №1

Answer №2

Similar questions

Creating a multiline centered navigation bar item using Bootstrap 4

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

Use CSS to create a fullscreen animation for an element

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

How can CSS positioning be utilized to align lines accurately?

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

Exploring the integration of foreign languages within C# code?

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

Elements floating in space, stretching across the entire width

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

Adjusting the range input alters color progressively

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

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

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

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

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

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

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

Troubleshooting: Jquery show effects not functioning as expected

Create fluidly changing pictures within varying div elements