Question

I’ve got a problem with a little project. I have a navigation bar that is a div and I have links inside it, however whenever I resize the page the last two start a new line. I would like the links to stay in a horizontal position and have a scrollbar added to the page. For example, when you are on google and you resize the browser the overflowed content does not start a new line., a scrollbar is added. I have tried using a parent div and setting a minimum width, but neither have worked.

The CSS:

.topBar {
    background-color:rgb(161,35,35);
    position:relative;
    display:inline-block;
    width:100%;
    text-align:center;
    height:40px;
}
.text2 {
    font-size:35;
    text-decoration:none;
    margin-left:4%;
    margin-right:4%;
}
.parent {
    min-width:100%;
}

And the HTML:

<div class="parent">
    <div class="topBar">
        <a class="text2" href="placeholder.html">Media Mash</a>
        <a class="text2" href="placeholder.html">Film</a>
        <a class="text2" href="placeholder.html">Music</a>
        <a class="text2" href="placeholder.html">Games</a>
        <a class="text2" href="placeholder.html">Books</a>
    </div>
</div>

Answer 1

Pages will automatically scroll horizontally when the content is too wide. If you want lots of elements in a block to stay too wide then you either need to make their parent too wide (which isn’t applicable in this case) or stop the parent wrapping in-line elements (which is applicable). To stop the parent wrapping the <a> tags, add white-space: nowrap to the .topbar rules.

If you want the background of .topbar to always fill out behind the contents as well then you’ll also need to change your width property to min-width.

Here’s an example of it in action without the min-width fix (it overflows at about 800px wide for me).

As mentioned in the comments, to make sure that margins don’t overflow outside the parent when the content is wider than the page, add padding: 0.1px to the .topbar rules. This forces the child margin to stay inside the parent margin (rather than overlapping it) without affecting presentation by much.