Site with Three Steady Columns

Question

Site with Three Steady Columns

While I know that this question has been asked in the past, I'm eager to see if there have been any recent changes.

I am currently searching for a fixed 3 column layout using html/css, with the main content (middle) area being located first in the DOM for SEO purposes.

Do you have any creative ideas on how to achieve this?

html css layout seo

Answer 1

Answer №1

To ensure that the content appears first, you may need to add some additional markup. Here is a possible solution:


<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">I'm first</div>
        <div id="side_a">I'm second</div>
    </div>
    <div id="side_b">I'm third</div>
</div>

Apply the following CSS styles:


#wrapper {
    width: 800px; /* Total width of all columns */
    margin: 0 auto;
}

#content-wrapper {
    float: left;
}

#content {
    width: 400px;
    float: right;
}

#side_a {
    width: 200px;
    float: left;
}

#side_b {
    float: left;
    width: 200px;
}

The #wrapper sets the column width to 800px and centers the page. The #content and #side_a columns are reversed within the #content_wrapper using different float properties. Finally, #side_b is floated next to #content_wrapper.

For a demonstration, refer to the example at this link:

Answer 2

To ensure that the content appears first, you may need to add some additional markup. Here is a possible solution:


<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">I'm first</div>
        <div id="side_a">I'm second</div>
    </div>
    <div id="side_b">I'm third</div>
</div>

Apply the following CSS styles:


#wrapper {
    width: 800px; /* Total width of all columns */
    margin: 0 auto;
}

#content-wrapper {
    float: left;
}

#content {
    width: 400px;
    float: right;
}

#side_a {
    width: 200px;
    float: left;
}

#side_b {
    float: left;
    width: 200px;
}

The #wrapper sets the column width to 800px and centers the page. The #content and #side_a columns are reversed within the #content_wrapper using different float properties. Finally, #side_b is floated next to #content_wrapper.

For a demonstration, refer to the example at this link:

Answer 3

Answer №2

This method follows a similar approach to Tatu's, but includes:

a header
a footer
fluid width instead of fixed sizes for better responsiveness
columns with full height background colors
additional divs to pad the content in the columns

You can experiment with it on jsfiddle: http://jsfiddle.net/BzaSL/

HTML:

<div id="header">First: Header</div>
<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">
            <div id="contentpad">
                <h2>Second: Content</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis dui, porta consectetur dictum id, rhoncus non turpis. Praesent vitae fermentum enim. Donec consequat accumsan nibh et tempor. Duis sem enim, interdum eget vestibulum vitae, semper ac arcu. Maecenas convallis imperdiet libero, bibendum vulputate nulla tempus in. Duis eu purus eget lectus tincidunt fermentum. Vestibulum sit amet nunc et metus auctor ullamcorper. Vestibulum ut dui purus, nec hendrerit orci. Aliquam erat volutpat. Praesent a nibh vitae enim fringilla aliquam.</p>
            </div>
        </div>
        <div id="leftcol">
          <div id="leftcolpad">
              Third: Left column
            </div>
        </div>
    </div>
    <div id="rightcol">
          <div id="rightcolpad">
              Fourth: Right column
          </div>
    </div>
</div>
<div id="footer">Fifth: Footer</div>

CSS:

/* The wrapper holds all three columns and spans 100% of the page width.
 * The background color applies to the right column.*/
#wrapper { width: 100%; margin: 0 auto; background-color:#CCFFFF; }
/* Clear floating elements before the footer */
#wrapper:after { display: block; content: ""; clear: both; }
/* The content-wrapper represents the left two columns, occupying 80% of the wrapper's width.
 * The background color applies to the left column */
#content-wrapper { float: left; width:80%; background-color:#FFFFCC; }
/* The content occupies 75% of the content-wrapper's width */
#content { width: 75%; float: right; background-color:#FFCCFF; }
/* The left column takes up the remaining 25% of the content-wrapper's width */
#leftcol { width: 25%; float: left; }
/* The right column occupies 20% of the wrapper's width */
#rightcol { float: left; width: 20%; }
/* Applying padding or margin directly to the columns might disrupt the layout */
#contentpad, #leftcolpad, #rightcolpad, #footer, #header{ padding:1em; }
#footer{ background-color:#CCCCFF; }
#header{ background-color:#FFCCCC; }

Answer 4

This method follows a similar approach to Tatu's, but includes:

a header
a footer
fluid width instead of fixed sizes for better responsiveness
columns with full height background colors
additional divs to pad the content in the columns

You can experiment with it on jsfiddle: http://jsfiddle.net/BzaSL/

HTML:

<div id="header">First: Header</div>
<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">
            <div id="contentpad">
                <h2>Second: Content</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis dui, porta consectetur dictum id, rhoncus non turpis. Praesent vitae fermentum enim. Donec consequat accumsan nibh et tempor. Duis sem enim, interdum eget vestibulum vitae, semper ac arcu. Maecenas convallis imperdiet libero, bibendum vulputate nulla tempus in. Duis eu purus eget lectus tincidunt fermentum. Vestibulum sit amet nunc et metus auctor ullamcorper. Vestibulum ut dui purus, nec hendrerit orci. Aliquam erat volutpat. Praesent a nibh vitae enim fringilla aliquam.</p>
            </div>
        </div>
        <div id="leftcol">
          <div id="leftcolpad">
              Third: Left column
            </div>
        </div>
    </div>
    <div id="rightcol">
          <div id="rightcolpad">
              Fourth: Right column
          </div>
    </div>
</div>
<div id="footer">Fifth: Footer</div>

CSS:

/* The wrapper holds all three columns and spans 100% of the page width.
 * The background color applies to the right column.*/
#wrapper { width: 100%; margin: 0 auto; background-color:#CCFFFF; }
/* Clear floating elements before the footer */
#wrapper:after { display: block; content: ""; clear: both; }
/* The content-wrapper represents the left two columns, occupying 80% of the wrapper's width.
 * The background color applies to the left column */
#content-wrapper { float: left; width:80%; background-color:#FFFFCC; }
/* The content occupies 75% of the content-wrapper's width */
#content { width: 75%; float: right; background-color:#FFCCFF; }
/* The left column takes up the remaining 25% of the content-wrapper's width */
#leftcol { width: 25%; float: left; }
/* The right column occupies 20% of the wrapper's width */
#rightcol { float: left; width: 20%; }
/* Applying padding or margin directly to the columns might disrupt the layout */
#contentpad, #leftcolpad, #rightcolpad, #footer, #header{ padding:1em; }
#footer{ background-color:#CCCCFF; }
#header{ background-color:#FFCCCC; }

Site with Three Steady Columns

Answer №1

Answer №2

Similar questions

Struggling to add custom styles to an Ionic radio button

Utilizing jQuery's each() function to create a seamless loop of background images in a

Tips for positioning the navbar to avoid covering the logo:

"Enjoying a table header that scrolls freely with autoscroll feature

Challenges with line height in IE when adjusting font size in textarea

Is there a way to disregard inherited styles without relying on the use of "!important"?

Alignment of card images

Animation for maximum height with transition from a set value to no maximum height

Values do not appear as expected post PDF conversion using wkhtmltopdf

Explore an illustration of a website with a hover effect

Never-ending accessible document available for download to test internet speed

How can I optimize Javascript and CSS that are being used on my website but are not physically hosted on my website?

The Material UI - makeStyles function is having difficulties generating the intended styles

Joomla, Enhancement for iFrame Sizing

Error Encountered in jQuery UI SelectMenu

What is the best way to position this span on the right side of the div?

How to troubleshoot Bootstrap 5 tabs not hiding flex content after tab change?

Adapting Bootstrap components based on the screen size: Viewport-driven

Text alignment and block dimensions

The modals are all tangled up and now spilling over the edges