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/
Related
I have a div container of width and height 420px inside that container i have 4 small div's with width 140px and height 140px but 2nd divs height is 170px.if i apply css float property float:left to all the divs except container div.
Q1).where will the 4th div sit.
Q2).if i want the 4th div to come below 1st div how can i do it without using position:absolute or relative.
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
css
.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}
Here is the link for my code JSFiddle
Define your .section4{clear:left;}
Demo
.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}
.section4{clear:left;}
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
2nd option your can try to display:inline-block as like this
.container{width:420px;height:420px;border:1px solid black;font-size:0;}
.section1{width:140px;height:140px;background-color:green;display:inline-block;vertical-align:top;font-size:12px;}
.section2{width:140px;height:170px;background-color:yellow;display:inline-block;vertical-align:top;font-size:12px;}
.section3{width:140px;height:140px;background-color:red;display:inline-block;vertical-align:top;font-size:12px;}
.section4{width:140px;height:140px;background-color:orange;display:inline-block;vertical-align:top;font-size:12px;}
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
Add clear: both to your 4th div:
https://jsfiddle.net/8kyed4fx/1/
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 have four divs inside a container like this:
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
I would like to keep the first and last div aligned to the edges of the screen and only center the two divs in the middle. I tried display inline block and adjusting the margins, but i just can't figure it out. Please try and enlighten me!
Kind Regards
Use this HTML
<div class="container">
<div class="block left">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block right">4</div>
</div>
and then this CSS
.container {
display:block;
text-align:center
}
.block {
display:inline-block;
border:1px solid #000;
padding:10px;
margin:auto
}
.left {
float:left
}
.right {
float:right;
}
you can also use first-child and last-child, but it's easier to add a class to first and last div
See fiddle here
Try using :nth-of-type() pseudo-class allows you to select elements with a formula,like this: http://jsfiddle.net/csdtesting/11fh7suy/
//second div
div.container div:nth-of-type(2) {
background-color: #9999ff;
text-align:center;
}
//third div
div.container div:nth-of-type(3) {
background-color: #9999ff;
text-align:center;
}
Hope it helps!
Adding an extra container will give you more control:
<div class="container">
<div class="block">1</div>
<div class="wrap">
<div class="block">2</div>
<div class="block">3</div>
</div>
<div class="block right">4</div>
</div>
.wrap{width:50px;margin:0 auto}
.block{float:left;width:25px;text-align:center}
.right{float:right}
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).
I have the following webpage which works in IE7 but not in IE8;
The HTML:
<div class="content">
<div class="inner_content">
<div class="column">
<div class="widget">
1
</div>
</div>
<div class="column">
<div class="widget">
4
</div>
</div>
<div class="column">
<div class="widget">
7
</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner_footer">
footer
</div>
</div>
The CSS:
.inner_content, .inner_footer
{
width:983px;
margin:auto;
padding:10px;
}
.content
{
background:#FFFFFF;
}
.footer
{
background:#BBBBBB;
}
The problem:
For some reason the footer div goes underneath the content div in IE8 but not in IE7. How do I get it to look the same in IE8 as it looks in IE7? The IE7 look is how I want it to look.
jsFiddle:
http://jsfiddle.net/GgpaP/
You need to contain the floated .columns inside .inner_content.
One way to do this is to add overflow: hidden: http://jsfiddle.net/thirtydot/GgpaP/3/
This will also make it work in modern browsers.
Add clear:both to footer...
DEMO
Also slight modification has been done for container.
Add display:inline-block to your content-class (in css).