Creating variable-width DIVs to simulate TABLE column behavior using CSS

I've been struggling for hours trying to recreate the same functionality as an old HTML table layout using DIVs.

Inside a parent DIV, I have a simple three-column setup:

  • Column-1 contains text and should be as narrow as possible without wrapping (meaning it should adjust its width based on the longest word).
  • Column-2 has a fixed width.
  • Column-3 should expand to fill the remaining space and have a button in the upper right corner.

Using tables, this is a piece of cake:

<table><tr>
  <td width=1%>Foo&nbsp;Bar Baz</td>
  <td width=150px><img src="foo.jpg"></td>
  <td width=100%><div style="float:right">Button</div>Other stuff. </td>
</tr></table>

This method works perfectly on all browsers except Firefox due to the table inside the parent DIV.

However, when trying with DIVs and CSS, I can't seem to get things right. Specifically: - I'm unable to determine the CSS rules needed to set the first column's width so that "Foo Bar" stays on one line while "Baz" wraps. - I can't figure out how to make the third column expand to take up the leftover space after the first two columns.

I've experimented with various combinations of width:auto, float:left, and word-wrap properties recommended here and elsewhere online. Am I overlooking something obvious?

htmlcss

Answer №1

I have successfully implemented this solution by incorporating some color changes in my code.

<style>
#container {overflow: hidden; background: #eee}
#box1, #box2 {float: left;}

#box1 {background: #000; width: 1%;}
#box2 {background: #666; width: 150px;}
#box3 {background: #fc0; overflow: hidden}

button {float: right;}
</style>

<div id="container">
    <div id="box1">
        <p>Lorem <br>ipsum<br>dolor<br>sit<br>amet</p>
    </div>
    <div id="box2">
        <p>Lorem <br>ipsum<br>dolor<br>sit<br>amet</p>
    </div>
    <div id="box3">
        <button>button</button>
        Lorem ipsum
    </div>
</div>

http://jsfiddle.net/9X7gy/2/

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

Trouble with background image displaying on meteor platform

Hey there! I'm in the process of replicating the HBO login page without functional links, but for some reason, the background image isn't loading properly. I suspect it might be an issue with resizing the image, but I can't pinpoint the exac ...

cssmeteorjsx

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

javascriptjqueryhtml

Bootstrap container with added page border

Allow me to explain the issue to the best of my ability: I have a design that needs to be implemented using bootstrap. I prefer to use only CSS and avoid JS/jquery. The content is contained within a bootstrap container that has two columns. The left gre ...

htmlcssbootstrap-5

Updating Text within a Label with jQuery

Seeking assistance with a jQuery issue that I am struggling to resolve due to my limited experience. Despite attempting to search for solutions online, I have been unable to find an alternative function or determine if I am implementing the current one inc ...

javascripthtmljquerycssfunction

Challenges with creating a contact form using bootstrap modal

I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong? On iPad, the modal is positioned to the right and down the page instead of in the cente ...

javascriptjqueryhtmlcsstwitter-bootstrap

Contact form in PHP fails to send upon submission

An issue I am currently facing involves a simple php mail server setup in my nodeJS site for managing contact messages. Strangely, when testing it from my local machine, the message does not get routed to the designated email address. I suspect that this c ...

phphtmlformsemail

Can a website be designed to mimic the style of the current operating system?

Is there a way to apply CSS styling to web site elements, such as buttons, that mimics the appearance of operating system (Windows, macOS, Linux) button styles? This would allow HTML buttons to automatically adjust their CSS style whenever I switch theme ...

htmlcss

Tips for saving JavaScript results to a form

Hey there! I'm looking to figure out how to save a JavaScript calculation within a form instead of just displaying an alert or outputting it on another page. Below is the JavaScript code I have for calculating prices. <script type="text/javascript ...

javascripthtmlforms

Cut off text in a dropdown button using Bootstrap 4

I'm encountering an issue with a dropdown button where the text is a combination of a fixed part and a variable part from a database. The variable text can be long, so I need to truncate it. In order to apply bootstrap's .text-truncate class (or ...

cssbootstrap-4

Unable to convert cursor to jpg format

I am facing an issue where I have a jpg file stored in the same folder as my styles.css, and I want to change the cursor on a webpage to this particular jpg file. Despite my efforts, it seems like the cursor is not changing as expected. Currently, I am us ...

htmlcss

Tips for Locating an Element by Its Attribute in JQuery

I currently have a variable that holds a list of selects, and my goal is to filter out only those with a 'dependsOn' attribute set to 'EventType'. My initial attempt below doesn't seem to work as intended and returns a count of 0: ...

javascriptjqueryhtmlcssselect

Switching the background image upon hover while incorporating a subtle fade transition in HTML and CSS

Is there a way to set two background images on a div and have them change when hovering with a fade effect? Similar to the example shown. .kid { max-width:50%; position:relative; } .kid img { display:block; opacity:1; height: auto; transition:.6s ease; ...

htmlcssanimationhoverfade

Step-by-step guide to creating a dropdown menu within a form element, with a variety of selectable values generated in

I am dealing with an array of employees who are assigned tests by a Lead. When tests are being assigned, the selected employee is allocated correctly. Upon review, the Lead can easily see which test is assigned to each employee. However, when the table is ...

htmlangular

Create an HTML form that sends email notifications using a third-party form backend platform

I recently designed a form using Webflow and integrated it with Getform.io for the backend platform. Everything is running smoothly, including data collection and file uploads. However, I now want to enhance the form by enabling it to automatically send ...

phphtmlforms

As the page is resized or zoomed in and out, the div elements start shifting in different directions

When I apply position:absolute to prevent the elements from moving when zooming in and out of the page, they all end up congregating in one place. Can anyone help me with this issue? None of the solutions I've found have worked so far. I'm develo ...

javascripthtmlcss

Can you provide me with a comprehensive list of all the colors available in Twitter Bootstrap 3?

I've integrated the twitter bootstrap sass 3.0.3.0 gem, which is supposed to be the latest version of twitter bootstrap 3.0.3. I'm trying to customize the colors using the 'customize' section of the LESS variables, but I can't seem ...

csstwitter-bootstrap-3bootstrap-sass

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

jquerycssjquery-uigoogle-chromeoperating-system

Mobile Windows Z-Index

Struggling with the z-index issue on a video tag in Windows Mobile, particularly when it comes to my search box. <div portal:substituteby='common/search::search'></div> The goal is for the search box to appear above the video. ...

jqueryhtmlcsshtml5-videoz-index

Tips on effectively utilizing CSS sprites without a border on images

I am currently working on optimizing my website by using sprite images. The image I am using is in png format and looks like this: https://i.sstatic.net/pFhPq.png Here is a snippet of my CSS code: .bg-upperbar_1 { width: 55px; height: 55px; bac ...

csssprite

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...

htmlcss