CODEWITHSUNDEEP
css
Linas
Linas

Reputation: 4408

Css divs layout issue

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

enter image description here

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;
}

Upvotes: 0

Views: 78

Answers (4)

DACrosby
DACrosby

Reputation: 11430

Take a look at Object-Oriented CSS. In particular, check out their grids page

Upvotes: 1

V H
V H

Reputation: 8587

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;
}

Upvotes: 0

Esteban
Esteban

Reputation: 3139

This can be accomplished using this hack, please try this:

div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }

with this markup:

<div class="header">Header</div>
<div class="wrapper">
    <div class="left-column">Left Column</div>
    <div class="content">Content</div>
</div>

Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.

Upvotes: 0

Jason
Jason

Reputation: 3360

I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.

For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.

Upvotes: 0

Related Questions