CODEWITHSUNDEEP
javascripthtmlcss
SavageSpud
SavageSpud

Reputation: 125

Text Inside Div Overflowing Another Div

I'm having an issue where a search bar & text within a nav are overflowing it's div container. I have tried using various things like word-break and overflow-hidden but nothing seems to be working for me. If you see below I have my HTML code along with the CSS. Any help appreciated!

I know there are many other similar questions but nothing answers mine.

HTML:

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
        <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
    <div id="wrapper">
        <div id="sidebar">
            <nav id="nav">
                <div id="searchbar">
                    <form action="http://www.example.com/search.php">
                        <input type="text" name="search" placeholder="Enter Book Title"/>
                    </form>
                </div>
                <ul>
                    <li>
                        <a id="firstlink">
                            Home
                        </a>
                    </li>
                    <li>
                        <a id="secondlink">
                            Categories
                        </a>
                    </li>
                    <li>
                        <a id="thirdlink">
                            Bestsellers
                        </a>
                    </li>
                    <li>
                        <a id="fourthlink">
                            Contact
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

CSS:

body{
    background-color: #f1f6f6;
}

#sidebar{
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#nav{
    margin: 2em  1em 1em 1em;
    text-align: right;
    color: #888888;
    display: block;
}

#nav li{
    list-style-type: none;
}

#searchbar{
    padding-bottom: 0.5em;
    text-align: center;
}

#firstlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#secondlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#thirdlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#fourthlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

Example of Problem - http://i.imgur.com/TigP5MD.png & http://i.imgur.com/nj2A9ka.png

Upvotes: 0

Views: 79

Answers (2)

Jonathan
Jonathan

Reputation: 1695

@Pointy is right, but you will always geht in trouble with using percentage width on #sidebar and the text on your input and links. At a certain point they will be always greater than the #sidebar and overlap.

You may want to look in http://www.w3schools.com/cssref/css3_pr_mediaquery.asp to avoid this.

Upvotes: 0

Pointy
Pointy

Reputation: 413682

Give the <input> a width:

#searchbar input { max-width: 100%; }

The way to investigate things like this is to use your browser's DOM inspector tools. In this case, I was able to see (by selecting the <div> and <form> containers) that your block-level elements were constrained within the sidebar area, but the <input> itself wasn't. (In the images you linked, the container size is indicated by the blue highlight box.) It was therefore pretty obvious that the answer lay in sizing that element directly.

Here's a jsfiddle with that CSS change.

Upvotes: 1

Related Questions