placed three blocks inside the table cell

Question

placed three blocks inside the table cell

Is there a way to align three blocks in the table-cell layout so that p1 is at the top, p2 is at the bottom, and p3 is in the middle?

Here is the corresponding HTML:

  <div id="table">
    <div id="row">
        <div id="r2"></div> 
        <div id="r3"></div>
        <div id="r1">
            <div id="p1">top</div>
            <div id="p3">middle</div>
            <div id="p2">bottom</div> 
        </div>
    </div>
    
  </div>

CSS

    #table{
        display: table;
        width:500px;
        height:500px;
        max-height:500px;
        min-height: 500px;
    }
    #row{
        display:table-row;
    }

#r1, #r2, #r3{
 display:table-cell;
 }

For more information, you can visit - http://jsfiddle.net/2ZF6J/

html css

Answer 1

Answer №1

If you are working with IE7, it's important to note that it does not support the display: table property. In this case, you can achieve a similar layout using floats and absolute positioning.

HTML:

<div id="wrapper">
  <div id="r2"></div>
  <div id="r3"></div>
  <div id="r1">
    <div id="p1">top</div>
    <div id="p3">middle</div>
    <div id="p2">bottom</div>
  </div>
</div>

CSS:

#wrapper {
  width:500px;
  height: 1px;
  min-height: 300px;
}

#r1 {
  position: relative;
  width: 177px;
  border:1px solid black;
}

#r3 {
  width: 156px;
  background-color: #aef;
}

#r2 {
  width: 161px;
  border:1px solid black;
  background-color: #eee;
}

#r1, #r2, #r3 {
  float: left;
  height: 100%;
}

#p1, #p2, #p3 {
  position: absolute;
  width: 100%;
}

#p1 { 
  top: 0;
  background-color: gold; 
}

#p2 { 
  bottom: 0;
  background-color: crimson; 
}

#p3 { 
  top: 50%;
  margin-top: -0.5em;
  background-color: orange; 
}

View the code in action here: http://jsbin.com/ekImIYih/3

Answer 2

If you are working with IE7, it's important to note that it does not support the display: table property. In this case, you can achieve a similar layout using floats and absolute positioning.

HTML:

<div id="wrapper">
  <div id="r2"></div>
  <div id="r3"></div>
  <div id="r1">
    <div id="p1">top</div>
    <div id="p3">middle</div>
    <div id="p2">bottom</div>
  </div>
</div>

CSS:

#wrapper {
  width:500px;
  height: 1px;
  min-height: 300px;
}

#r1 {
  position: relative;
  width: 177px;
  border:1px solid black;
}

#r3 {
  width: 156px;
  background-color: #aef;
}

#r2 {
  width: 161px;
  border:1px solid black;
  background-color: #eee;
}

#r1, #r2, #r3 {
  float: left;
  height: 100%;
}

#p1, #p2, #p3 {
  position: absolute;
  width: 100%;
}

#p1 { 
  top: 0;
  background-color: gold; 
}

#p2 { 
  bottom: 0;
  background-color: crimson; 
}

#p3 { 
  top: 50%;
  margin-top: -0.5em;
  background-color: orange; 
}

View the code in action here: http://jsbin.com/ekImIYih/3

placed three blocks inside the table cell

Answer №1

Similar questions

Tips for concealing lengthy text within a select box and automatically wrapping it when displayed as an option

Rotating the icon in Bootstrap Accordion upon opening

The "Splash Screen Div" page displayed during transitions and page loading

Extract CSS properties to generate a dictionary that maps class names to background images

Is there a way to transfer multiple functions using a single context?

Proper functioning of CSS directional styles is not being achieved

Adjusting the alignment of button text in an Angular Kendo grid

Executing a script for every row in a table using Python and Selenium

"The event triggers the function with an incorrect parameter, leading to the execution of the function with

Locate the nearest date (using JavaScript)

Challenges associated with Bootstrap toggle switch

Adjust the background color using jQuery to its original hue

Steps for incorporating universal style into Angular 6/7 library

Order of stacked divs with absolute positioning

guide on updating JQuery string with JavaScript to incorporate new parameters

What methods are available to load sections of a complex SVG shape asynchronously?

Switching to a dropdown navigation option

I could use some help navigating payment gateways

Is it possible to remove content from a Content Editable container?

The process involves transferring information from a specific div element to a database. This particular div element obtains its data after receiving an appended ID