Cannot clear margins on new bar

Question

0.00/5 (No votes)

See more:

I am having trouble clearing my margins in my "newbar" I tried creating a break but on the left and the right there is a slight "white" showing that I cannot pad out. If you copy paste my code you will see What I am talking about as there are 2 bars I created one being the header and the one under it which will be my news feed bar but the news feed bar simply does not completely cover from on the left side but does cover the right.

CSS

body {
    margin:0;
    font-family:Arial,Helvetica,freesans,sans-serif;
}


#topbar {
    background-color:black;
    width:100%;
    height:113px;
    color:white;
}

.fixedwidth {
    width:1912px;
    margin:0 auto;
}

#logodiv {
    padding-top:0px;
    float:left;
    border-right:1px solid white;
    padding-right:10px;
}

#signindiv {
    font-weight:bold;
    padding:35px 100px;
    margin:0 auto;
    font-size:2em;
    float:left;
    border-right:1px solid white;
}

#topmenudiv {
    float:left;
}

#topmenudiv li{
    list-style:none;
    font-weight:bold;
    font-size:2em;
    float:left;
    padding:35px 55px 220px 55px;
    border-right:1px solid white;
}

#topmenudiv ul{
    margin:0;
    padding:0;
}

#searchdiv {
    float:left;
    padding:35px;
}

#searchdiv input{
    height:25px;
    width:200px;
    border:none;
    font-size:1.5em;
    background-image:url("../images/search.png");
    background-repeat:no-repeat;
    background-position:right center;
}

.break {
    padding-bottom:112px;
    clear:both;
}

#newsbar{
    background-color:#505050;
    width:100%;
    height:100px;
    color:white;
}


<!doctype html>
<html>
<head>
    <title>Expedius</title>
    <link rel="stylesheet" type="text/css" href="CSS/Expedius.css"

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <div id="container">
        <div id="topbar">
            <div class="fixedwidth">


<div id="logodiv">

    <img src="Images/Expedius Logo.jpg" height="250" width"250"/>

</div>

<div id="signindiv">

    <img src="images/sign in.png"/> Sign In

        </div>

        <div id="topmenudiv">
<ul>
    <li>About</li>
    <li>Blog</li>
    <li>Menu</li>
    <li>Order</li>
    <li>Locations</li>
</ul>


        </div>

        <div id="searchdiv">
            <input type="text" placeholder="Search" />
        </div>

        <div class="break"></div>
        <div id="newsbar">

    </div>
</div>

</body>
</html>

And again there is a small gap on the left and right of the "newsbar" and it does not directly sit under my topbar which is causing me major headaches probably a rookie mistake but just looking for someone to point it out.

Posted 8-Oct-15 14:32pm

Member 11495876

Updated 8-Oct-15 14:38pm

CHill60

v2

Add a Solution

Comments

[no name] 9-Oct-15 1:49am

Your code doesn't provide HTML part. Please add code for HTML by "Improve question".

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Stanley_B707 · Answer 1 · 2015-10-13T13:41:00

Solution 1

Try to remove padding from body or the object containing the bar

Posted 13-Oct-15 13:41pm

Stanley_B707