CODEWITHSUNDEEP
htmlcsslayout
Edward Strange
Edward Strange

Reputation: 40867

Growing column using css

I am trying to learn CSS and to start with I'm trying to do what seems like it should be fairly basic, but I can't seem to figure it out. What I would have done in the old way would have been something like so:

<table width="100%">
  <tr>
    <td>content area</td>
    <td width="200">ads, links, whatever</td>
  </tr>
</table>

I want a sidebar area on the right set to X pixels wide. I want a content area to fill up the rest of the page. It's this later part that seems to be the whole of the problem as setting it up to some fixed width would be a breeze.

I did manage to get sort of the behavior I want. I was able to get a column on the right at some X width and one on the left that fills the rest in by using "position:absolute" on the two and setting the right margin of the content column to the width of the sidebar column.

When I do this though the content div ends up really tiny in height. This won't do because I want this div to have a special color that goes behind what's in the sidebar and what's in the content.

I've researched this to death and tried to add a "div style='clear: both'>" after the absolute positioned ones but this did nothing. Any ideas?

HTML: 

<html>
    <head>
        <title>FIRST TRY</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="content">
            <div id="left">
                <p>Dolor consuetudium putamus nunc illum at. Qui vel accumsan zzril odio feugait. Iriure nobis aliquam est qui nam. Est ii ad et quod consuetudium. Eu vero tation placerat illum dolore. Suscipit saepius aliquip commodo erat me. Consequat littera autem anteposuerit ullamcorper dolor. Legunt doming dignissim facer futurum quinta. Consuetudium ad magna tempor ut suscipit. Typi aliquam ex esse quarta qui.</p>

                <br />

                <p><a href="http://css-tricks.com/examples/SuperSimpleTwoColumn.zip">Download this example.</a></p>
            </div>
            <div id="right">
                RIGHT
            </div>
            <div style="clear: both"></div>
        </div>
    </body>
</html>

CSS:

#content {
    border: 1px solid red;
    padding: 5px;
    position: relative;
}

#left {
    border: 1px solid green;
    float: left;
    margin-right: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

#right {
    border: 1px solid blue;
    float: right;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

RESULT: enter image description here

What I want specifically is for the red box to encompass the other two entirely.

Thanks for any help.

Upvotes: 0

Views: 236

Answers (4)

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15199

This is a classic 2-column layout problem. Basically what you want to do is to have a simple structure like this:

<div id="wrapper">
    <div id="sidebar">sidebar content here</div>
    Other content here.
</div>

Then to position the sidebar to the right, you'd apply float: right to #sidebar. I've made a JSFiddle example. The border, if applied to #wrapper will surround the whole thing.

The reason your border isn't applying in your code above, because you've declared position: absolute on one of your elements. This effectively removes the element from the DOM, so that #content will no longer consider the absolutely positioned element as its child and ignore it completely when attempting to render.

EDIT

Making the sidebar independent of the content -- that is, not allowing the content to wrap around the bottom -- is a simple fix. Update the HTML like this:

<div id="wrapper">
    <div id="content">        Other content here.</div>
    <div id="sidebar">sidebar content here</div>
    <div class="clearfix"></div>
</div>

And then modify your CSS to float: left the #content and give it a margin-right that is the same width as your sidebar plus padding. Add a margin-left to #sidebar that is the same as the margin-right on #content. And the clearfix is simply .clearfix { clear: both; }.

I updated the JSFiddle example.

Upvotes: 2

simshaun
simshaun

Reputation: 21466

The following example gives you a fluid left-column with a fixed-width right-column.

To change the sidebar width:

  1. adjust the margin-right on .left-col
  2. adjust the width on .right-col.

Here's an example (Fiddle): http://jsfiddle.net/simshaun/8szTV/

HTML:

<div class="cf">
    <div class="left-col-wrap">
        <div class="left-col"></div>
    </div>
    <div class="right-col"></div>
</div>
text text text textext text t text ttext text text textext text 
text textext text t t exttext text text text

​ CSS:

.left-col-wrap {
    float: left;
    width: 100%;
}
.left-col {
    margin-right: 220px;
}
.right-col {
    float: right;
    margin-left: -200px;
    width: 200px;
}

/** Micro clearix */
.cf:before, .cf:after {
    content: " ";
    display: table;
}
.cf:after { clear: both; }
.cf { *zoom: 1; }

/** Just for visual debugging purposes: **/
body {
    margin: 20px;
}
.left-col {
    background: #FF0000;
}
.right-col {
    background: #00FF00;
}
.left-col {
    height: 200px;
}
.right-col {
    height: 400px;
}

Upvotes: 3

malifa
malifa

Reputation: 8165

what you want is, that your wrapper <div id="content"> adopts the height of its children containers. this won't work, because your children container are positioned absolute. just let them float to the left and to the right (which won't work either when absolutely positioned) and specify a width for the children container.

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

Something like this should hopefully set you on the right path:

http://jsfiddle.net/tVWxv/

Upvotes: 1

Related Questions