Search code examples
htmlcsscenter

Centering a DIV in CSS/HTML


I know this question is asked a lot, but i am having a serious problem with my website concerning the centering of a div element. I read through hundreds of answers in blogs or on other websites but couldn't figrue out the problem.

My Website has a Navigation bar on top with a fixed position. This Nav-Bar is in an own div. Then I wanted to have a centered text and a picture. So I wrote another div right below the 1st one and tried very hard to center it. I also tried to copy the CSS-settings from the 1st div that is centered, but it wouldn't work.

However, here is the complete source code and the CSS style sheet:

body {
    padding:0;
    margin:0;
    background-color:#555555;
    float:left;
    }

#nav {
    background-color:black;
    color:white;
    text-align:center;
    padding:0px;
    position:fixed;
    left:0;
    right:0;
    width:100%;
    }

#menue_button {
    border:0;
    height:"40px";
    width:"40px";
    cursor:se-resize;
    }

a {
    color:white;
    }

input {
    margin: 0;
    padding: 2px 0 3px 30px;
    background-color: #ffffff;
    font-size: 16px;
    vertical-align: center;
    border: none;
    border-bottom: 3px solid #bdbdbd;
    border-image: initial;
    cursor: auto;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}

#sewing_menue_bar {
    margin:0;
    padding:0;
    position:fixed;
    left:0;
    right:0;
    top:55px;
    width:100%;
    
    }

#logo{
    background-color:white;
    color:black;
    text-align:center;
    padding:0px;
    left:0;
    right:0;
    width:100%;
    margin-top:70px;
    }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AeroTop</title>
<link rel="stylesheet" type="text/css" href="style/Style.css">
</head>
<body width="100%">
    <div id="nav">
    <table width="100%" cellpadding="0px">
        <tr>
            <td width="8%">
                <img src="graphics/menue_button.png" border="0" alt="Settings" height="40px" width="40px" title="Settings" style="cursor:pointer">
            </td>
            <td width="38%">
                <p id="nav-set"><a href="login_overlay.html">Login</a> &#160&#160&#160&#160&#160&#160Not a member yet? <a href="register.html">Register!</a></p>
            </td>
            <td width="1%">
                <p id="nav-set_|">|</p>
            </td>
            <td width="30%">
                <p id="nav-set">
                    
                    <input name="q" type="text" placeholder="Auf AeroTop suchen ">
                </p>
            </td>
        </tr>    
    </table>
    </div>
    <div id="sewing_menue_bar">
        <img src="graphics/sewing_menue_bar_smaller.png">
        </div>
    <div id=logo>
    <table>
        <tr>
            <td width="100%">
                <p>test</p>
            </td>
        </tr>
    </table>
    </div>
</body>
</html>

Thank you for your help!
Kindest regards Fabian


Solution

  • Try this:

    body{width: 100%;}
    #sewing_menue_bar {
        margin: 0;
        padding: 0;
        position: fixed;
        left: 50%;
        right: 0;
        top: 55px;
        width: 100%;
        }
    #logo table {
        width: 100%;
    }
    

    This is wrong:

    <body width="100%">
    

    You must enter the correct and use style="width:100%" in body tag.

    <body style="width:100%">