Steps for designing a single-column content-focused layout

Question

Steps for designing a single-column content-focused layout

Creating a single column fixed-width layout with a header and footer, the order of view should be as follows:

header
navigation
dynamic content 1
dynamic content 2
main content
footer

The dynamic contents (3, 4, 5) will expand vertically with unknown height, while the header, navigation, and footer (1, 2, 6) will have fixed heights. Our SEO manager has requested that the 'main content' should be placed above or at least before the basic contents in the source view.

I attempted to set the main wrapper (containing all 6 divs) to relative positioning and then use absolute positioning to move the 'main content' to the bottom.

html css

Answer 1

Answer №1

Simplify this task by following these steps:

CSS

div{
    background:blue;
    margin-top:15px;
    padding:25px;
    color:white;
}

#five-5{
display:none;
}

HTML

<div id="five"></div>
<div id="one">Header</div>
<div id="two">navigation</div>
<div id="three">basic content</div>
<div id="four">basic content</div>
<div id="six">Footer here </div>





<div id="five-5">Main Container here </div>

JAVASCRIPT

document.getElementById('five').innerHTML=document.getElementById('five-5').innerHTML;

Check out the live demo here

Answer 2

Simplify this task by following these steps:

CSS

div{
    background:blue;
    margin-top:15px;
    padding:25px;
    color:white;
}

#five-5{
display:none;
}

HTML

<div id="five"></div>
<div id="one">Header</div>
<div id="two">navigation</div>
<div id="three">basic content</div>
<div id="four">basic content</div>
<div id="six">Footer here </div>





<div id="five-5">Main Container here </div>

JAVASCRIPT

document.getElementById('five').innerHTML=document.getElementById('five-5').innerHTML;

Check out the live demo here

Steps for designing a single-column content-focused layout

Answer №1

Similar questions

What is causing the colorful background to not fully cover my page when I make the window smaller?

The mobile responsive view in Chrome DevTools is displaying incorrect dimensions

What could be the reason that the Mui button styles are not being applied even after setting it to 'contained'?

Highlight particular terms (key phrases) within text contained in a <td> tag

The li elements within a 960.gs layout will not extend to fill the entire width of the

Change the color of the first element when hovering over any of its siblings using only CSS

Unable to load JQuery from a div element

Tips for integrating YouTube links into PHP

Implementing a click event on an image in an Angular 4 application

It can be challenging to manage numerous if-else conditions in JQuery

Pressing the reset button will restore the table to its original

A guide on incorporating a customized Google map into your website

Ever since implementing a new section class, the CSS first-of-type selector has ceased to function

I'm curious about the location where label_color keys are stored within apache-superset

Disappearing act: CSS3 transform - rotate makes font vanish

Creating a column in CSS that maximizes width without utilizing 100% or causing text wrap

An image inside this stylishly framed photo with rounded corners

Error in viewpoint/transformation transition on Microsoft Edge

Steps for making a button with both an image and text:

Break the line after every space in words within an element