Overflow

[hackalive]

Hi guys,

 

I have the following code:

 

CSS

* {
margin: 0 0 0 0;
}

body, html {
overflow: hidden;
}

#container {

}

#setA {
float: left;
display: inline-block;
margin-left: 0.75in;
}
#setB {
float: left;
display: inline-block;
margin-left: 0.75in;
}
#setC {
float: left;
display: inline-block;
margin-left: 0.75in;
}

.item {
background: blue;
width: 500px;
height: 500px;
}

 

PHP

		<div id="container">
		<div id="setA">
			<div class="item"></div>
		</div>
		<div id="setB">
			<div class="item"></div>
		</div>
		<div id="setC">
			<div class="item"></div>
		</div>
	</div>

 

On my screen "SetC" goes onto a new line and does not overflow the screen horizontally (and then need to scroll to see it) like it should.

 

How can I fix this?

[AyKay47]

this has to do with the width of #container;

 

http://jsfiddle.net/9LsEs/1/

[hackalive]

Thanks for your reply, however what if I don't know the width as a number?

 

Im placing two jQuery isotope instances side by side so I have no idea what the overflow is.

[AyKay47]

Thanks for your reply, however what if I don't know the width as a number?

 

Im placing two jQuery isotope instances side by side so I have no idea what the overflow is.

 

need to have a fixed width set.

[hackalive]

Well there is no way to tell that.

 

How about jquery appending the CSS?

[AyKay47]

you would have to calculate the width needed and set that to #container using something like JS yes.

[hackalive]

How can I calculate the width needed?

 

Or how can I place two instances of isotope in the same div to get out of this issue?

 

(or is there some other jquery/css way out of this? how do they do it with the HTML5 presentation apps?)

[hackalive]

bump

[hackalive]

bump

[hackalive]

bump

[White_Lily]

Setting a width in CSS is simple:

 

 

width:230px;

 

 

change "230" to suite the container width, to judge this just up the number until they are all how you want them.