Jump to content

two side-by-side divs with differant amounts of text

hikingwithu2

By hikingwithu2
in CSS

 Share

Recommended Posts

hikingwithu2 Newbie

hikingwithu2

Posted
Posted

When making two side-by-side divs with different amounts of text in them, and coloring the background, the two divs are of different heights. Now, I can use the style/height to set a height in pixels for the two divs, but I seem to recall seeing something in the w3schools site that showed how to make the two divs automatically the same height without setting the height in pixels. Or am I mistaken?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

There's either flexbox or setting the display to table-cell wrapped in an element with a table-row display. I don't think either of these techniques are shown in the tutorials. Personally I'd go with the table-cell option and remove the cell display with media queries on mobile devices.

Link to comment
Share on other sites
hikingwithu2 Newbie

hikingwithu2

Posted
  • Author
Posted

hmm, yeah, those do not sound familiar at all, but for some reason, in the back of my mind, I just seem to recall seeing something about those two divs being automatically drawn to the same size without the use of tables. I don't like using tables for layout, they are for data.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

This isn't a table, it's merely using the table layout algorithm on elements that aren't tables. 

<div class="grid">
  <div class="column">
    Column 1
  </div>
  <div class="column">
    Column 2
  </div>
</div>
.grid {
  display: table-row;
  border-collapse: collapse;
}
.grid .column {
  display: table-cell;
  background: #F0F0F0;
}

/* Phones are too small to display things side-by-side */
@media screen and (max-width:640px) {
  .grid,
  .grid .column {
    display: block;
  }
}

 

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

I used flex, and inserted a title description using content: property, because you lose the ability of what cell relates to what header, if stacked above each other. 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <style type="text/css">
            .tableWrap {max-width: 980px; margin: 0 auto; padding: 15px;}

            .tableWrap .headers {font-weight: bold;}

            /*////////////////////////////////////////////////////*/
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;

                box-sizing: border-box;
            }

            html, body  {
                height: 100%;
                /*  width: 100%;*/
                margin:0;
            }

            body {
                font-family: sans-serif;
                line-height: 1.4;
            }

            h1 {
                font-size: 150%;
            }

            p {
                margin-bottom: 10px;
            }

            .paddingBlock {
                padding: 20px 0;
            }

            .eqWrap {
                display: flex;
            }

            .eqWrap:nth-of-type(odd) {
                background: yellow;
            }
            .headers .eq:nth-of-type(1), .eq:nth-of-type(1) {
                max-width: 23%;
                min-width: 200px;
            }
            .headers .eq:nth-of-type(2),  .eq:nth-of-type(2) {max-width: none; width: auto; min-width: 1px;}
            .headers .eq:nth-of-type(3), .eq:nth-of-type(3) {
                max-width: 12%;
                min-width: 120px;

            }
            .headers .eq:nth-of-type(4), .eq:nth-of-type(4){max-width: 9%; min-width: 92px;}
            .headers .eq:nth-of-type(5), .eq:nth-of-type(5) {
                max-width: 14%;
                min-width: 137px;
            }

            .eqWrap:nth-of-type(even) {
                background: lightblue;
            }

            .equalHMWrap {
                justify-content: space-between;
            }

            .equalHM {
                width: 32%;
            }

            .equalHMRWrap {
                justify-content: space-between;
                flex-wrap: wrap;
            }

            .equalHMR {
                width: 32%;
                margin-bottom: 2%;
            }

            .equalHMVWrap {
                flex-wrap: wrap;
            }

            .equalHMV {
                width: 32%;
                margin: 1%;
            }

            .equalHMV:nth-of-type(3n) {
                margin-right: 0;
            }

            .equalHMV:nth-of-type(3n+1) {
                margin-left: 0;
            }

            /*///////////////////////////////////*/


            .equalHW {
                flex: 1;
                width: 19%;

            }
            .eq {
                padding: 10px;
                border: 1px solid #000;
            }
            .eqWrap {
                display: flex;
            }
            .tempHeader {display: none;}

            .empty_cell {text-align: center;}

            @media only screen and (max-width: 768px) {
                .eqWrap {display: block;}
                .tableWrap .eq, .tableWrap .headers .eq {

                    width: 100%;/**/
                    max-width: none;
                }
                .tableWrap .headers {display: none;}
                .headers .eq:nth-of-type(1), .tableWrap  .equalHW.eq.tempHeader {width: 100% !important; display: block; max-width: none ; font-weight: bold; }
                .equalHWrap.eqWrap.data {margin-bottom: 10px;}
                .empty_cell {text-align: left;}

                .eq:before {content: ""; display: block; font-weight: bold; border-bottom: 1px solid #000; margin: -10px -10px 10px; padding: 10px}
                .eq:nth-of-type(1):before {content: "Game";}
                .eq:nth-of-type(2):before {content: "Opponent";}
                .eq:nth-of-type(3):before {content: "Location";}
                .eq:nth-of-type(4):before {content: "Time";}
                .eq:nth-of-type(5):before {content: "Result";}

                .eq{

                    min-height: 5.54em;
                }


            }


        </style>
    </head>
    <body>
        <!-- <table class="bb_table_wide" width="100%" cellspacing="0" cellpadding="0" border="0"><tbody><tr><th nowrap="">Game Date</th>
                     <th>Opponent</th>
                     <th>Location</th>
                     <th>Time</th>
                     <th>Results</th>
                 </tr><tr><td nowrap="">Sat, August 26th 2017</td>
                     <td>
                         Imhotep Charter / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         1:00 PM					</td>
                     <td>As Scheduled</td>
                 </tr><tr><td nowrap="">Sat, September 2nd 2017</td>
                     <td>
                         Bishop McDevitt Crusaders / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         1:00 PM					</td>
                     <td>As Scheduled</td>
                 </tr><tr><td nowrap="">Fri, September 15th 2017</td>
                     <td>
                         @ Pottsville Area / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         7:00 PM					</td>
                     <td>As Scheduled</td>
                 </tr><tr><td nowrap="">Sat, September 23rd 2017</td>
                     <td>
                         Central Dauphin East Panthers / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         1:00 PM					</td>
                     <td>
                         unplayed
                     </td>
                 </tr><tr><td nowrap="">Sat, September 30th 2017</td>
                     <td>
                         Hershey Trojans / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         1:00 PM					</td>
                     <td>As Scheduled</td>
                 </tr><tr><td nowrap="">Fri, October 6th 2017</td>
                     <td>
                         @ Chambersburg Trojans / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         7:00 PM					</td>
                     <td>As Scheduled</td>
                 </tr><tr><td nowrap="">Sat, October 14th 2017</td>
                     <td>
                         @ Central Dauphin Rams / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         12:30 PM					</td>
                     <td>
                         unplayed
                     </td>
                 </tr><tr><td nowrap="">Sat, October 21st 2017</td>
                     <td>
                         State College Little Lions / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         1:00 PM					</td>
                     <td>As Scheduled</td>
                 </tr><tr><td nowrap="">Fri, October 27th 2017</td>
                     <td>
                         @ Carlisle Thundering Herd / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         7:00 PM					</td>
                     <td>As Scheduled</td>
                 </tr><tr><td nowrap="">Sat, November 4th 2017</td>
                     <td>
                         Cumberland Valley Eagles / Regular Season								</td>
                     <td>
                     </td>
                     <td>
                         1:00 PM					</td>
                     <td>
                         <a href="/harrisburg-2017-schedule/boxscore/179.html">
                             W 			6 - 5						</a>
                     </td>
                 </tr></tbody></table>-->

        <div class="tableWrap">
            <div class="equalHWrap eqWrap headers">
                <div class="game-date equalHW eq">Game Date</div>
                <div class="opponents equalHW eq">Opponents</div>
                <div class="location equalHW eq">Location</div>
                <div class="time equalHW eq">Time</div>
                <div class="results equalHW eq">Results</div>
            </div>
            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Sat, August 26th 2017</div>
                <div class="opponents equalHW eq">Imhotep Charter / Regular Season</div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM</div>
                <div class="results equalHW eq">As Scheduled</div>
            </div>
            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Sat, September 2nd 2017</div>
                <div class="opponents equalHW eq">Bishop McDevitt Crusaders / Regular Season</div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM</div>
                <div class="results equalHW eq">As Scheduled</div>
            </div>
            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Fri, September 15th 2017</div>
                <div class="opponents equalHW eq">@ Pottsville Area / Regular Season</div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">7:00 PM </div>
                <div class="results equalHW eq">As Scheduled</div>
            </div>

            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Sat, September 23rd 2017</div>
                <div class="opponents equalHW eq">Central Dauphin East Panthers / Regular Season</div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM </div>
                <div class="results equalHW eq">unplayed</div>
            </div>
            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Sat, September 30th 2017</div>
                <div class="opponents equalHW eq">Hershey Trojans / Regular Season </div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM </div>
                <div class="results equalHW eq">As Scheduled</div>
            </div>
            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Fri, October 6th 2017</div>
                <div class="opponents equalHW eq">@ Chambersburg Trojans / Regular Season </div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM </div>
                <div class="results equalHW eq">As Scheduled</div>
            </div>
            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Sat, October 14th 2017</div>
                <div class="opponents equalHW eq">@ Central Dauphin Rams / Regular Season</div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM </div>
                <div class="results equalHW eq">unplayed</div>
            </div>
            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Sat, October 21st 2017</div>
                <div class="opponents equalHW eq">State College Little Lions / Regular Season </div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM </div>
                <div class="results equalHW eq">As Scheduled</div>
            </div>

            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Fri, October 27th 2017</div>
                <div class="opponents equalHW eq">@ Carlisle Thundering Herd / Regular Season </div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM </div>
                <div class="results equalHW eq">As Scheduled</div>
            </div>

            <div class="equalHWrap eqWrap data">
                <div class="game-date equalHW eq">Sat, November 4th 2017</div>
                <div class="opponents equalHW eq">Cumberland Valley Eagles / Regular Season </div>
                <div class="location equalHW eq"></div>
                <div class="time equalHW eq">1:00 PM </div>
                <div class="results equalHW eq"><a href="/harrisburg-2017-schedule/boxscore/179.html">W 6 - 5</a></div>
            </div>

        </div>

    </body>
</html>

I know yours is just two columns, but this shows you what can be achieved. the original table is commented out.

Link to comment
Share on other sites
  • 1 month later...
hikingwithu2 Newbie

hikingwithu2

Posted
  • Author
Posted
On 11/1/2017 at 11:31 AM, Ingolme said:

There's either flexbox or setting the display to table-cell wrapped in an element with a table-row display. I don't think either of these techniques are shown in the tutorials. Personally I'd go with the table-cell option and remove the cell display with media queries on mobile devices.

Here's the reference - https://www.w3schools.com/w3css/w3css_layout.asp

Layout Cells Adjust to Equal Height
Side-by-side w3-cell elements will also automatically self-adjust to equal height:
I'm still having this problem, though it is not 100%, it might be more like 10%.

Link to comment
Share on other sites
hikingwithu2 Newbie

hikingwithu2

Posted
  • Author
Posted
On 11/1/2017 at 11:31 AM, Ingolme said:

There's either flexbox or setting the display to table-cell wrapped in an element with a table-row display. I don't think either of these techniques are shown in the tutorials. Personally I'd go with the table-cell option and remove the cell display with media queries on mobile devices.

Here's the reference - https://www.w3schools.com/w3css/w3css_layout.asp

Layout Cells Adjust to Equal Height
Side-by-side w3-cell elements will also automatically self-adjust to equal height:
I'm still having this problem, though it is not 100%, it might be more like 10%.

Link to comment
Share on other sites
hikingwithu2 Newbie

hikingwithu2

Posted
  • Author
Posted (edited)

Ok, I think I have something on this topic - the two cells do indeed always match sizes as long as the cell to the right is the same or small height as the cell on the left. If the right-cell is taller, the left-cell will not adjust and match the height. It appears to work only with the right-cell matching the left-cell. I haven't done any extra testing yet, but that appears to be what is happening.

What I have done today is put some text in the left-cell and an image in the right-cell, if the image is taller than what the left-cell wants for the its own text, then the right-cell (image cell) grows taller. If I put more text in the left-cell it will grow automatically of course, but the right-cell will also grow to match it.

Edit: I might be wrong afterall, as I just tried it with two div of text and no matter how much text is in either, the two side by side divs will not align to the same height. It's very strange, as I use side by side boxes in many places and they all align perfectly no matter what is in each of them.  More testing...

More testing shows the right-cell follows the left-cell for height. As the left-cell changes height the right-cell will follow, but it does not work in the reverse. More testing...

Edited by hikingwithu2
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

display: flex; and display: table options 

<!DOCTYPE html>
<html>
<head>
<title>document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.flex_parent {display: flex; flex-wrap: wrap;}
.flex_child {flex: 1 0 290px; background-color: red; padding: 10px;}
.flex_child:first-child {background-color: lime;}

.table_parent {display: table; min-width: 100%; }

.table_child {display: table-cell; background-color: red; padding: 10px; min-width: 290px;}
.table_child:first-child {background-color: lime;}

@media screen and (max-width:580px) {
.table_child {
    display: block;
  }
}

</style>

</head>
<body>

<div class="flex_parent">
<div class="flex_child">
  <p>Hello CSS flex Layout.</p>
    <p>Hello CSS flex Layout.</p>
      <p>Hello CSS flex Layout.</p>
</div>

<div class="flex_child">
  <p>Hello CSS flex Layout.</p>
  <p>Hello CSS flex Layout.</p>
</div>
</div>
<hr>
<div class="table_parent">

<div class="table_child">
  <p>Hello CSS table Layout.</p>

</div>

<div class="table_child">
  <p>Hello CSS table Layout.</p>
  <p>Hello CSS table Layout.</p>
</div>

</div>
</body>
</html>

 

Link to comment
Share on other sites
hikingwithu2 Newbie

hikingwithu2

Posted
  • Author
Posted

I found my problem, and hopefully others searching these forums can learn from my mistake - I removed a level of div that was overriding a previously called div. The second div had display:block which was overriding the previous div which has display:table-cell. The two divs now match each others heights as described in the docs. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...