CODEWITHSUNDEEP
cssfloating
Gideon
Gideon

Reputation: 37

Floating in a header without a gap between the navigation list and the edge of the browser

How do I float a navigation list in the header to the left without creating a gap to the left of the list? Please tell me what I have to change or add in order to effect no gap? On my screen, the gap is noticeable, about 1cm wide, and on the right navigation menu/list, there is no gap. Please tell me how to make my left menu float like my right menu. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            header {text-align:center;}
            nav#right_menu > ul > li{display: block;float:right;position:relative; width:25px;}
            nav#left_menu > ul > li{display: block;float:left;position:relative; width:25px;padding: 0px;margin:0px; border:0px; text-align:left;}
        </style>
    </head>
    <body>
        <header>
            <nav id="left_menu">
                <ul id="left_menu">
                    <li>Hi1</li>
                    <li>Hi</li>
                </ul>
            </nav>
            <nav id="right_menu">
                <ul>
                    <li>Hi1</li>
                    <li>Hi</li>
                </ul>
            </nav>
            <img id="logo" src="logo.png" alt="logo" />
        </header>
    </body>
</html>

markt answered this question, with ul {padding:0;}, and the code I added to fix this problem is: nav#left_menu > ul {padding:0;} edit: If I had this gap problem on both sides when floating, I would have used markt's exact code; however, I only had the issue with the left menu, hence I used my code, even though markt's code works too.

Upvotes: 0

Views: 30

Answers (1)

markt
markt

Reputation: 903

It is padding on the ul

try adding:

ul { padding: 0; }

to your css

Upvotes: 1

Related Questions