I am trying to make an image scroller and I am stuck with my CSS side of things. The current CSS that I have is making them going under each other not next to each other and I can't figure out how to make it work that way.
The Images are stored in a div of themselves which are under a another div called imageScroller and the imageScroller div is under the Content div.
Here is the CSS of the following divs
#content
{
text-align: center;
padding: 20px;
}
#imageScroller{
margin: 0 auto;
width: 850px;
height: 250px;
overflow: hidden;
}
.image{
float: left;
}
I think what you want is achieved by adding white-space: nowrap to #imageSlider and changing .image so that instead of float: left, it is display: inline-block.
Here's a fiddle. Adjust as needed.
The font-size: 0 in #imageSlider is to get rid of extra white space in between the <div>s.
Related
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I am trying to make it possible to align divs with a lot of text horizontally, so you can scroll through them horizontally. Not really experienced and I can't figure out what I am doing wrong..
Here is my css:
#content {
font-size: 18px;
text-align: justify;
display: inline-block;
vertical-align: middle;
overflow-x: auto;
height: 70%;
margin-top: 15%;
margin-bottom: 15%;
}
.item {
width: 50%;
max-height: 70%;
margin-bottom: 30px;
margin-top: 100px;
margin-left: 25%;
margin-right: 25%;
overflow: scroll;
}
Thanks!
I assume you want to put multiple .items into the #content and they should then wrap horizontally. Is that correct?
You would then need a wrapper over your #content that has a fixed width (this is going to be your 'scroll window'). The #content itself needs to be wider so that you can scroll it while the wrapper needs the property overflow-x:scroll. Since you don't know how wide your #content should be (except if you know the number of .item divs) I suggest to set it with Javascript. Finally it's important to have float: left in your .item, otherwise they won't wrap horizontally.
Additionally you could let JS set your #contents height to the heighest .item if you don't want this to be same for all .items.
Take a look at this fiddle if this is what you try to achieve.
Optionally you could use css3 columns. However you wouldn't yet use it, as you won't have any support for IE9 and below. See here how this works.
Cheers!
I'm trying to place buttons on the left and the right side of a scrollable div. See this jsfiddle[1] where they are still wrapped. So I changed the display of content and btn to inline-block. See this next version of the jsfiddle[2]. That sort of worked, but the buttons are not nicely aligned. And I actually don't have any idea why. So how come and why is that?
I am confused with you saying buttons are not nicely outlined, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
Demo
You can also float all your elements to the left as #Jarno suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.
make all elements floating ~> DEMO
.content {
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: 40px;
display: inline-block;
float: left;
margin: 0 10px;
}
.btn {
width: 30px;
height: 40px;
display: inline-block;
float: left;
}
OR you can use vertical-align for elements to fit each other vertically
You could use float:left; on .content and .btn.
Also, don't forget to put overflow:hidden; on your .container.
Example
You need to add float positions to each .btn. float left for the left arrow and float right
Add the vertical align to the buttons:
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/y84VA/7/
I have to divs layouted as display: inline-block. Intentionally, I want these two divs (tileImage, title) to share the 300px width of the parent div (preview). Thus, I have set their width to 50%. For some reason the second div is moved to the next line.
Changing the width of div "title" to 48% will move the div next to the div "titleImage". There you notice the space in between. Where does this space come from? How do I get rid of it?
Here is the JFiddle: http://jsfiddle.net/SFDPe/2/
Thanks!
You should float your elements to the left and right, instead. Then, make sure you set height: auto; and overflow: auto; to the parent container. This ensures that the .parent container actually overflows and grows automatically when elements are floated inside of it.
JSfiddle here.
.preview {
width: 300px;
border: 1px solid red;
vertical-align: top;
height: auto;
overflow: auto;
}
.title {
width: 50%;
background-color: olive;
float: right;
}
.tileImage {
width: 50%;
background-color: orange;
float: left;
}
Instead of using display:inline-block use, float:left for both divs.
http://jsfiddle.net/SFDPe/3/
Take a look onto this article:
Fighting the Space Between Inline Block Elements
Maybe you can use float: left; instead? Like this:
.preview, .preview div {
float: left;
}
I want to create two DIVs, a container DIV (which contains arbitrary content) and an arrow DIV which allows the user to scroll the content horizontally.
Ignoring the Javascript aspect, the basic layout and CSS could be something like:
<!DOCTYPE html>
<html>
<head>
<style>
.outer-wrapper {
min-width:275px;
overflow: hidden;
border: 1px solid #000000;
height: 40px;
}
.container {
width: 90%;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
.inner-content {
margin-top: 10px;
white-space: no-wrap;
position: relative;
display: inline-block;
white-space: nowrap;
}
.inner-element {
display: inline-block;
}
.arrow {
margin-top: 12px;
min-width: 30px;
font-size: 10px;
text-align: right;
margin-right: 2px;
}
</style>
</head>
<body>
<div class = "outer-wrapper">
<div id = "container" class = "container">
<div class = "inner-content" id = "inner-content">
Options Options Options Options Options Options Options Options Options
</div>
</div>
<div id = "arrow" class = "arrow">
▶
</div>
</div>
</body>
</html>
Here's a jsfiddle link showing the rendering: http://jsfiddle.net/RSTE9/1/
The problem I have is that, ideally, I'd like the DIV containing the arrow to be as small as possible, so that most the width of the screen is comprised of the container DIV.
To achieve this, I thought I'd set the container DIV to a width of like 98%, and the arrow DIV to a width of like 2%. Unfortunately, this causes the arrow DIV to wrap to the next line on smaller screen sizes.
The essential problem is that I want the arrow DIV to always take up a very small portion of the screen, but I can't find a way to do this using percentages. If the screen width is large, the arrow DIV always takes up too much space. But if the screen width is very small (say on a mobile device), the arrow DIV might be pushed to the next line. I played around with different percentage values, but there's seemingly no way to get an ideal value. I settled at a width of 90% - this looks good on small screens, but on a large screen it means the arrow DIV is taking up 10% of the screen!
I was thinking of using CSS3 media queries to adjust the percentages dynamically, but I am wondering if there is some easier solution that I'm just not thinking of.
I would suggest that using css calc would be the answer:
CSS Calc on MDN
give the arrow div a fixed size and the container a calc(100%-30px):
.container {
width: calc(100%-30px);
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
Here is an example on jsFiddle:
http://jsfiddle.net/RSTE9/5/
Notice I removed a few of the options options so you can see the effect better.
You do have a minimum width on the main container, which prevents more collapsing.
Why not set width of container as "*"?
.container {
width: *;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
jsFiddle: http://jsfiddle.net/RSTE9/6/
seems like you messed a bit with float , display and white space.
display and white space is a good clue, width a little less.
the idea is:
set the block container width no width nor overflow, but margin and white-space,
for inner content, reset white-space to normal , use display instead float.
Set min-width to text-content (100% - margin given to container)
Finally , vertical-align on both inline boxe containers text + arrow.
.outer-wrapper {
min-width:275px;
white-space: nowrap;
margin:0 1%;
}
.container {
min-width:98%;
margin-left: 0.5em;
margin-right: 0.5em;
min-height: 40px;
vertical-align:middle;
border: 1px solid #000000;
display:inline-block;
white-space:normal;
}
.arrow {
font-size: 10px;
width:1em;
text-align: right;
display:inline-block;
vertical-align: middle;
}
http://jsfiddle.net/GCyrillus/2e3du/1/