How do you stop the content of a
from starting a new line when resized?

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>

try to add "overflow:auto;" in topBar, thought it's ugly ... And by the way try to use some divs or ul li when you create a menu ... — HamZa, May 20 '12 at 18:26

IBBoard · Accepted Answer · 2012-05-20T19:17:52.193

3

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.

edited May 20 '12 at 19:17

answered May 20 '12 at 18:20

IBBoard

909
4
16

That would work, but the content overflows down the page, not to the left. I need to make it overflow left and not down. Is there a way to do that? – Thomas Crowther May 20 '12 at 18:23
Sorry - you need to set the width of the page as well - I didn't make that clear. I've updated and added an example....Although that actually doesn't work right now - it scrolls when shown, but still wraps on resize. Give me a minute! – IBBoard May 20 '12 at 18:26
Thanks so much! Only one problem: the background doesn't wrap the overflowed content (even with min-width on the parent). – Thomas Crowther May 20 '12 at 18:51
I noticed that it overflows a bit, but it is just the way that margins interact. Also, from my tests then the text is always within the background, but it is just the margin that isn't. Based on http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element, the answer is `padding: 0.1px` on `.topbar`. – IBBoard May 20 '12 at 19:13

score 1 · Answer 2 · answered May 20 '12 at 18:14

1

You can use the overflow property. http://www.w3schools.com/cssref/pr_pos_overflow.asp

I hope it helps.

answered May 20 '12 at 18:14

gabrielhilal

10,660
6
54
81

I have tried that and it only adds a scrollbar to the div and not the page though. – Thomas Crowther May 20 '12 at 18:16

score 1 · Answer 3 · edited May 21 '12 at 00:12

1

Then you would have to give your div a fixed width.

Instead of width: 100%; replace it with how many pixels your menu is, for example: width: 700px;

.topBar {
    background-color:rgb(161,35,35);
    position:relative;
    display:inline-block;
    width: 700px;
    text-align:center;
    height:40px;
}

edited May 21 '12 at 00:12

Simon

31,675
9
80
92

answered May 20 '12 at 18:22

Mafia

792
2
19
39

score 0 · Answer 4 · answered May 20 '12 at 18:30

0

What you need is to set accordingly white-space property in your parent class.

.parent {
  min-width: 100%;
  white-space: nowrap;
}

You can see a working example.

answered May 20 '12 at 18:30

Alexander

23,432
11
63
73

How do you stop the content of a from starting a new line when resized?

4 Answers4

How do you stop the content of a
from starting a new line when resized?