Div-based table design

Question

Div-based table design

I'm facing an issue that I can't seem to resolve on my own, so if anyone has any advice or solutions, I would greatly appreciate it:


________________________________________________________________________________
|       body                                                                    |
|                                                                               |
| ___________   _______________________________________________________________ |
| |          | |                                                               ||           
| |  div B   | |                                                               ||
| |          | |                                                               ||
| |__________| |                                                               ||
|              |     div C                                                     ||
|              |                                                               ||
|              |                                                               ||
|              |                                                               ||
|              |                                                               ||
|              |                                                               ||
|              |                                                               ||
|              |_______________________________________________________________||
|_______________________________________________________________________________|

Here is the code I've been working with:


<body>
...
<div style="float: left;">...</div>
<div style="float: left;">...</div>
...
</body>

The problem arises when the text in div C exceeds the width of div C itself (as shown in the outline). This causes div C to shift its position under div B, taking up the entire width of the body.

Is there a way to prevent div C from changing its position without specifying specific size values?

Thank you!

P.S. I've attempted placing div B and div C inside a display:block or display:inline-block div, but haven't had any success.

css html

Answer 1

Answer №1

To achieve the desired layout, try implementing techniques involving negative margins or utilizing the CSS property display: table/table-cell.

Answer 2

To achieve the desired layout, try implementing techniques involving negative margins or utilizing the CSS property display: table/table-cell.

Answer 3

Answer №2

Problem Solved: Width Issue

If you set the width of both elements using percentages, such as 10% and 90%, you can eliminate this issue by applying overflow:hidden|scroll|auto to the div C

Solution for Positioning:

To fix the positioning, ensure the parent has position:relative and adjust the CSS for div C:

.divC{
position:absolute;
top:0;
right:0;
}

Answer 4

Problem Solved: Width Issue

If you set the width of both elements using percentages, such as 10% and 90%, you can eliminate this issue by applying overflow:hidden|scroll|auto to the div C

Solution for Positioning:

To fix the positioning, ensure the parent has position:relative and adjust the CSS for div C:

.divC{
position:absolute;
top:0;
right:0;
}

Answer 5

Answer №3

Did you set the widths for div B and div C? If not, consider the following:

.divB, .divC{ width:50%;}

Not assigning widths to the divs will result in them adjusting based on their content.

Answer 6

Did you set the widths for div B and div C? If not, consider the following:

.divB, .divC{ width:50%;}

Not assigning widths to the divs will result in them adjusting based on their content.

Div-based table design

Answer №1

Answer №2

Answer №3

Similar questions

Determine if the webpage is the sole tab open in the current window

The moment a file is uploaded from an HTML page, control is passed on to the servlet

Steps for creating a resizable and automatically hiding side menu

what is the process for creating a dynamic display slide in bxslider?

Unable to successfully append a unique character using jQuery

Firefox displays CSS inaccurately due to inconsistent spacing

What steps are involved in extracting a Flot animation?

Maintaining the proportions of images in different screen sizes when resizing

Is there a way to initiate an Edge animation when an onclick event occurs?

Adjust the color of radio button text with Jquery

Avoid allowing users to accidentally double click on JavaScript buttons

"Integrating information from a MySQL database into an existing HTML document: A step-by-step guide

Creating a linear video playback system

Start up a server-side JavaScript instance utilizing Express

InnerHTML failing to append HTML content

Issue with the Textualizer effect in HTML not functioning properly

Toggle the visibility of an HTML element and dynamically change the text of a button

Unexpected behavior found in certain parts of jquery due to the implementation of Ajax

Optimize your texture loading process by dynamically swapping out low resolution textures with high resolution ones to enhance overall visual quality

Sticky positioning for dropdown menu in table column body