Preventing line breaks with div without display inline

Orc · 08-09-2008, 11:26 AM

YouTube - toolisgod6's Videos

I want something like this. See how the videos are in line, and then break when it hits the end of the container.

delayedinsanity · 08-09-2008, 12:24 PM

View >> Page Source

In Firefox.

Orc · 08-09-2008, 12:25 PM

Quote:

Originally Posted by delayedinsanity

View >> Page Source

In Firefox.

Meh, youtube has crammed packed full of shit.

Can't you just tell me the css code? :P

sidisinsane · 08-09-2008, 12:53 PM

YouTube uses tables. But why can't you use a tableless layout with float:left and display:inline instead?

Orc · 08-09-2008, 01:39 PM

Quote:

Originally Posted by sidisinsane

YouTube uses tables. But why can't you use a tableless layout with float:left and display:inline instead?

I used tables at first time, but I'll try that.

Aaron · 08-09-2008, 07:26 PM

What is so bad about display:inline?

Kalle · 08-09-2008, 07:44 PM

Its pretty simple, take this as an example:

CSS:

HTML Code:

<style type="text/css">
<!--
.box { border: 1px solid #000000; float: left; margin: 5px; padding: 5px; width: 100px; }
.clear { clear: left; }
.container { width: 400px; }
// -->
</style>

And the HTML markup:

HTML Code:

<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="clear"></div>
</div>

=)

Orc · 08-09-2008, 10:06 PM

Quote:

Originally Posted by Kalle

Its pretty simple, take this as an example:

CSS:

HTML Code:

<style type="text/css">
<!--
.box { border: 1px solid #000000; float: left; margin: 5px; padding: 5px; width: 100px; }
.clear { clear: left; }
.container { width: 400px; }
// -->
</style>

And the HTML markup:

HTML Code:

<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="clear"></div>
</div>

=)

I've used float: left; before on it, but the clear made it work.

Orc · 10-21-2008, 08:41 AM

Sorry to update on an old thread but, this method the containers in different heights which fuck it up.

sidisinsane · 10-21-2008, 09:14 AM

You could use one of the many CSS "equal heights" methods (some info at positioniseverything.net). But if you're not to familar with the potential buggyness of it all, I'd advise you to go with a javascript alternative, i.e. "Setting equal heights with jQuery".

Orc · 10-21-2008, 10:02 AM

Quote:

Originally Posted by sidisinsane

You could use one of the many CSS "equal heights" methods (some info at positioniseverything.net). But if you're not to familar with the potential buggyness of it all, I'd advise you to go with a javascript alternative, i.e. "Setting equal heights with jQuery".

The javascript one didn't help, cause when you set the width to of oone of the boxes, it changes its height thats different than the others, and is not fixed. so

sidisinsane · 10-21-2008, 10:54 AM

Quote:

Originally Posted by Orc

The javascript one didn't help, cause when you set the width to of oone of the boxes, it changes its height thats different than the others, and is not fixed. so

Well, it's supposed to fetch the maximum height of all boxes with the set class and adjust them equally ... Maybe I don't quite understand your problem. How 'bout posting some of your code?