0

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.

Edward Strange
  • 40,307
  • 7
  • 73
  • 125

4 Answers4

3

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;
}
simshaun
  • 21,263
  • 1
  • 57
  • 73
  • I get different results with my browser than the fiddle you posted and also get similar to my original result when I put these divs inside of a containing div. – Edward Strange Aug 27 '12 at 21:37
  • Did you try before or after I updated my post? I added a clearfix to accommodate having content below the columns. – simshaun Aug 27 '12 at 21:38
  • 1
    Also, the fiddle works as expected in IE7, IE8, IE9, FF, and Chrome (win). If it doesn't work when you try to integrate in to your own page, then there is something else (of yours) messing it up. Keep in mind, the columns are no longer positioned absolutely. – simshaun Aug 27 '12 at 21:39
  • I tried before. Now I'm trying after and trying to figure out what's different between yours and mine because I'm not seeing it but I'm getting wildly different results in both the browser and the fiddle. So when I get it figured out I'm betting this is the answer I was looking for. – Edward Strange Aug 27 '12 at 21:52
  • Just to be clear, is the Fiddle itself not working for you? If so, can you post a screenshot of it? – simshaun Aug 27 '12 at 21:56
  • 1
    I got the fiddle working eventually, not sure what was different. Then I pulled directly from the fiddle to my own and firefox displayed differently. This seems odd since I looked at the fiddle in firefox. Removing the left-wrap part and making left-col float fixed the problem. – Edward Strange Aug 27 '12 at 22:16
2

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.

Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
  • This doesn't seem to work because the sidebar isn't a real sidebar, it's like an inline image that is being wrapped around. Setting height on the sidebar doesn't seem to work either. – Edward Strange Aug 27 '12 at 21:35
  • There is an explicit height on the sidebar. It's 250px so that it can be visible. You didn't specify if you wanted the content to wrap around the bottom of your sidebar (which is a common request, actually.) – Roddy of the Frozen Peas Aug 27 '12 at 21:38
  • @CrazyEddie -- I updated the answer with the simple tweak that makes the sidebar independent of the content. – Roddy of the Frozen Peas Aug 27 '12 at 21:44
  • Post edit seems to work. It's mostly like simshuan's answer but lacks the left-wrap section. That seems to make it work on both IE and FF whereas I was getting different results in FF (the boxes were not inlining). – Edward Strange Aug 27 '12 at 22:14
1

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

http://jsfiddle.net/tVWxv/

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • I don't think that what you're asking can be done with pure CSS then. Making the element absolutely removes it from the document flow so it's container isn't aware of it's height. My best suggestion would be to use jQuery to get the absolutely positioned div's height and set the container div's height relative to that. – Billy Moat Aug 27 '12 at 21:37
0

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.

malifa
  • 8,025
  • 2
  • 42
  • 57