Achieving centered body content on a webpage through CSS

I have completed the design of a webpage and utilized CSS for positioning elements. The current layout consists of a Header, Horizontal Menu, and a Content Section with 2 columns, all of which are set to the same width.

Although I have successfully aligned them to the left, my goal is to center these sections on the page.

To achieve this, I have introduced a DIV called 'full' to encapsulate the other DIVs. While I managed to center the Header and Menu using CSS code: margin: 0 auto; within their respective IDs, I encountered an issue with the Content ID remaining aligned to the left.

When attempting to float the content section either left or right, it ends up off-center in the corresponding direction. Removing the float option entirely results in the content section's background blending with the body background.

Upon inspecting using a debugger, it seems that the Body and #full span across the width of the page but only vertically cover the header and menu sections. I am unsure of the reason behind this behavior.

My assumption is that I need to incorporate a "clear" somewhere in the code, although the exact placement eludes me. I experimented with a 'clear: both' declaration in the #menuBar without success.

Any assistance provided would be immensely valuable.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>My First Practice Page</title>
<style>

#content {
    background-color: #eee;
    float: left;
}

body {
    background-color: silver;
}
...
... [Remaining HTML and CSS content]
...
css

Answer №1

you set the #content to float: left; which caused it to align to the left side only, using float: left changes the normal flow.. try checking with this code. My First Practice Page 

#content {
     background-color: #eee;
     width:976px;
     margin:0 auto;

}

body {
 background-color: silver;
}

#header {
    width: 976px;
    height: 154px;
    background-image: url('images/header-bg.jpg');
    background-repeat: no-repeat;
    text-align: center;
    margin: 0 auto;
}

#header h1 {
    color: white;
    text-align: center;
    padding: 52px;
    margin: 0 auto;
}

#menuBar {
     width: 976px;
     height: 33px;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     font-size: 1.2em;
     font-weight: bold;
     text-transform: uppercase;
     color: white;
     background-color: #2F3C4C;
     border: 5px solid red;
     margin: 0 auto;
}

#menuBar ul {
     list-style-type: none;
     float: left;
     margin: 0 auto;
}

#menuBar li {
     float: left;
     width: 150px;
     padding: 0 10px;
     margin: 0 auto;
     text-align: center;
}

#menuBar li:hover {
     color: blue;
     cursor: pointer;
}

#columnLeft {
        width: 582px;
        padding-left: 18px;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 0.95em;
        line-height: 1.2em;
        float: left;
}

#columnLeft img {
        float: left;
        padding: 5px;
}

#columnRight {
         width: 376px;
         float: left;
}

#columnRight h2 { 
         margin: 0 auto;
         padding: 10px;

}

#columnRight img {
         height: 150px;
         width: 150px;
         float: left;
         padding: 10px; 
}

</style>


</head>
<body>
<div id="full">

<div id="header">
       <h1> Company Name Inc. </h1>
</div>

<div id="menuBar">
  <ul>
   <li>home</li>
   <li>products</li>
   <li>services</li>
   <li>about us</li>
   <li>contact us</li>
  </ul>
</div>

<div id="content">
  <div id="columnLeft">
    <h2> Category 1 </h2>
    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our first product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
    <h2> Category 2 </h2>
    <img src="images/ss_img007.jpg" width="100" height="100" alt="" border="0">
    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
    <h2> Category 3 </h2>
    <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our third product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
    <h2> Category 4 </h2>
    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
  </div>
</div>
</div>
</body>
</html>

Answer №2

#content {
    width:976px;
margin: 0 auto;
   }

body {
 background-color: silver;
}

#header {
    width: 976px;
    height: 154px;
    background-image: url('images/header-bg.jpg');
    background-repeat: no-repeat;
    text-align: center;
    margin: 0 auto;
}

#header h1 {
    color: white;
    text-align: center;
    padding: 52px;
    margin: 0 auto;
}

#menuBar {
     width: 976px;
     height: 33px;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     font-size: 1.2em;
     font-weight: bold;
     text-transform: uppercase;
     color: white;
     background-color: #2F3C4C;
     background: 5px solid red;
     margin: 0 auto;
}

#menuBar ul {
     list-style-type: none;
     float: left;
     margin: 0 auto;
}

#menuBar li {
     float: left;
     width: 150px;
     padding: 0 10px;
     margin: 0 auto;
     text-align: center;
}

#menuBar li:hover {
     color: blue;
     cursor: auto;
}

#columnLeft {
     background-color: #eee;
 margin:0 auto;
    width:600px;
    padding-left: 18px;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 0.95em;
        line-height: 1.2em;
        }

#columnLeft img {
        float: left;
        padding: 5px;
}

#columnRight {
         width: 376px;
         float: left;
}

#columnRight h2 { 
         margin: 0 auto;
         padding: 10px;

}

#columnRight img {
         height: 150px;
         width: 150px;
         float: left;
         padding: 10px; 
}

</style>

assign appropriate widths to your content divisions - view example

Answer №3

        To add background color to the left and right columns, you can use the following CSS code snippet. Set the background color for #columnLeft to #dedede for the left column, and for #columnRight to #c0c0c0 for the right column.


Your Updated Code....

    #columnLeft {

            width: 582px;
            padding-left: 18px;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 0.95em;
            line-height: 1.2em;
            float: left;
            background: #dedede;
    }
#columnRight {
         width: 376px;
         background: #ccc;
         float: left;
}

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

Is there a way to obtain metadata for a specific link?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><$BlogPageTitle$></title> <meta property="og:title" content=" ...

javascripthtmlcss

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Recently, I developed a script that generates a series of fields based on a number provided by the user (k). Initially, I had a script that would create the correct number of fields. However, I decided to arrange them like vectors on the screen, so I made ...

javascripthtmlcss

Is there a way to override a LESS variable inside a mixin?

Currently, I am incorporating LESS into one of my projects and I have a requirement to establish different color schemes for various users. The project involves developing a portal where the color scheme should change based on the type of user logging in. ...

cssless

Can you control the order of rendering for specific divs in a ReactJS application?

I need assistance with developing a mobile app using ReactJS and react bootstrap that can dynamically resize itself based on the screen size. One specific part of the app requires calculations to determine its dimensions based on the remaining space on the ...

cssreactjsreact-bootstrap

Is there a way to set an image as the background of my HTML screen?

{% extends "layout.html" %} {% block app_content %} <div> {% from "_formhelpers.html" import render_field %} <form method="post" enctype="multipart/form-data"> <div class = "container"> < ...

javascripthtmlcss

What is the best way to align two divs next to each other while keeping the second one centered with flexbox?

Here are my two div elements: <div class='container'> <div class='left'></div> <div class='centered'></div> </div> I am looking to center the second inner div and have the first inner ...

htmlcssflexbox

What is the method for printing a background image with CSS?

I recently implemented the ASP Net Sprites package to create CSS Sprites for my website. While the sprites are working perfectly on the webpage, I've encountered an issue where the generated images do not show up when the page is printed. Here' ...

htmlcssprintingimage

The alignment of the Nivo Slider is off-center

Visit to see that the Nivo Slider is not properly centered on the background. I am unsure why this is happening. (Please disregard the 2nd and 3rd pictures as they are not the correct size, but focus on the 1st one). ...

jqueryhtmlcsspluginsnivo-slider

Creating a JavaScript function for a custom timed traffic light sequence

Currently, I am facing a challenge with my high school project of creating a timed traffic light sequence using JavaScript for my upcoming exams. Unfortunately, I feel quite lost and unsure about how to proceed. My initial plan involves formatting the valu ...

javascriptcss

Triggering a jQuery click event to showcase the hidden content

I am attempting to replicate the functionality seen on the website. The issue I am facing is related to the event_content class. I want to display only a limited amount of content initially, and then hide the excess content. Upon clicking the plus class, ...

javascriptjqueryhtmlcss

Improving code quality and consistency in Javascript: Tips for writing better code

Hey, I've been experimenting with some code using ajax and have ended up with a lot of repetitive lines. Is there a way to streamline the code without losing functionality? I keep using the .done method multiple times when I could probably just use it ...

javascripthtmljquerycss

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

javascriptjquerycss

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as sho ...

cssangulartwitter-bootstrapng-bootstrap

What's the process for browsers to render the 'span' element?

<p> <span>cancel</span><span>confirm</span> </p> <hr> <p> <span>cancel</span> <span>confirm</span> </p> Both should display the same result. However, in the ...

htmlcss

Toggle Submenu Visibility with a Click

One section of my code is located in sidebar.component.html : <ul class="nav"> <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"> &l ...

htmlcssangulartypescript

Deactivate the Autofill feature on Google Toolbar

Dealing with the Google Toolbar's autofill feature has been a constant frustration in my web development journey over the years. I have resorted to creating a timer control to monitor changes, as the developers overlooked firing change events on contr ...

asp.netjavascripthtmlcss

htmlEnhance your webpage with a native-like combobox

<!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser" placeholder="choose browser"> <datalist id="browsers"> <option value="Internet Explorer"> ...

htmlcss

Discover the CSS auto height value using JavaScript

Is there a way to utilize JavaScript in determining the value set for auto height in CSS? My development stack includes Grails and jQuery. For instance, consider the following CSS: .tool-preview { height: auto; } ...

javascriptcss

Placing a table within a div causes the div to expand in width beyond 100%

A situation has arisen where a table with a large number of columns (30 columns) is being affected by the white-space:nowrap style set on each th tag, causing the parent div to stretch unnaturally. How can this issue be resolved and allow for a horizonta ...

htmlcsshtml-table

Guide on modifying CSS properties when hovering over the parent element

I am working with a table structure like this: <table> <tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Mom </td></tr> <tr><td class="momdad">< ...

htmlcss