CSS code for 3/4 column

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter ainunez

    (@ainunez)

    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.