Wrapper not extending with child div elements

Hi all,

This is probably a really simple answer but for some reason I’m suffering a mind block!

Please take a look at my example page:

http://christopherbush.co.uk/community-redesign/logbook.html

Can anyone tell me why the left and right columns aren’t extending with the middle one? The wrapper is extending but the left and right columns should be also - I’ve tried min-height: 100% but that doesn’t work either. Basically, I need equal height columns but only to the bottom of the wrapper, not the whole page because something will be going under it.

As long as your normal CSS does not dork with the table styles this will get you in the ball park. Disable the floats on the columns and any widths or heights except as shown at the top of this page.

It’s your basic 3 column CSS table forming the columns.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>template</title>
<!--
http://christopherbush.co.uk/community-redesign/logbook.html
-->
<style type="text/css">
.table {
	display:table;
	table-layout:fixed;
	width:100%;
}
.left-column, .middle-column, .right-column {
	display:table-cell;
	vertical-align:top;
	outline:1px dashed magenta;  /* TEMPORARY Outline for testing. */
}
.left-column, .right-column {
	width:25%
}
</style>
</head>

<body>
<!--- Top Avert --->
<div class="adspace-top"> 
  <!--- Ad code for top advert will follow ---> 
  <img src="images/adspace-top.png" /> 
  <!--- End of ad code ---> 
</div>
<!-- Main Wrapper --->
<div class="main-wrapper">
<!--- Wrapper Header --->
<div class="wrapper-header">
  <div class="wrapper-header-left"> </div>
  <div class="wrapper-header-right">
    <div class="header-menu">
      <ul class="header-menu-list">
        <li class="header-menu-bridge"><a class="bridge" href="#">Bridge</a></li>
        <li class="header-menu-logbook"><a class="logbook" href="#">Logbook</a></li>
        <li class="header-menu-chatguide"><a class="guide" href="#">Chat Guide</a></li>
        <li class="header-menu-news"><a class="news" href="#">News</a></li>
        <li class="header-menu-safety"><a class="safety" href="#">Chat Safety</a></li>
        <li class="header-menu-support"><a class="support" href="#">Chat Support</a></li>
      </ul>
    </div>
  </div>
</div>
<!--- Left Column -->
    <div class="table">
        <div class="left-column">
            <div class="left-top">
            </div>
            <div class="left-middle">
                <ul class="left-menu">
                    <li class="left-menu-mypage"> <a class="left-menu-item" href="#"> My Page </a> </li>
                    <li class="left-menu-profile"> <a class="left-menu-item" href="#"> Profile </a> </li>
                    <li class="left-menu-logbook"> <a class="left-menu-item" href="#"> Logbook </a> </li>
                    <li class="left-menu-shipmail"> <a class="left-menu-item" href="#"> Shipmail </a> </li>
                    <li class="left-menu-gallery"> <a class="left-menu-item" href="#"> Photo Gallery </a> </li>
                    <li class="left-menu-album"> <a class="left-menu-item" href="#"> Photo Album </a> </li>
                    <li class="left-menu-friends"> <a class="left-menu-item" href="#"> Friends List </a> </li>
                    <li class="left-menu-rank"> <a class="left-menu-item" href="#"> Rank </a> </li>
                    <li class="left-menu-stats"> <a class="left-menu-item" href="#"> My Stats </a> </li>
                    <li class="left-menu-chest"> <a class="left-menu-item" href="#"> My Treasure Chest </a> </li>
                    <li class="left-menu-toplists"> <a class="left-menu-item" href="#"> Top Lists </a> </li>
                    <li class="left-menu-bridge"> <a class="left-menu-item" href="#"> The Bridge </a> </li>
                    <li class="left-menu-guide"> <a class="left-menu-item" href="#"> Chat Guide </a> </li>
                    <li class="left-menu-find"> <a class="left-menu-item" href="#"> Find a Chatter </a> </li>
                    <li class="left-menu-settings"> <a class="left-menu-item" href="#"> Settings </a> </li>
                </ul>
            </div>
            <div class="left-bottom">
                <div class="chatshop">
                <div class="chatshop-title">
                ChatShop & Fun
                </div>
                    <ul class="chatshop">
                        <li class="features"> <a class="other-links" href="#">Premium Features</a></li>
                        <li class="games"><a class="other-links" href="#">Games</a></li>
                    </ul>
                </div>
                <div class="other-links">
                    <div class="other-links-title">
                    Links
                    </div>
                        <ul class="other-links">
                            <li class="vgt"> <a href="#"> VGT </a> </li>
                            <li class="forum"> <a href="#"> Forum </a> </li>
                            <li class="chattiquette"> <a href="#"> Chattiquette </a> </li>
                            <li class="fansites"> <a href="#"> Fan sites </a> </li>
                        </ul>
                </div>
            </div>
        </div>
        <!--- Middle Column --->
        <div class="middle-column">
            <div class="grid-container">
                <div class="logbook-title">
                Logbook
                </div>
                    <div class="logbook-1">
                        Example logbook message!!!
                    </div>
                    <div class="logbook-2">
                        Example logbook message!!!
                    </div>
                    <div class="logbook-3">
                        Example logbook message!!!
                    </div>
                    <div class="logbook-4">
                        Example logbook message!!!
                    </div>
                    <div class="logbook-5">
                        Example logbook message!!!
                    </div>
                </div>
            </div>
        <!--- Right Column --->
        <div class="right-column"></div>
    </div>
</div>
</body>
</html>

Open the page in your browser without an external stylesheet. You should be able to get the idea. Then see if your external stylesheet destroys it. :slight_smile:

1 Like

That’s happening because of the float property on left and right columns.

Try and see if these works at a time or use both.

display:block;
overflow:hidden;

It is a simple answer in such as that most elements do not match their height on unrelated elements unless you use the display:table/cell properties as Ronpat has shown above or you use something like flexbox (modern browsers only).

You cannot size a floated column to be 100% high of a parent that does not have a fixed height (content height or auto height is of no use) and if the parent has a percentage height then an unbroken chain of percentage heights must be maintained all the way back to html and body. Even if you did manage that approach the height would be limited to 100% of viewport height and not expand anyway.

Suffice to say that any attempt to equalise columns by using min-height (or height) in percentages is doomed to failure.

What you need to is to use a construct that automatically equalises columns without any need for any special tricks or height settings. This can be done as Ron has shown above using the display:table-cell settings which will work back to ie8 and will manage the column height automatically.

If you only want modern browser support then flexbox can do the same sort of thing and with less code but more complexity to understand. You could add the following to the end of your css file and it should sort oout the column heights:

.main-wrapper{display:flex;flex-wrap:wrap}
.left-column,.right-column{flex:1 0 25%}

It will need testing though and indeed you seem to have designed the page for 1000px width minimum which is not good for responsive design and I feel you should take a step back and create a responsive site from the get go and use more manageable techniques to control your layout.

You will also need to look at getting responsive ads as fixed banners of 960px wide are always going to break smaller devices.

They will have no effect here but thanks for trying:)

ohh ok :slight_smile:

Thank you Paul. I will try your suggestions.

I do plan on making the site fully responsive. I was going to utilise the @media query in the CSS to alrer the layout for different screen sizes so this is only one version of the site you’re lookin at now.

As for the advert. That is just a placeholder image showing where the ads will go. The actual ad code will of course be outputting responsive ads :wink:

Hi all :slight_smile:

Sorry it’s taken me so long to get back to this - I’ve been busy with other projects.

I’m back on this for now and I’ve gone with your suggestions, which are working great! I’m using the same method on another page and it’s also working great - with just one question:

Here is the page:

http://christopherbush.co.uk/cbresources.uk/lycos/shipmail.php

Here is the HTML:

<div class="table-shipmails">
  <ul class="shipmail-table">
    <div class="table-shipmails-check">
      <li class="shipmail-head">
        <input type="checkbox" /> </li>
      <li class="shipmail-item">
        <input type="checkbox" /> </li>
      <li class="shipmail-item">
        <input type="checkbox" /> </li>
      <li class="shipmail-item">
        <input type="checkbox" /> </li>
      <li class="shipmail-item">
        <input type="checkbox" /> </li>
      <li class="shipmail-item">
        <input type="checkbox" /> </li>
    </div>

    <div class="table-shipmails-left">
      <li class="shipmail-head"> From </li>
      <li class="shipmail-item"> <span class="male"> ChatName </span> </li>
      <li class="shipmail-item"> <span class="female"> ChatName </span> </li>
      <li class="shipmail-item"> <span class="female"> ChatName </span> </li>
      <li class="shipmail-item"> <span class="male"> ChatName </span> </li>
      <li class="shipmail-item"> <span class="male"> ChatName </span> </li>
    </div>

    <div class="table-shipmails-middle">
      <li class="shipmail-head"> Subject </li>
      <li class="shipmail-item"> Hello </li>
      <li class="shipmail-item"> How are you? </li>
      <li class="shipmail-item"> What you up to? </li>
      <li class="shipmail-item"> Where you been? </li>
      <li class="shipmail-item"> You busy tomorrow? </li>
    </div>

    <div class="table-shipmails-right">
      <li class="shipmail-head"> Date </li>
      <li class="shipmail-item"> 13-Dec-2016 </li>
      <li class="shipmail-item"> 13-Dec-2016 </li>
      <li class="shipmail-item"> 13-Dec-2016 </li>
      <li class="shipmail-item"> 13-Dec-2016 </li>
      <li class="shipmail-item"> 13-Dec-2016 </li>
    </div>
  </ul>
</div>

And here is the CSS :

body {
  margin: 0;
  padding-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  background-color: #D9E2E1;
  min-width: 1024px;
  font-family: "trebuchet ms";
}

ul li {list-style-type:none;}

.display-shipmails {
  padding: 10px;
  background-color: #c4c4c4;
  border-radius: 10px;
}

.table-shipmails {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table-shipmails-left,
.table-shipmails-middle,
.table-shipmails-right,
.table-shipmails-check {
  display: table-cell;
  vertical-align: top;
}

.table-shipmails-check {
  width: 5%;
}

.table-shipmails-left {
  width: 25%
}

.table-shipmails-right {
  width: 20%
}

.shipmail-head {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #000;
  height: 25px;
}

.shipmail-item {
  height: 25px;
  padding-top: 5px;
}

ul.shipmail-table {
  -webkit-padding-start: 0px;
}

.male {
  color: #1f1997;
}

.female {
  color: #7d0a20;
}


How do I eliminate the blank space (highlighted in red on the attached image) and move the “Date” column to the right of the table? I haven’t set a width on the middle column so I assumed it would fill up the empty space in between the two sides?

Your help, as always, will be appreciated :slight_smile:

Your code doesn’t exactly match the your image so I’m not sure what to do.

Hi,

You can fix the problem by setting this element to be a table:row.

ul.shipmail-table{display:table-row;width:100%}

However, the code you are using is invalid as divs cannot be direct children of a ul and li elements must be a direct child of a ul. There can be no intermediary elements in that structure.

Looking at that element the data is actually tabular and in this case you should be using the html table element and not divs and lists anyway. Remember html should structure the content and you need to use the right tag for the content you are displaying. CSS will handle the presentation irregardless of tag used.

In your example you have lost the correct relationship with the data and an html table would give you this straight away!

1 Like

The OP wanted the table to fill the red space :slight_smile:

1 Like

This is roughly how I would mark up that table.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.data-table-wrap {
	padding: 10px;
	background-color: #c4c4c4;
	border-radius: 10px;
}
.data-table {
	width:100%;
	table-layout:auto;
	border-collapse:collapse;
}
.data-table td, .data-table th {
	padding:3px 5px;
	text-align:left;
}
.data-table th {border-bottom:2px solid #000;}
.dt-subject {width:75%;}
.dt-date {white-space:nowrap;}
</style>
</head>

<body>
<div class="data-table-wrap">
  <table class="data-table">
    <thead>
      <tr>
        <th class="dt-cbox" scope="col"><input type="checkbox"></th>
        <th class="dt-from" scope="col">From</th>
        <th class="dt-subject" scope="col">Subject</th>
        <th class="dt-date" scope="col">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>ChatName</td>
        <td>Hello</td>
        <td class="dt-date">13-Dec-2016</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>ChatName</td>
        <td>How are you?</td>
        <td class="dt-date">13-Dec-2016</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>ChatName</td>
        <td>What are you up to?</td>
        <td class="dt-date">13-Dec-2016</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>ChatName</td>
        <td>Where you been?</td>
        <td class="dt-date">13-Dec-2016</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>ChatName</td>
        <td>You busy tomorrow?</td>
        <td class="dt-date">13-Dec-2016</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>
2 Likes

Thank you Paul!

As always, you’ve helped a lot :slight_smile:

For some reason - I thought the html <table> tag had been deprecated - I’ve no idea why! Otherwise, I’d have definitely gone down that route!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.