What is the best method for transforming this table design into a div structure?

Question

What is the best method for transforming this table design into a div structure?

After being told by a friend to try using the div layout, I've been struggling to make it work for my needs.

My goal is to achieve the layout shown in the diagram below:

+-----------------------------------------+
|           Fixed Height = 50             |
+-----------------------------------------+
|         |                  |            |
|         |                  |            |
|  Fixed  |     Whatever     |    Fixed   |
|  Width  |     Remains      |    Width   | Total Height = 500px
|    =    |      In All      |      =     | Total Width  = 600px
|   150   |    Directions    |     150    |
|         |                  |            |
|         |                  |            |
|         |                  |            |                    
+-----------------------------------------+
|           Fixed Height = 50             |
+-----------------------------------------+

The desired transformation is from http://jsfiddle.net/qPgVx/ . to http://jsfiddle.net/blineberry/juckh/7/ (utilizing divs instead).

This customization is essential because the entire form needs to be adjustable with JavaScript and the center part should flexibly expand and contract.

Unfortunately, I'm facing an issue where the middle section doesn't fill up the height. How can I resolve this?

html css

Answer 1

Answer №1

Take a look at: http://jsfiddle.net/thirtydot/kBHCR/

By adjusting the width and height of .Window, you can see that everything resizes accordingly.

This method is compatible with IE7+ and all modern browsers.

However, it is important to note that this approach does not work in IE6. If IE6 support is required, alternatives like using JavaScript specifically for IE6 or sticking with a <table> may be necessary. But keep in mind, supporting IE6 may come with its challenges.

CSS Styles:

.Window {
    width: 600px;
    height: 500px; 
    background-color: rgb(0,0,0); 
    position: relative;
}
.Window-Top {
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgb(128,128,128); 
    background-image: -webkit-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -moz-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -o-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -ms-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
}
.Window-Bottom {
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0,128,128);
}
.Window-Content {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
}
.Window-Content-Left {
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(255,0,0);
}
.Window-Content-Right {
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(0,0,255);
}
.Window-Content-Content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 150px;
    background-color: rgb(0,255,0);
}

Answer 2

Take a look at: http://jsfiddle.net/thirtydot/kBHCR/

By adjusting the width and height of .Window, you can see that everything resizes accordingly.

This method is compatible with IE7+ and all modern browsers.

However, it is important to note that this approach does not work in IE6. If IE6 support is required, alternatives like using JavaScript specifically for IE6 or sticking with a <table> may be necessary. But keep in mind, supporting IE6 may come with its challenges.

CSS Styles:

.Window {
    width: 600px;
    height: 500px; 
    background-color: rgb(0,0,0); 
    position: relative;
}
.Window-Top {
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgb(128,128,128); 
    background-image: -webkit-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -moz-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -o-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -ms-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
}
.Window-Bottom {
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0,128,128);
}
.Window-Content {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
}
.Window-Content-Left {
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(255,0,0);
}
.Window-Content-Right {
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(0,0,255);
}
.Window-Content-Content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 150px;
    background-color: rgb(0,255,0);
}

Answer 3

Answer №2

A friend of mine recommended using the div layout, but I'm having trouble getting it to work.

Let's address the myth that "Tables are evil." In reality, if a table works well for your needs, there's no need to switch to a different layout.

However, I am struggling to make the div layout function properly.

It's true that simulating a table with divs can be challenging. Those advocating against tables should provide simpler and more reliable alternatives using CSS. While CSS is powerful, achieving equal heights for multiple elements without JavaScript is not straightforward.

If you're determined to give it a try (which I recommend for learning purposes), look up "css multi-column layout" on the internet to better understand the limitations of CSS.

For starters, read this informative article: Multi-Column Layouts Climb Out of the Box

Answer 4

A friend of mine recommended using the div layout, but I'm having trouble getting it to work.

Let's address the myth that "Tables are evil." In reality, if a table works well for your needs, there's no need to switch to a different layout.

However, I am struggling to make the div layout function properly.

It's true that simulating a table with divs can be challenging. Those advocating against tables should provide simpler and more reliable alternatives using CSS. While CSS is powerful, achieving equal heights for multiple elements without JavaScript is not straightforward.

If you're determined to give it a try (which I recommend for learning purposes), look up "css multi-column layout" on the internet to better understand the limitations of CSS.

For starters, read this informative article: Multi-Column Layouts Climb Out of the Box

Answer 5

Answer №3

To achieve this, you can utilize the display:table property

Take a look at this demonstration:

http://jsfiddle.net/qPgVx/17/

OR

If your height is fixed, consider implementing it in this manner:

http://jsfiddle.net/qPgVx/20/

Answer 6

To achieve this, you can utilize the display:table property

Take a look at this demonstration:

http://jsfiddle.net/qPgVx/17/

OR

If your height is fixed, consider implementing it in this manner:

http://jsfiddle.net/qPgVx/20/

Answer 7

Answer №4

Opt for floating divs to position the middle three divs.

.Panel-Left {   
  ... 
  float:left;
  ...
}

.Panel-Right {   
  ... 
  float:right;
  ...
}

Remember to clear the floats when necessary:

clear: both;

Answer 8

Opt for floating divs to position the middle three divs.

.Panel-Left {   
  ... 
  float:left;
  ...
}

.Panel-Right {   
  ... 
  float:right;
  ...
}

Remember to clear the floats when necessary:

clear: both;

Answer 9

Answer №5

For more information, you can check out this link or this one.
In essence, they utilize margins on the central <div> and then position the sidebars within the margins while ensuring they appear to be of the same height.

If you want to see an example in action, take a look at this jsfiddle

Answer 10

For more information, you can check out this link or this one.
In essence, they utilize margins on the central <div> and then position the sidebars within the margins while ensuring they appear to be of the same height.

If you want to see an example in action, take a look at this jsfiddle

Answer 11

Answer №6

To achieve a fixed dimension layout, you can implement the following approach:

http://jsfiddle.net/qPgVx/9/

The key is to float the three middle divs and complement them with another div using clear:both for proper alignment. For more detailed information, refer to this link.

UPDATE: If you require a liquid layout, consider exploring this example:

http://www.alistapart.com/d/negativemargins/ex5.htm

This resource from the article discusses innovative solutions:

http://www.alistapart.com/articles/negativemargins/

An issue often faced is the middle column not extending to full height, resolved using "faux columns" technique. It involves utilizing background images or wrapper divs to mimic the middle column's background color. Further insights on faux columns can be found here:

http://www.alistapart.com/articles/fauxcolumns/

Answer 12

To achieve a fixed dimension layout, you can implement the following approach:

http://jsfiddle.net/qPgVx/9/

The key is to float the three middle divs and complement them with another div using clear:both for proper alignment. For more detailed information, refer to this link.

UPDATE: If you require a liquid layout, consider exploring this example:

http://www.alistapart.com/d/negativemargins/ex5.htm

This resource from the article discusses innovative solutions:

http://www.alistapart.com/articles/negativemargins/

An issue often faced is the middle column not extending to full height, resolved using "faux columns" technique. It involves utilizing background images or wrapper divs to mimic the middle column's background color. Further insights on faux columns can be found here:

http://www.alistapart.com/articles/fauxcolumns/

What is the best method for transforming this table design into a div structure?

Answer №1

Answer №2

Answer №3

http://jsfiddle.net/qPgVx/17/

http://jsfiddle.net/qPgVx/20/

Answer №4

Answer №5

Answer №6

Similar questions

The "(click)" event doesn't fire upon clicking a material icon

Difficulty encountered in positioning a div element

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Ways to align two buttons side by side in HTML

Utilizing box-sizing for the creation of an internal border

Footer disappearing on iPad Safari viewing

I have a vision of creating a unique Countdown Stopwatch that meets all my

Is there a way to prevent Bootstrap offcanvas from causing the website to scroll?

Looking for assistance with arranging Divs in HTML?

The new version 5.1 of Bootstrap modal does not disable scrolling on the <body> element

Tips on concealing JavaScript values from being detected during web inspection

creating a responsive form with angular flex layout

I encounter internal server errors when trying to upload images in React

Fully conceal a DIV while the webpage is loading

The user uploads an image to the server, which is then assigned as the background-image for a div element

Loading a link within a Vue.js component is a seamless process

Utilizing ngx-bootstrap Modal for Data Transfer to Component

Set the input of a component in Angular to determine its width

Setting up a global CSS and SASS stylesheet for webpack, TypeScript, Phaser, and Angular: A step-by-step guide

Executing a function within a ng-repeat iteration