Home/ Questions/Q 8444983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:32:26+00:00

I am trying to learn CSS and to start with I’m trying to do

  • 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0