HTML CSS items not beheaving as I expect - centering

Question

I've just started to try and build a golf stats website (just for the fun of it). I'm very new to HTML and CSS, and I'm having loads of trouble with one page that just won't behave as I would expect.

I've cut the code down a bit a save space, but here is what I'm getting. http://jsfiddle.net/fnnb1o6d/1/

I want everything to be centered like the top text boxes, but the that's not happening. I'm sure I have some terrible CSS and HTML going on here which is why I'm getting the issues, but I can't work out what it is.

The html and css are also below. Can someone please tell me how I would get this to behave as I would like? Thanks very much

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add Course</title>

<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="add_course">
    <form action="add_course.php" method="post" enctype="multipart/form-data" name="add_course_form" id="add_course_form" onsubmit="return validate_form();">
    <div class="add_course_lables">
        <input class="add_course_name" name="coursename" type="text" id="coursename" size="30" placeholder="Course Name" maxlength="64" />
        <br />
        <input  name="par" type="text" id="par" size="30" placeholder="Par" maxlength="2" />
    <input name="rating" type="text" id="rating" size="30" placeholder="Rating" maxlength="2" />
    <input name="slope" type="text" id="slope" size="30" placeholder="Slope" maxlength="3" /> 
    <br />
</div>
<div style="min-width: 1000px; overflow: auto; display: table; width: 1000px; text-align:center" id="add_course_table">  
    <div>
        <div style="width:60px"  id="add_course_top_row">Hole</div>
        <div id="add_course_top_row">1</div>
        <div id="add_course_top_row">2</div>
        <div id="add_course_top_row">3</div>
        <div id="add_course_top_row">4</div>
        <br style="clear: left;" /> 
    </div>
    <div>               
        <div id="add_course_other_rows_left">Par</div>
        <div id="add_course_other_rows"><input type="text" maxlength="1" name="par1"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="1" name="par2"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="1" name="par3"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="1" name="par4"/></div>
        <br style="clear: left;" />
    </div>
    <div>
        <div id="add_course_other_rows_left">Length</div>
        <div id="add_course_other_rows"><input type="text" maxlength="3" name="length1"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="3" name="length2"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="3" name="length3"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="3" name="length4"/></div>
        <br style="clear: left;" />            
    </div>
    <div>
        <div id="add_course_other_rows_left">Index</div>
        <div id="add_course_other_rows"><input type="text" maxlength="2" name="index1"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="2" name="index2"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="2" name="index3"/></div>
        <div id="add_course_other_rows"><input type="text" maxlength="2" name="index4"/></div>
    </div>
</div>  
    <input type="submit" name="Submit" class="add_course_button"  value="Add Course"  />

</form>

</div>
</body>
</html>

CSS

.add_course_lables {
    width: 500px;
    height: 120px;
    border-radius: 5px 5px 0px 0px;
    margin-left: auto;
    margin-right: auto;
}
.add_course_lables input {
    color: #16a085;
    padding: 10px;
    margin-top: 5px;
    width:135px;
    font-size: 15px;
    border: 1px solid #16a085;
    border-bottom: 2px solid #16a085;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
    width:91.5%;
}
.add_course_lables input:focus {
    border-color:#2ecc71;
    outline: none;
    box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
    border-color:#2ecc71;
    outline: none;
    box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button{
    background: #16a085;
    color: white;
    border: 1px solid #16a085;
    border-radius: 5px;
    transition: background .4s linear;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
    margin-top: 10px;
    position: relative;
    left: 50%;
    right: 0%;
}

#add_course_top_row{
    border-radius: 4px;
    border-color: #FFFFFF;
    border-style: solid;
    background: #16A085;
    color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-align: center;
    padding: 2px;
    margin-right: 0px;
    width: 30px;
    border-width: thin;
    display: inline-flex;
}
#add_course_other_rows_left{
    color: #16a085;
    border-radius: 4px;
    border-color: #16a085;
    border-style: solid;
    border-width: thin;
    background: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-align: center;
    padding: 2px;
    margin-right: 3px;
    margin-top:2px;
    width: 60px;
    float:left;
}
#add_course_other_rows input {
    color: #16a085;
    border-radius: 5px;
    border color:#BFBFBF;
    border-style: solid;
    border-width: thin;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 3px;
    margin-top: 2px;
    margin-right:3px;
    width: 30px;
    float:left;
}
#add_course_other_rows input:hover {
    border-color:#2ecc71;
    outline: none;
    box-shadow: 0 0 2px 1px #2ecc71;
}

Ok, all sorted now. Thanks for the help, I've spent about 12 hours on this damn page, so glad its working. http://jsfiddle.net/733b4e82/2/ — Harry Smiles, Sep 04 '14 at 10:42

score 1 · Accepted Answer · edited May 23 '17 at 12:30

Harry,

Absolutely. The short answer is that you just need to duplicate .add_course_lables for the other two divs you're working with.

To go into detail on how this works:

On the .add_course_lables you have a class setup showing:

.add_course_lables {
    width: 500px;
    height: 120px;
    border-radius: 5px 5px 0px 0px;
    margin-left: auto;
    margin-right: auto;
}

Specifically width, and margin-left & margin-right are creating the centering for the first div.

Now, to make this easier for you, I'd like to refer you to an existing question with plenty of helpful information: How to horizontally center a <div> in another <div>?

Thanks, combined with Akshay's answer I think I'm 99% there. — Harry Smiles, Sep 04 '14 at 09:55

score 1 · Answer 2 · answered Sep 04 '14 at 09:20

1

check this it seems to align part of the page the rest is not aligning because i think that you added a

</div>

for no reason somewhere try to find it out what i did was that i added the entire page into a new div like this

html

<div id="page">

this must be closed at the end of the code

css

#page{
width:1000px;
margin:auto;
}

http://jsfiddle.net/fnnb1o6d/2/

answered Sep 04 '14 at 09:20

Akshay

14,138
5
46
70

This is really close to what I'm after thanks. Do you know how I would get the Par, Length and Index rows to center under the Hole row? – Harry Smiles Sep 04 '14 at 09:41
@HarrySmiles Like i said search for unwanted, closed div's, if there is remove them then all of it will be center aligned like you wanted – Akshay Sep 04 '14 at 09:49

score 0 · Answer 3 · answered Sep 04 '14 at 09:22

0

you need to add container to all your content,

#add_course{
    margin:0 auto;
    border:1px solid #ccc;
    width:80%
}

DEMO

answered Sep 04 '14 at 09:22

stanze

2,456
10
13

score 0 · Answer 4 · answered Sep 04 '14 at 09:24

<div id="add_course_table" style="min-width: 1000px; overflow: auto; display: table; width: 1000px; text-align:center">

to

<div id="add_course_table" style="overflow: auto; display: table; margin-left: auto; margin-right: auto; width: 500px; text-align: center;">

And, You are given #add_course_other_rows in multi places, Actually #ID should be unique. change it as class. And, update this class.

.add_course_other_rows{
 display:inline-block;
}

Please update this all in fiddle and let us know for the further

score 0 · Answer 5 · answered Sep 04 '14 at 09:58

JSFIDDLE

HTML WILL BE:

<div id="add_course">
    <form action="add_course.php" method="post" enctype="multipart/form-data" name="add_course_form" id="add_course_form" onsubmit="return validate_form();">
        <div class="add_course_lables">
            <input class="add_course_name" name="coursename" type="text" id="coursename" size="30" placeholder="Course Name" maxlength="64" />
            <br />
            <input name="par" type="text" id="par" size="30" placeholder="Par" maxlength="2" />
            <input name="rating" type="text" id="rating" size="30" placeholder="Rating" maxlength="2" />
            <input name="slope" type="text" id="slope" size="30" placeholder="Slope" maxlength="3" />
            <br />
        </div>
        <div style="margin:0px auto; overflow: auto; display: table; text-align:center" id="add_course_table">
            <div class="display-inline">
                <div style="width:60px" id="add_course_top_row">Hole</div>
                <div id="add_course_top_row">1</div>
                <div id="add_course_top_row">2</div>
                <div id="add_course_top_row">3</div>
                <div id="add_course_top_row">4</div>
                <br style="clear: left;" />
            </div>
            <div class="display-inline">
                <div id="add_course_other_rows_left">Par</div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="1" name="par1" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="1" name="par2" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="1" name="par3" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="1" name="par4" />
                </div>
                <br style="clear: left;" />
            </div>
            <div class="display-inline">
                <div id="add_course_other_rows_left">Length</div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="3" name="length1" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="3" name="length2" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="3" name="length3" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="3" name="length4" />
                </div>
                <br style="clear: left;" />
            </div>
            <div class="display-inline">
                <div id="add_course_other_rows_left">Index</div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="2" name="index1" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="2" name="index2" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="2" name="index3" />
                </div>
                <div id="add_course_other_rows">
                    <input type="text" maxlength="2" name="index4" />
                </div>
            </div>
        </div>
        <input type="submit" name="Submit" class="add_course_button" value="Add Course" />
    </form>
</div>

CSS WILL BE:

.add_course_lables {
    width: 500px;
    height: 120px;
    border-radius: 5px 5px 0px 0px;
    margin-left: auto;
    margin-right: auto;
}
.add_course_lables input {
    color: #16a085;
    padding: 10px;
    margin-top: 5px;
    width: 135px;
    font-size: 15px;
    border: 1px solid #16a085;
    border-bottom: 2px solid #16a085;
    border-radius: 5px;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
    width: 91.5%;
}
.add_course_lables input:focus {
    border-color: #2ecc71;
    outline: none;
    box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
    border-color: #2ecc71;
    outline: none;
    box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button {
    background: #16a085;
    color: white;
    border: 1px solid #16a085;
    border-radius: 5px;
    transition: background .4s linear;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
    margin-top: 10px;
    position: relative;
    left: 45%;
    right: 0%;
    margin-top: 20px;
}
#add_course_top_row {
    border-radius: 4px;
    border-color: #FFFFFF;
    border-style: solid;
    background: #16A085;
    color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-align: center;
    padding: 2px;
    margin-right: 0px;
    width: 30px;
    border-width: thin;
    display: inline-flex;
}
#add_course_other_rows_left {
    color: #16a085;
    border-radius: 4px;
    border-color: #16a085;
    border-style: solid;
    border-width: thin;
    background: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-align: center;
    padding: 2px;
    margin-right: 3px;
    margin-top: 2px;
    width: 60px;
    display: inline-flex;
}
#add_course_other_rows input {
    color: #16a085;
    border-radius: 5px;
    border color:#BFBFBF;
    border-style: solid;
    border-width: thin;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 3px;
    margin-top: 2px;
    margin-right: 3px;
    width: 30px;
    float: left;
}
#add_course_other_rows input:hover {
    border-color: #2ecc71;
    outline: none;
    box-shadow: 0 0 2px 1px #2ecc71;
}
#add_course_other_rows {
    display: inline-flex;
}

score 0 · Answer 6 · answered Sep 04 '14 at 10:12

Css:

@charset "utf-8";

.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
.add_course_lables input {
color: #16a085;
padding: 10px;
margin-top: 5px;
width:135px;
font-size: 15px;
border: 1px solid #16a085;
border-bottom: 2px solid #16a085;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
width:91.5%;
}
.add_course_lables input:focus {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button{
background: #16a085;
color: white;
border: 1px solid #16a085;
border-radius: 5px;
transition: background .4s linear;
padding: 10px;
font-weight: 600;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
position: relative;
left: 42%;
right: 0%;
}

#add_course_top_row{
border-radius: 4px;
border-color: #FFFFFF;
border-style: solid;
background: #16A085;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 0px;
width: 30px;
border-width: thin;
display: inline-flex;
}
#add_course_other_rows_left{
color: #16a085;
border-radius: 4px;
border-color: #16a085;
border-style: solid;
border-width: thin;
background: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 3px;
margin-top:2px;
width: 60px;
float:left;
margin-left:132px;
}
#add_course_other_rows input {
color: #16a085;
border-radius: 5px;
border color:#BFBFBF;
border-style: solid;
border-width: thin;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding: 3px;
margin-top: 2px;
margin-right:3px;
width: 30px;
float:left;
}
#add_course_other_rows input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}

See this link below,

http://jsfiddle.net/fnnb1o6d/13/

Hope it helps.

HTML CSS items not beheaving as I expect - centering

6 Answers6