Cannot Float Div

Question

I am just a beginner in coding with HTML/CSS, and I am having trouble trying to float a specific div. Every time a type: "float:center" it will not work. Any ideas? (The div bellow will have "*" around it.)

HTML Code:

<!DOCTYPE html>

<html lang="en">

    <head>
        <title>Java Source-Home</title>
        <link rel="stylesheet" type="text/css" href="Java-Source-CSS.css">
    </head>

    <body>

            ***<div id="buttons">***
                <a href="Java-Source-Home.html">Home</a>
                <a href="">Videos</a>
                <a href="">Downloads</a>
                <a href="">Help</a>
                <a href="">Contact</a>

                <div id="header">
                    <h1>Java Source_</h1>
                </div>
            </div>



        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script type="text/javascript" src="Java-Source-JS.js"></script>
    </body>

</html>

CSS Code

body {
        background-color: white;
    }

    #header {
        float: right;
        background-color: orange;
        font-family: Courier;
        border-radius: 5px;
        margin-right: 30px;
        margin-top: 40px;
        height: 70px;
        padding-left: 5px;
        padding-right: 5px; 


    }

    #buttons {
        background-color: grey;
        height: 80px;
        width: 1260px;
        float: center;
        clear: both;

    }

    a {
        text-decoration: none;
        color: black;
        font-family: Courier;
        font-size: 18px;
        padding: 5px;
        background-color: orange;
        margin-left: 30px;
        text-align: center;
        clear:both;
    }

    a:hover {
        font-size: 20px;
        color: red;
    }

Keep in mind I'm just a beginner with HTML/CSS.

possible duplicate of [How do I center float elements?](http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements) — bjb568, May 01 '14 at 23:19
There is no such function float:center, use text-align:center or margin:0px auto instead — user1587985, May 01 '14 at 23:21
Next time please only include relevant code. Don't give html that's not related to the question. That way you won't have to use asterisks to point the section you want out — DankMemes, May 01 '14 at 23:23

Anthony Weber · Answer 1 · 2014-05-01T23:50:03.647

2

float: center doesn't exist. Only possible properties are right, left, none, and inherit.
If you use right or left, the element will be taken from the normal flow of the web page and placed at either right or left side of its parent element. Text and inline elements will wrap around the floated element.
To know more about float you can have a read on this page: http://css-tricks.com/all-about-floats/

To center your block-level element horizonally you can use margin: 0 auto. The element needs to have a width speciefied, in your case it's 1260px. What auto will do, is that the remaining space right and left of the element is split evenly between margin-right and margin-left.

And here's a little example: http://jsfiddle.net/4yw3M/
You can see, the yellow div is centered horizontally with margin: 0 auto.

edited May 01 '14 at 23:50

answered May 01 '14 at 23:19

Anthony Weber

372
5
8

This should be a comment. – bjb568 May 01 '14 at 23:19
1

No, it's a legit answer. It answers the question right? – DankMemes May 01 '14 at 23:22
You can also `float` `none` and `inherit` ;D – SimpleJ May 01 '14 at 23:23
@Zove It *is* an answer, but incomplete. Editing it to include more information is also an option. – bjb568 May 01 '14 at 23:24
No more information is needed, except perhaps a link to MDN or another related SO post – DankMemes May 01 '14 at 23:26
@bjb568 Thanks for editing. What further information is missing? – Anthony Weber May 01 '14 at 23:28
1) Float will remove element from normal flow, auto margin won't. 2) An example use of auto margin. 3) A fiddle or code pen would also be nice. – bjb568 May 01 '14 at 23:31
Nice. It's great to see people willing to (and capable of) improve themselves. +1 – bjb568 May 01 '14 at 23:59

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

There is no such CSS rule as float: center.

You need to use other methods to center such as text-align: center or margin-right: auto.

See this post for help: Align a div to center

edited May 23 '17 at 12:05

Community

1
1

answered May 01 '14 at 23:21

DankMemes

2,085
2
21
30

But even if I were to use something like text-align: center, it will not center it. – SS149 May 01 '14 at 23:27
Take a look at the linked post – DankMemes May 01 '14 at 23:37

Cannot Float Div

2 Answers2