Struggling to get my layout perfectly centered

I've spent the last 35 minutes scouring this site, and I know the answer is probably right in front of me but I can't seem to figure out how to center my layout.

It's a straightforward setup with a container div, left div for the menu, and right div for the content. (Here's the CSS I have so far.)

#container {
  text-align:center; 
  width: 960px; 
  background-color:#FFFFFF; 
  margin-right:10px; 
  margin-left:10px; 
  display:block;
}
#left {
  text-align:; 
  width:300px; 
  display:block; 
  background-color:#FFFFFF; 
  padding-left:5px; 
  padding-right:5px;
}
#right {
  text-align:left; 
  padding-left:10px; 
  padding-right:10px; 
  width:620px; 
  display:block;
}

When I preview it in my browser, the layout stubbornly stays on the left side. What am I missing to get it centered?

I've attempted some suggestions from other posts but nothing seems to be doing the trick. Can someone point out where I'm going wrong?

csshtml

Answer №1

One handy CSS trick is to use margin: 0 auto for centering elements.
For more in-depth explanations on this topic, you can visit this useful site or this informative resource.

Answer №2

To center those 3 divs on your page, place them inside another div with the id 'content'. Then, create a CSS rule similar to this:

#content {
   width: <width in px>;
   margin-left: auto;
   margin-right: auto;
}

By containing your layout within the 'content' div, everything will be positioned in the center of the page.

The usage of auto for the margins ensures that the div is centered horizontally.

Answer №3

#wrapper {
    width: 960px; 
    background-color:#FFFFFF; 
    margin:0 auto;
}
#wrapper:after{
    content:'';
    display:block;
    clear:both;
}
#sidebar {
    width:300px; 
    float:left;
    padding:0 5px;
}
#content {
    padding:0 10px;
    width:620px; 
    float:right;
}

Answer №4

To achieve the desired layout, consider giving the columns a float property.

For example:

#left {
  float:left;
}
#right {
  float:right;
}

If you want the columns to sit next to each other without any space in between, you can float them both left!

Answer №5

Central to this technique is setting the margin: 0 auto; property on the parent div.

If you switch to using box-sizing: border-box; and opt for percentages and ems over pixels, you'll streamline your development process significantly. Personally, I prefer candidates who avoid using pixels except for borders, as working with percentages and ems is much simpler. It's advisable to reserve id's (#) for javascript and special cases, whereas sticking with .class seems to be the general consensus currently. Best of luck!

http://jsfiddle.net/sheriffderek/CN8Ev/

HTML

<div class="container">

    <div class="main">main</div>

    <div class="sub">sub</div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* google border box - moves padding to the inside of the box */ 
}

.container {
    width: 90%;
    max-width: 60em;
    margin: 0 auto; /* no margin on the top and bottom - auto margin on the sides */
    overflow: hidden; /* shame - google micro clear fix instead */
}

.main {
    width: 70%;
    float: left;
}

.sub {
    width: 30%;
    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

The Challenge with jQuery Nano Scroll

I recently added the jQuery Nano Scroll plugin to my HTML page. However, I am facing an issue where the scrollpane is not visible. When I inspect the div using Chrome, the scrollpane appears. Any suggestions on how to resolve this? Here's a snippet ...

jqueryhtml

Eliminating the default inline style automatically

My goal is to hide a table row until a radio button is clicked. I attempted using display:none;, but it did not work. Upon inspecting the code in my developer tools, I noticed that the specific table row has a style attribute style="display: table-row; whi ...

jqueryhtmlcssinline-styles

Press the html button and activate the button using Visual Basic

Being new to Visual Basic, I have created a simple app using the WebBrowser component. The web page that loads contains an HTML button. I want this HTML button press to enable a button in Visual Basic, but I don't know how to do it. I have researched ...

htmlvb.net

Have you ever created a CSS class that you've had to reuse multiple times?

They always told me to consolidate repeated properties in CSS into one rule, like the example below (please forgive the poor example). I typically see this: .button, .list, .items { color: #444; } Having multiple rules like this can create a lot of clut ...

css

Troubleshooting jQuery: Unable to refresh the webpage

I have a PHP page that contains a form, checkboxes, and a submit button. I added an if statement to execute a PHP script I created when the button is clicked, which deletes certain values from the selected rows. The button functions properly and changes s ...

javascriptjqueryhtml

Having trouble finding two p-col-6 elements side by side in the PrimeNG FlexGrid with Angular?

I have integrated Flex Grid into my Angular7 project. In the initial state, I am able to display two p-col-6 elements side by side without any issues. However, when I try to rearrange them in p-col-12, they no longer align properly. Here is a detailed expl ...

htmlcssangulartwitter-bootstrapprimeng

Encountering difficulties while using JavaScript to complete a form due to issues with loading the DOM

Currently, I am attempting to automate the completion of a multi-page form using JavaScript. Below is the script that I am utilizing: // Page 1 document.getElementById("NextButton").click(); // Page 2 completion(document.getElementById("Rec ...

javascripthtml

Issue with the first-child selector

Is this supposed to work or am I losing my mind? .project.work:first-child:before { content: 'Projects'; } .project.research:first-child:before { content: 'Research'; } <div class="project work"> <p>abcdef</p> ...

csscss-selectors

Converting a JavaScript IIFE library into a React Component

Hello, I am currently in the process of learning React JS and there are two JavaScript files that I am working on: Polyfill.js -> hosted on github CustomNavbar.js -> created by me Here is the structure of polyfill.js: export default (function(win ...

javascripthtmlreactjsimportexport

Centered horizontally are images that have been floated

How can I align images with different widths when they are all floated right? I want them to be aligned vertically below each other. For the best display, please view in fullscreen on your computer as the example window is small. .compressor{ height: 1 ...

htmlcsscss-float

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...

ioscssgoogle-chromecss-position

The keyframe spinner fails to function properly on Firefox and results in blurry text

I am facing an issue with a keyframe spinner that rotates an image on the y-axis. It works perfectly in Chrome but fails to function in Firefox. I have tried changing the HTML tags to div or span class/id, but nothing seems to work. Interestingly, other ke ...

htmlcss

Unable to deactivate account, experiencing technical issues

After running once, the code in deactivate_myaccount.php throws an error stating: "Notice: A session had already been started - ignoring session_start() in C:\xampp\htdocs\includes\includes\header-inc.php on line 2". Furthermore, t ...

phphtmlsessionmysqli

Error: Validation issues detected in field functionality

My goal is to loop through a set of text fields and check if the user has input any values. However, I'm facing an issue where even though I have provided values in the text fields, it seems like they are empty. To better illustrate my problem, I have ...

javascriptjqueryhtmlcss

I'm having trouble getting my jQuery click handler to work

Here is the HTML content within my Sharepoint 2010 Web Part project: <html> <h1>Travel Form Assistance</h1> <div id="preTravel" name="preTravel"> <h2>Pre Travel</h2> <img id="imgPreTravel" name="imgPreTra ...

jqueryhtmlcsssharepoint-2010

What are some methods for controlling a webpage? Is it through HTML, JavaScript, Xpath, or

Hey there, I could really use your expertise on untangling a question that has me completely stumped. What exactly is the mechanism for controlling a webpage? a. HTML b. JavaScript c. Xpath d. CSS ...

javascriptseleniumhtml

Understanding the flow of block-level elements in documents when utilizing CSS :after pseudo selectors

What is the reason behind the block level element box appearing after the blue container's content instead of directly after the content box itself? Is it possible to achieve this using the CSS :after selector? TEST AREA CSS div{ background:#59 ...

htmlcss

What is the best method to eliminate the "All Files" selection from a file input dialog

<input type="file" accept=".jpg"> By setting the accept attribute to ".jpg", the file selection dialog will only allow JPG files. However, some browsers also provide a dropdown menu option for selecting All Files: All Files (*.*). Is there a way to ...

html

Issues arise when using Bootstrap-select with multiple options

Currently, I am in the process of developing a web application using Angular 6. In order to implement a customizable combo-box, I integrated the bootstrap-select library developed by Silvio Mureto into my project. However, I have encountered an issue with ...

htmltwitter-bootstrap-3angular6bootstrap-select

contrasting ionic and android software development kits

I am interested in developing an android application and have some knowledge about Ionic, which is also used for creating mobile apps. I have more experience with Android development and am curious to understand the distinctions between the two platforms ...

javaandroidangularjshtmlionic-framework