Question

Please take a look at this laytout which i built with divs:

First of all you can ignore Header section

So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it’s hard to know what width to set.

Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.

EDIT as requested here is the code:

<div class="left_column"></div>
<div class="content"></div>

.left_column{
   width:100px;
   height:100px;
   float:left;
}

.content{
   width:100px;
   height:100px;
   margin:auto;
   position:relative;
}

Answer 1

tried percentages?

overflow: auto;
 padding: 10px;
 width: 45%;

try float left float right as well as display inline, you could also try width auto but that don’t work too well

float:left;
 width:auto;
    height: auto;
    display: inline;

there is also one more trick used in menus

    <div id="mail_menu">
     <ul>
     <li><a href=something</a></li>
    </ul>
</div>

css

#mail_menu {
 position: relative;
 top: 0px;
 left: 0px; /* LTR */
 z-index: 3;
 color: #000;
}
#mail_menu ul {
 list-style-type: none;
}
#mail_menu li {
 display: inline;
 float:left;
 margin: 0px;
 padding: 3px;
}
#mail_menu a {
 color: #000;
 background: #FFF;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 margin: 1px;
 border-color:#CCC;
 border-width:1px 0;
 padding: 2px;
 float:left;
 border-width:1px;
  border-style:solid;
  border-bottom-color:#aaa;
  border-right-color:#aaa;
  border-top-color:#ddd;
  border-left-color:#ddd;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;



}
#mail_menu a:hover {
 color: #0000DD;
 text-decoration: none;
 background-image: url(/images/lyel.png);
 background-repeat: repeat-x;
}

css to middle something

.middle {
 display: block;
 width: 50em;

 margin-left: auto;
 margin-right: auto
}

and finally some table values for display to mess with

.td {
display: table-cell;
display:inline
}

.wrap{
 position: inherit;
}

.tr {
display: table-row;
display:inline
}

table {
  border-collapse: collapse;
}
th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
}