Liquid backdrop centered immobile elements

I'm facing some challenges trying to figure out the most efficient and correct way to achieve this layout, similar to Stack Overflow's design. I want a header with a background color that spans the entire width of the page, while keeping the content centered within the header and main body.

Here is the code snippet I have worked on so far: http://jsfiddle.net/spadez/kYfNB/13/

HTML

  <div id="container">
    <div id="header">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Item</a></li>
            <li><a href="sites.html">Item</a></li>
            <li><a href="feeds.html">Item</a></li>
        </ul>
    </div>
    <div id="content">
         <h1>Add</h1>
    </div>
</div>

CSS

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-family: Helvetica, Arial;
    font-size: 13px;
    text-decoration:none;
}
ul {
    list-style-type: none;
}
#header {
    background-color:#1ABC9C;
    overflow:auto;
}
#header a {
    color: white;
    padding: 15px 20px;
    background-color: #16AD8F;
    display: block;
    margin-right: 1px;
}
#header a:hover {
    background-color: black;
}
#header h1, #header ul, #header ul li {
    float:left;
}
#content {
    background-color:#EEEEEE;
}
#container {
    width: 600px;
}

Answer №1

When you include margin: 0 auto; in an element, it positions itself at the center of its parent element, which can extend to cover the entire page.
To achieve this effect, you would have to separate the header section from the content section. Create individual container elements (referred to as .inner in this example) that are centered and have the desired width.
You would then wrap the ones that span across the page around the inner containers (in this case, using the #container element) and add a background color.

Here's how you can structure it:

CSS

...
.inner {
    width: 600px;
    margin: 0 auto;
}
#container {
    width: 100%;
    background-color:#1ABC9C;
}

HTML

<div id="container">
    <div id="header" class="inner">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Item</a></li>
            <li><a href="sites.html">Item</a></li>
            <li><a href="feeds.html">Item</a></li>
        </ul>
    </div>
</div>
<div id="content" class="inner">
     <h1>Add</h1>
</div>

DEMO

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

Blurring isotopes within Google Chrome

While working with isotope in Google Chrome, I noticed that all items have the following CSS code: -webkit-transform: translate3d(properties); In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal ...

Implementing ngClass with a dynamic ID in the URL condition

I am attempting to create an ngClass condition that adds an active class to a list element. Specifically, I want it to work for both the URLs '/companies' and '/company/:id'. The issue I am facing is that the current setup does not fun ...

Using Jquery to Bind Multiple Events

As a novice in jquery, I have been trying to develop a search function that functions properly without any issues, until I introduced the select element. Can you please help me identify where I might be going wrong? $(function () { $('#keresomezo&apo ...

What is the best way to make floating images fill the entire space?

I'm looking to create a grid layout with fixed-sized images, but I'm having trouble getting them to fill up the space properly. Here's what I want: Unfortunately, this is what I'm currently getting: Any suggestions on how I can make t ...

Add CSS styling to an ASP.Net webpage that utilizes the default master page

I have developed a new ASP.Net Web Application and inserted the following div in the Default.aspx file: <div id="TestDiv"> Hi, This is CSS test. </div> To style the above div, I included the following CSS in the Site.css file: #TestDiv{ colo ...

Dynamically modifying the styling of elements within an iframe

In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...

Utilizing jQuery for Summation Calculation

How can I use jQuery to calculate the total sum of prices for all products in a table with the column name "price"? Once calculated, how do I store this sum in a variable? <table id ="tab"> <th>Product</th><th>Price</th> ...

"putting into a state of freezing" an entry field

My <input type="text" /> element needs to stop accepting text at a certain point. However, I'm unable to change the type to type="button" for some reason. What is the best way to make my <input> element stop accepting text? ...

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 he ...

Set maximum size for background image in div

I'm facing some challenges with setting the maximum height of a background image within a div. I want the max height to be equal to the actual height of the image, without stretching it. Ideally, if there is excess content in the div, it should stop a ...

extra elements within the 'navbar-toggler' icon button

How to create a navbar with multiple menu items that are always visible? Some items will be shown upon clicking the navbar button, while others will remain steady. Using the bootstrap navbar-toggler button can make the navbar longer when adding more items ...

A code to ensure input values are always set to the maximum possible value

I recently developed a script that monitors the live value property of 3 <input> elements, correcting them if the live value is outside the specified range. However, I encountered an issue where the script automatically sets the value to the max as s ...

Explore various SVG paths by hovering to reveal or conceal different divs

Hi there, I'll do my best to explain clearly. If this question has already been asked, I apologize as I couldn't find an answer when searching. I've used SVG to create a map on my HTML webpage and it's looking great. I also have hidden ...

Managing JSON data retrieval and manipulation techniques

My code is set up to display the image, title, and summary for all entries in a JSON file. However, I only want to display the image, title, and summary for the first entry, and only show the title for the rest of the entries. Please advise. <html> ...

Guide to positioning a top navigation menu with dropdown items in the center using CSS: absolute positioning

I have implemented a pure CSS menu from this source on my website. It functions properly in the 'hamburger menu' mode, but I am encountering difficulties when attempting to center or right-align the menu in other modes. Despite trying various so ...

Are the connections from a single array unique?

A generous user shared this code with me: $singles = valley_images(); $groups = valley_group_images(); $images = array_merge($singles, $groups); $sortArray = array(); foreach($images as $image){ foreach($image as $key=>$value){ if(!iss ...

Utilizing the :after pseudo-element for placing text in a specific location

Here's the code I'm working with: div#myImg{ background: url('myimage.png') left top no-repeat; } div#myImg:after{ content: 'TEXT UNDER IMAGE'; margin:0 auto; vertical-align:text-b ...

Troubleshooting: WordPress post not uploading to custom PHP file - Issue causing ERROR 500

Our website is built using WordPress, and I was tasked with adding a function to our newsletter subscription that sends an email to a specific address based on the selected value in the form. Everything was working perfectly on my local host, but when I tr ...

Steps for adding an onclick function to a collection of div elements

My current project involves utilizing the Flickr API and I am interested in creating a popup div that opens when clicking on each image. The goal is to display the image in a larger form, similar to how it's done using Fancybox. I'm looking for ...

Is it possible to call a REST API in Javascript by passing the username and password as

I have been attempting to use Javascript to call the AwaazDe REST API with a specific username and password, but I'm encountering issues. Below is my code: function authenticateUser(user, password) { var token = user + ":" + password; ...