Blueprint css offers a simple solution for arranging rows or divs vertically. Let's explore the steps to ordering

I'm trying to figure out how to display the header, content, and footer sections in a specific order using CSS with blueprint. The HTML code is structured as follows:

<div id="content">...</div>
<div id="footer">...</div>
<div id="header">...</div>

Typically, I want the header to be at the top, followed by the content, and then the footer. However, I need this layout to work regardless of the order in which the divs are written in the XHTML file. In other words, even if the "content" section appears after the "footer," I still want the footer displayed below the contents.

P.S.: The content section is initially placed first for SEO purposes but the heights of each section may vary depending on their content.

Answer №1

I'm not sure if blueprint has this specific function, but achieving it with basic CSS is quite simple.

Let's assume the header height is fixed at 100px.

#header {
    height:100px;
    position: absolute;
    top: 0px;
}

#content{
    padding-top:100px;
}

Update:

I came across two related questions that might be helpful:

  • Using CSS to rearrange DIVs in a layout
  • Placing a div above another one using CSS when they're not in order in the HTML

These questions either involve similar solutions (when heights are known) or suggest using JavaScript for reordering.

Answer №2

With absolute positioning and block display, you have the flexibility to arrange any div element on your webpage as desired.

For example, consider the following code snippet:

<div id="foo"></div>
<div id="bar"></div>

If you want bar to appear above foo and foo is 100px in height, you can achieve this by applying the following CSS properties:

#bar {
   top: 100px;
   left: 0px;
   position: absolute;
   display: block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with a background image not showing in IE8 on a button?

My submit button has the following CSS styling: .button{ border:1px solid #015691; background-image:url('http://boundsblazer.com/pkg/pics/ buttons/small-button.png'); color:#ffffff; height:18px; font-size:8pt; ...

The Art of Positioning Containers in CSS

I am facing some issues with my CSS. In the JSP webpage, I have a container styled with a div that works perfectly. However, when I insert another div tag to style certain elements, those elements end up outside of the container for some reason. Below is ...

Is there a way to handle specific email format designs with PHP?

When trying to send an email with specific shipping information and tracking numbers, the formatting appears strange. Here is the desired format: Dear xyz , Per your request, this email is to no ...

Tips for aligning a div in the center while adjusting screen size

My goal is to showcase a dashboard with a card layout. The desired layout can be seen https://i.sstatic.net/OWgpE.png: Here is a snippet from the HTML File: <div id="overallCanvasWrapper" class="statistic-container"> <p ng-show=" ...

Activate a horizontal accordion when the button is clicked

I am looking to implement a dynamic horizontal accordion feature triggered by a button click. I came across this example for creating a horizontal accordion. It works well, but it is limited to only 8 accordions. I want the flexibility for users to add as ...

The fluid table within the Bootstrap container is not adapting to different screen

Can't figure out why the bootstrap container fluid table is not responsive. Even though I used an example of My First Bootstrap Page that works fine and is responsive, this particular table remains unresponsive. I want to avoid using a scroll but will ...

Managing primary and secondary color schemes within Material Design Components for Web - a complete guide

Exploration I delved into the realm of Material Components (MDC) for Web and found myself utilizing CDN for hosted CSS and JavaScript libraries: https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css https://unpkg.com/mate ...

Fluid Cursor Movement in the Atom Text Editor

I encountered an issue where adding a smooth caret animation in the atom editor caused the background to start blinking uncontrollably. Below is the code snippet I used to add the animation in my style.less file: atom-text-editor .cursor { transition: ...

Enhancing bootstrap navmenu links with pipe separators

Having trouble styling the bootstrap-5 navbar menu links to look like the image provided. I am struggling with the styling. ...

``There seems to be an issue with implementing the SlideDown feature in JavaScript

I am having an issue with a code where the expected behavior is to slide down a div when a person hovers over text, but it's not working. Can someone please review and identify the cause of this problem? <script type="text/javascript" src="/js/jqu ...

Adjust sensor - CSS div size scaling based on proportions

I am working on a flexbox layout with three horizontal columns that I want to occupy the full size of the window without any scrollbars. In the middle column, there is a div that will display an A4 page. The dimensions should always remain proportionate, ...

In Vue.js, dynamically rearrange the order of items in an Array and reflect that reordering in the Document Object Model

Within a Vue component, I have an Array named "block" that contains 4 values. These values are displayed in the DOM using a v-for directive: <div class="block" @click="shuffleArray()"> <div v-for="(number, index) in block"> <spa ...

difficulty eliminating white space in HTML display using Bootstrap

Encountering an issue with the template view below. A scrollbar was added to the "Used in" table at the bottom, but there is excessive whitespace beneath it. Removing divs/elements one by one reveals that the problem seems to stem from the table itself. v ...

Display the list box against the masked background

I currently have a masked background and a drop-down hidden behind it. Here is how it appears: https://i.sstatic.net/QTLN5.png However, I want it to look like this: https://i.sstatic.net/ZAreM.png This is the HTML code being used: <div id="sugges ...

Adjusting the height in AngularJS based on the number of items in a table

I've developed a straightforward AngularJS application with multiple tables on one page. In order to add scrolling functionality, I initially used a basic CSS code snippet like: tbody { overflow: auto; } I also experimented with the https://github. ...

Using CSS3 or Javascript to create smooth page transition animations

I am interested in recreating the transition page on the website using JavaScript or CSS3, as shown in the work section. However, I am unsure of how to achieve the same result. Can you provide any guidance or ideas on how to accomplish this? Thank you fo ...

Separate the circular image into four equal sections

Imagine having an image like this: https://i.sstatic.net/FYKSB.png Now, imagine wanting to make the slices of the circle enlarge when the mouse hovers over them while the rest of the circle blurs out. I've tried using Javascript, JQuery, and CSS bu ...

Tips on positioning one image on top of another image without the images shifting when the screen size is adjusted

Struggling to position the lightbulbs above the floor plan? Even after setting the floor plan image's position property to 'relative', the lightbulb images refuse to cooperate. Here is a snippet of the HTML code: <div> <img src ...

Is there a way to deactivate the hover state?

My issue involves a text button that changes color on hover. When I click the button, the containing div shrinks, causing the button to move out from under the mouse cursor. Even though the button is no longer being hovered over, it remains in the :hover s ...

What is the reason behind v-container in vuetify.js automatically setting the fluid property when zoomed to 67%?

I have encountered an issue with vuetify where the v-container automatically takes full width at 67% zoom of the browser, even though I have not used the fluid property. It seems to work fine for the rest of the cases. <v-container> < ...