Struggling to get my layout perfectly centered

Question

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?

css html

Answer 1

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

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 3

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 4

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 5

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 6

#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 7

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 8

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 9

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;
}

Answer 10

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;
}

Struggling to get my layout perfectly centered

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Implementing Pagination or Infinite Scroll to Instagram Feed

The angular-block-ui feature fails to run my HTML code as a personalized message

Steps to ensure that a particular tab is opened when the button is clicked from a different page

Ways to extract specific HTML from a jQuery element

AngularJS function orderBy reverses the array instead of sorting it

Hover over the image to trigger animation effects

Difficulty arises when collapsed text in Bootstrap clashes with the footer design

When hover is not activated, the transition for text overflow gradient does not appear seamless

Troubleshooting Media Queries Problems in HTML and CSS

Issue: Inability to scroll on div overflow section

Attempting to replicate a <textarea> to behave like a <div> element

The CSS and Javascript files are failing to load

Issue encountered when concealing page elements followed by revealing them again

AngularJS does not update values properly if there is a style applied to the parent container

Utilize jQuery to style the background of the webpage, while excluding the Modal element when using Bootstrap

What is the method to incorporate spread into inner shadow within an SVG file?

Challenges related to height

Unable to execute xmlHttp.responseXML on a server that is offline

Choosing the image that represents your website in Safari web previews

What is the method to create a resizable table column border rather than resizing the bottom corner border?