I have a container that contains a number of left-floated divs, something like:
<div id="container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
<style>
.panel {float:left; width:200px;}
</style>
In my app, the user can add more and more panels to the container dynamically, and I'd like them to always stack up on the right, and for a horiz scroll bar to appear when the user has exceeded the available space.
jsfiddle here: http://jsfiddle.net/yzTFC/6/
Floated elements are dependent upon the width of their container and do no affect the size of the container. If it is possible, do not use floated elements in this case. I would use display:inline-block with a white-space:nowrap on the parent.
http://jsfiddle.net/yzTFC/45/
Another method would be to give an insanely large width on the container but I wouldn't advise this as it is seems sloppy.
http://jsfiddle.net/yzTFC/52/
Here is a good article on how floats work:
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Try this:
HTML
<div id="parent-container">
<div id="container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
</div>
CSS
.panel {float:left; width:200px; background-color:red; height:100px; border:solid 1px black;}
#container { width: 9999px; }
#parent-container {
overflow: auto;
}
Demo: http://jsfiddle.net/yzTFC/50/
My answer is similar to Ayman. I have also added another container.
HTML
<div id="wrapper">
<div id="panel-container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
</div>
CSS
.panel {float: left; width:200px; background-color:red; height:100px; border:solid 1px black;}
#wrapper {width: 606px; overflow-x: scroll; overflow-y: hidden; }
#panel-container {width: 1212px;}
Where #panel-container CSS width is a multiple of the .panels within it, so it would take some scripting to achieve this. Most likely some javascript.
The #wrapper width was arbitrary, I just decided to show three panels at a time in the viewport.
Related
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
I want to know how to implement a strip of scrolling div boxes in a horizontal line which spans in full width of the browser.
<style>
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:200;height:300px;background:grey;margin:10px;padding:20px;}</style>
<div class="block_box">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>
I tried but after 4 or 5 block it is not hiding behind the browser instead it brakes to a new line
In your CSS add display:inline and white-space:nowrap;
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; display:inline; white-space:nowrap; width:200;height:300px;background:grey;margin:10px;padding:20px;}
Here is about white-space. More detailed explanation
Here's a fiddle with a demo of what you want:
http://jsbin.com/anekos/1/edit
New CSS:
.block_box{ height:320px; width:100%; overflow:auto;top:100px;}
.block{display: table-cell; min-width:200px;height:300px;background:grey;margin:10px;padding:20px;
Use percentages for the width of each block so it will fit the width of your browser.
You need to set a width on the div with the class of "block_box"
try applying overflow-x: scroll; css style to your .block_box div.
Try to put an outer div with fixed width. And then use overflow-x:auto property like this
HTML Code :
<div class="outer_div">
<div class="block_box">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
</div>
</div>
CSS :
.block_box{height:200px;width:800px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:100;height:200px;background:grey;margin:10px;padding:20px;}
.outer_div{ width: 500px; overflow-x:auto;}
Here is the working demo : http://jsfiddle.net/AQr6h/2/
I have a "container" DIV which has 2 floating DIV's with different height inside, and when I apply the background property on the "container" DIV it doesnt work.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
http://jsfiddle.net/arthurg/XUmsU/
How can I show the background on the container (using CSS)?
Add overflow:hidden; to the container. Like this:
#container{
height:100%;
background:red;
overflow:hidden;
}
http://jsfiddle.net/XUmsU/1/
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container{
height:100%;
background:red;
overflow:hidden;
}
#left{
width:100px;
background:green;
height:30px;
float:left;
}
You need to clear floats.
Add this <br style="clear: both"/> after those two floating divs.
HTML:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<br style="clear: both"/>
</div>
http://jsfiddle.net/XUmsU/3/
There is other (new) methods for clearfix (with pseudo-classes :before and :after).
Is there a way to have three div elements expand the width of the parent while only the middle div has a fixed width? The div element to the left and right of the middle one should have equal widths.
I want something like this to work:
<div style="width:100%">
<div id="elasticWidth1"></div>
<div id="fixedWidth"></div>
<div id="elasticWidth2"></div>
</div>
Edit: This is what the result should look like:
You can use something like this: http://jsfiddle.net/Urbrf/6/
html
<div id="wrapper">
<div class="halfWidth left">
<div class="padding">
<div id="columnOne" class="fullWidth">
</div>
<div id="columnTwo" class="fixedWidth">
</div>
</div>
</div>
<div class="halfWidth right">
<div class="padding">
<div id="columnThree" class="fullWidth">
</div>
</div>
</div>
</div>
CSS
#wrapper {width:100%;}
.halfWidth {width:50%;}
.fullWidth {width:100%;}
.left,
.left .fullWidth {float:left;}
.left .padding {padding-right:100px;} /*half of the fixed width*/
.right,
.right .fullWidth {float:right;}
.right .padding {padding-left:100px;} /*half of the fixed width*/
.fixedWidth {width:200px; margin-right:-200px; float:right;}
Rather than doing it with float, I would do it with inline-block:
div {
display: inline-block;
}
Anyway, how do you want to set the width of the left & right-div equaly, when they are elastic?
I am designing a page which lists several books. I am in trouble that content sometimes go out of book-info box, say a book's title is extremely long and go beyond 140px height. I wonder what's the best solution to this? Below is the sample of my code.
//css
.book-data{height: 140px; width: 500px};
.book-image{float: left; width: 200px;}
.book-info{float: left; widdth: 300px;}
//html
<div class="book-data">
<div class="book-image"></div>
<div class="book-info">content</div>
</div>
<div class="book-data">
<div class="book-image"></div>
<div class="book-info">content</div>
</div>
simple as:
overflow: hidden
http://jsfiddle.net/seler/pyseH/
If you let the book-data div keep it's height to auto; than your text can wrap around and despite the float. using clear both property will prevent the book-data div to collapse when yyou don't set it's height. Try this i am sure it will work;
//css
.book-data{width: 500px};
.book-image{float: left; width: 200px;}
.book-info{float: left; widdth: 300px;}
.clear {clear:both;}
//html
<div class="book-data">
<div class="book-image"></div>
<div class="book-info">content</div>
<div class='clear'></div>
</div>
<div class="book-data">
<div class="book-image"></div>
<div class="book-info">content</div>
<div class='clear'></div>
</div>