CODEWITHSUNDEEP
htmlcss
pdenlinger
pdenlinger

Reputation: 3917

How to get two horizontal bars to butt up against each other

Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.

Here is the image I am getting: enter image description here

Here is the HTML and CSS:

<!doctype html>
<html>
<head>
    <title>BBC_Copy</title>

    <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" />

    <style type="text/css">

        body {
            margin:0;
            font-family: arial, helvetica, sans-serif;
        }

        #topbar {
            background-color:#7A0000;
            width: 100%;
            height:40px;
            color:white;
        }

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

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

        #signindiv {
            font-weight: bold;
            padding:2px 80px 12px  20px;
            font-size: 0.9em;
            float:left;
            border-right:1px solid #770000;
        }

        #signindiv img {
            position:relative;
            top:3px;
        }

        #topmenudiv {
            float:left;
        }

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

        #topmenudiv li {
            list-style: none;
            font-wieght:bold;
            font-size:0.9em;
            border-right:1px solid #770000;
            height:100%;
            padding:10px 20px 12px 20px;
            float:left;
        }

        #searchdiv {
            float:left;
            padding:5px 0 0 10px;
        }

        #searchdiv input {
            height:25px;
            border:none;
            font-size:0.9em;
            padding-left: 10px;
            background-image: url("images/magnify.png");
            background-repeat: no-repeat;
            background-position:center right;
        }

        .break {
            clear:both;
        }

        #newsbar {
            background-color:#7A0000;
            width: 100%;
            height:40px;
            color:white;
        }



    </style>

</head>

<body>
    <div id="container">
        <div id="topbar">
            <div class="fixedwidth">
                <div id="logodiv">
                    <img src="images/bbc_logo.png" />
                </div>
                    <div id="signindiv">
                        <p><img src="images/signin.png" />Sign In</p>

                    </div>
                    <div id="topmenudiv">
                        <ul>
                            <li>News</li>
                            <li>Sport</li>
                            <li>Weather</li>
                            <li>iPlayer</li>
                            <li>TV</li>
                            <li>Radio</li>
                            <li>More...</li>
                        </ul>
                    </div>
                    <div id="searchdiv">
                        <input type="text" placeholder="Search" />
                    </div>

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

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



        </div>

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

Upvotes: 0

Views: 249

Answers (2)

Stan
Stan

Reputation: 963

Replace this:

<div id="signindiv">
    <p><img src="images/signin.png" />Sign In</p>
</div>

with this:

<div id="signindiv">
    <img src="images/signin.png" />Sign In
</div>

Result: http://jsfiddle.net/ru7zzc1w/1/

Upvotes: 0

Phil Tune
Phil Tune

Reputation: 3325

Your problem is in:

<div id="signindiv">
    <p><img src="images/signin.png" />Sign In</p>
</div>

The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.

Upvotes: 1

Related Questions