TalkPHP - Preventing line breaks with div without display inline

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Preventing line breaks with div without display inline (http://www.talkphp.com/xhtml-html-css/3223-preventing-line-breaks-div-without-display-inline.html)

Orc	08-09-2008 10:26 AM

Preventing line breaks with div without display inline

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 11:24 AM

View >> Page Source

In Firefox. ;-)

Orc	08-09-2008 11:25 AM

Quote:

Originally Posted by delayedinsanity (Post 17664)

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 11:53 AM

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

Orc	08-09-2008 12:39 PM

Quote:

Originally Posted by sidisinsane (Post 17666)

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 06:26 PM

What is so bad about display:inline?

Kalle

08-09-2008 06: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 09:06 PM

Quote:

Originally Posted by Kalle (Post 17680)

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 07: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 08: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 09:02 AM

Quote:

Originally Posted by sidisinsane (Post 19002)

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 09:54 AM

Quote:

Originally Posted by Orc (Post 19004)

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?

All times are GMT. The time now is 10:52 AM.