Columns Not Centering (CSS Formatting Issue)

Question

There is so much code going on here I'm not sure what to actually post, so I'm just going to post the link, even though I've been told it's not the best way to go.

The link is live here: http://www.lymemd.org/indexmm4.php

At the very bottom of the page those three boxes should be centered (The Problem, The Needs, The Solution.) Any help would be greatly appreciated, I can't figure anything out by centering the DIVs, it always seems to mess it up.

Thank you very much in advance.

Hi, you have some answers below... – gillytech Apr 10 '14 at 18:11 — gillytech, Apr 10 '14 at 18:11

score 0 · Answer 1 · answered Apr 10 '14 at 02:42

0

You should warp it with another div

<div id='warp' align='center'>DIV#3columns here</div>

or

<div id='3columns' align='center'><div id='The ProblemThe NeedsThe Solution'></div></div>

or css

text-align:center;

and your nav menu doesn't look good on my screen .

answered Apr 10 '14 at 02:42

Ds Klur

103
1
8

what doesn't look good with the navigation menu? Again, I'm very new to coding so the more basic you can be the better. Any idea how to fix it? – Eric Apr 10 '14 at 13:38
HELP is in another line .It's overflow - 1366x768 – Ds Klur Apr 11 '14 at 02:28

score 0 · Answer 2 · edited May 23 '17 at 10:33

Okay, I took a look at your page and the main problem I see is more fundamental than the columns. There's no reliable way to center anything in relation to anything else row-wise on your site without a "container" (or wrapper) whatever you want to call it.

I fixed this pretty simply by wrapping everything from the header to the footer in a div with the ID of container (like so <div id="container>")

It looks like the overall width of your content is 1100px so I added this CSS to the container

#container {
    width: 1100px;
    margin: 0 auto;
}

What this does is unifies the boundaries on each side of your layout so things can be positioned relative to this boundary.

The next error in your code is that IDs shouldn't start with a number. Nonetheless after you consider changing the name of the ID you should add the following CSS:

#threeColumns {
    width: 100%;
    margin: 0 auto
}

With these modifications you should be able to center your columns (and everything else you'd like to center).

These exact widths are not pixel-perfect. I am just using these to illustrate the methodology I am using.

Amarnath Balasubramanian · Answer 3 · 2014-04-10T03:31:53.857

I have changed

<div id="3columns"> to <div id="columnsthree">

And added the following CSS to your StyleSheet

#columnsthree{
    width:1100px;
    margin:0px auto;
    padding:0px;

}

Normally i used to give the container width as 1000 or 980px but as you have given width of every column as 336px if we give 1000px as the container width then there arises alignment problem. so i chose 1100px;

and in default Margin Syntax is

Margin : Topmargin_value Rightmargin_value Bottommargin_value Leftmargin_value;

so Margin: 0px auto;

equals

Margin: top_bottom_Margin_value right_left_margin_value

OutPut:

enter image description here

Columns Not Centering (CSS Formatting Issue)

3 Answers3

Fiddle Demo

Full Page Demo