Home/ Questions/Q 3946500
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T01:08:26+00:00

Earlier I asked a question about horizontal positioning of div containers, now I’ve got

  • 0

Earlier I asked a question about horizontal positioning of div containers, now I’ve got follow up and related questions:

(1) As you can see in the HTML code below, I’ve got a “column_bottom” container (for links) placed to the left of a “content_bottom” container (for the page’s main content).
As I type more content into the “content_bottom” container so that its height exceeds that of the left “column_bottom” container, the entire “content_bottom” container shifts to BELOW the “column_bottom” container. What can I do so that the left “column_bottom” container’s height dynamically match the height of the right “content_bottom” container (and they stay horizontally next to each other)?

(2) As you can see in the CSS style sheet below, I tried to manually set the widths of the “column_top” and “column_bottom” to match in em units by trial and error. Would there be any issues with this method across different browsers on different systems? What can I do to ensure that “column_top” and “column_bottom” widths always match?

Thanks for your help.

Here’s the HTML:

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>this is the site's title</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">site<br>
</div>
<div class="content_top">&nbsp;title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1<br>
</a></li>
<li><a href="#">link 2<br>
</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">main content here<br>
</div>
</div>
</body>
</html>

Here is the CSS:

body {
  margin: 0;
  padding: 0;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
  color: #cccccc;
  background-color: black;
  font-size: 1em;
}
.wrapper {
  margin: auto;
  min-width: 60em;
  max-width: 60em;
  font-family: Arial,Helvetica,sans-serif;
  width: 60em;
  color: #cccccc;
}
.column_top {
  border-width: 0 0 0.25em;
  border-bottom: 0.25em solid black;
  width: 3.2em;
  min-width: 3.2em;
  float: left;
  padding-top: 2em;
  text-align: right;
  color: #333333;
  max-height: 1em;
  background-color: #f4f4f4;
  font-size: 3em;
  min-height: 1em;
  max-width: 3.2em;
  height: 1em;
  font-weight: bold;
  padding-bottom: 0.2em;
}
.content_top {
  border-width: 0 0 0.25em;
  border-bottom: 0.25em solid #f4f4f4;
  padding-top: 2em;
  font-size: 3em;
  min-height: 1em;
  text-align: left;
  max-height: 1em;
  height: 1em;
  font-weight: bold;
  padding-bottom: 0.2em;
}
.column_bottom {
  width: 9.28em;
  text-align: right;
  padding-top: 3em;
  color: #333333;
  border-bottom-width: 0;
  background-color: #f4f4f4;
  border-right-width: 0;
  padding-right: 0.3em;
  float: left;
  border-left-width: 0;
  min-width: 9.28em;
  max-width: 9.28em;
}
.content_bottom {
  padding: 3em 5em 5em;
  border-collapse: separate;
  text-align: left;
  float: left;
}
.column_bottom ul {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #333333;
  list-style-type: none;
  font-weight: inherit;
}
.column_bottom a:hover {
  background-color: #999999;
}
.column_bottom a {
  text-decoration: none;
  font-weight: inherit;
  color: #333333;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add a wrapper for .content_bottom with this css:

    .content_bottom_wrapper {
    width: 100%;
    margin-left: -9.58em;
    float: right;
}

    And add this to content-bottom:

    margin-left: 9.58em;

    9.58em = width of .column_bottom + padding-right on .column_bottom

    http://jsfiddle.net/p93fM/

    • 0