WordPress.org

Support

Support » How-To and Troubleshooting » CSS code for 3/4 column

CSS code for 3/4 column

Viewing 2 replies - 1 through 2 (of 2 total)
  • I saw this in another thread… I just want to know how to modify it to reflect a 3/4 and 1/4 column.

    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4</div>
    <div class="clear"></div>

    Make sure you include the following CSS in your style sheet:

    .column {
    float: left;
    width: 200px;
    padding: 10px;
    }
    .clear {
    width: 100%;
    clear: both;
    }

    Here is an example if you want a sidebar on the left side. The sidebar is set at 200px. You do not need 4 columns to create a 1/4 sidebar and a 3/4 content area. Just use 2 columns, and set the width for the sidebar to 25% and the content to 75%.

    In my example the sidebar is a fixed 200px, with a 10px space between the sidebar and main column. This is just a basic example but should get you started.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS code for 3/4 column’ is closed to new replies.