In CSS, how to not float a 300px wide Div to the next line?

HTML & CSS
1

Say, there is a bar that is styled at the bottom of the viewport, using

position: fixed; bottom: 0; left: 0; width: 100%; height 50px; overflow: hidden

and then there are 4 Divs inside it, each one floated to the left. Each Div is about 300px wide or can be more (depending on the content)

Now, when the window is 1200 pixel wide, and we see all 4 Divs, but when the window is resize to be 1180 pixel wide (just 20 pixels less), then the whole 300px wide Div will disappear, because it is “floated” to the next line.

So how can this be made so that, the Div will stay there and showing 280px of itself, rather than totally disappear?

By the way, “white-space: nowrap” won’t work as that probably has to do with not wrapping inline content.

I was thinking of putting another Div inside this Div, having a fixed width of 1200px or 2000px, so that all Divs will float on the same level in this inner Div, and the outer Div will cut it off with the “overflow: hidden”. But this seems more like a hack… since the wide of all those Divs can be dynamic, and setting a fixed width of 1200px or 2000px seems like too much of a hack.

Update: somebody suggested making the Divs inside as “display: inline” and using nowrap, but then you can’t set the width or height of any of those Divs afterwards because they are inline now…

2

to preload images, i tried using a div of 1 pixel x 1 pixel near the end of page, and have overflow: hidden there… and then put all the images inside that div…

so unless browsers are really smart to find out whether the images actually shows after the CSS dimension rules are applied, it will preload the images.

3

so you mean whether it is left: -1000px or left: -10000px shouldn’t affect the browser taking up more memory?

Yes that’s what I meant :slight_smile:

For example, if we are displaying an img that increase the page count or doing analytics, then display: none may not pull the image but left: -10000px might…

Interesting question and I believe that most browsers will load the image even if display:none is used but apparently browsers like Opera won’t. There seems to be no definitive answer but a lot of users actually use display:none for pre-loading images so they obviously get loaded in the majority of browsers.

4

Not quite sure what you are saying there but display:none removes the element from the document which means search engines and some screen readers will miss out on the information it provides (such as in drop down menus etc) which would be a disaster. This doesn’t happen when the element is simply moved out of the way of the viewer.

Just moving an element takes no extra processing than doing anything else no matter how far you move it :slight_smile:

5

For example, if we are displaying an img that increase the page count or doing analytics, then display: none may not pull the image but left: -10000px might…

so you mean whether it is left: -1000px or left: -10000px shouldn’t affect the browser taking up more memory?

6

ah thanks Paul… hm, the only thing I am afraid is, if anything goes wrong, I won’t be able to fix it…

If I know for sure the bar won’t be more than 1500px or 2000px wide, I may as well use the method i mentioned in the original post? (the simplest method?)…

I am only worried that the browser might use extra memory to process it actually creating some tmp div that is 2000px wide.

i once saw a coworker who wanted to move something off the screen and he used

position: relative; left: -10000px

haha

7

what’s a difference between using display: none to hide it as opposed to position: absolute and left: -10000px ? maybe some browser will still render the -10000px one and let the display/traffic count go up once while the display: none one won’t?

8

The code is pretty straight forward so there isn’t much to go wrong :slight_smile:

I am only worried that the browser might use extra memory to process it actually creating some tmp div that is 2000px wide.

CSS considerations such as that are negligible and not worth worrying about. The only thing to beware of when using large numbers is that browser have limits on how big a number that will obey.

Opera and safari seem to have a limit of 32767px which in normal use is not an issue.

i once saw a coworker who wanted to move something off the screen and he used

CSS Code:
[LEFT][COLOR=#000066]position[/COLOR]: [COLOR=#993333]relative[/COLOR]; [COLOR=#000066]left[/COLOR]: -[COLOR=#993333]10000px[/COLOR]

[/LEFT]

You should never move anything structural with position:relative as it doesn’t actually move anything at all. The space it originally occupies is always preserved and relative positioning is used for more subtle or overlapping type effects.

To hide things off screen use a negative absolute position (left:-999em;top:-999em) (or a negative margin).

9

Yes that would work but simply placing them off screen works also and doesn’t leave you with a 1px pixel in your layout.:slight_smile:

In most cases though just using the correct rollover technique obviates the need for anything special and most images can just load normally (unless you are doing a gallery or something and want them all loaded first - even then it’s debatable whether making the user wait while all the gallery images load is a good idea).

10

Instead of floating the <div>s, make them inline-block. Then, nowrap on the parent will work.

cheers,

gary

11

Hi,

You can make IE6/7 have the same behaviour like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width:100&#37;;
    height:50px;
    overflow: hidden;
    white-space:nowrap;
}
.box {
    width:300px;
    background:red;
    margin:0 5px 0 0;
    height:50px;
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:top;
}
* html .box {display:inline}
*+html .box {display:inline}
</style>
</head>
<body>
<div class="fixed">
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</div>
</body>
</html>

Of course you still won’t be able to scroll the fixed element because anything outside the viewport is unreachable for a fixed element.

12

and on IE 6 and 7, it will not work well?

13

Try min-width: 1200px.

EDIT: didn’t see Gary’s post. His solution looks better, so go with that. :slight_smile: