I need to create a div of fixed height and 100% width. The contents of the div are a series of images (just img tags).
When I resize the window smaller than the overall width of the images, the last image in the list shifts/flows down and to the left, underneath the first image.
How do I keep the images from shifting/flowing to the next line and keep them all on one line so that the user is forced to scroll the div horizontally to see the rest of the images?
Here is a jsfiddle as an example: http://jsfiddle.net/ZnWXj/2/
You'll want to use the white-space CSS property to the div and give it a nowrap value.
Show in this jsFiddle. (Your original, plus I added the overflow-y property.)
CSS used:
div {
height: 120px;
background: #666;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
I think you are trying to Float all the images in the left.
In css use Postion Absolute for all images and then Float all the images to the left.
Something like
float:left;
position: absolute;
use these on the img tag
this is off the top of my head has not tried it yet. So sorry if I am wrong.
Related
I want to display content - other divs containing text - in a div on my website.
The div is a child of a flexbox.
Sometimes, this content is bigger than the size of my div.
But this is not a problem, as I only want the stuff at the bottom-right corner of the content to be visible anyway.
What I do is use the property overflow: hidden;. But this lets the content overflow to the right and bottom instead of the left and top.
What I have:
What I want:
I tried:
using overflow: scroll; and scrolling to the maximum, but this broke my layout.
using direction: rtl;, but this reverses the direction of my text instead of the overflow.
using float: right;, which doesn't do anything.
Do you have any suggestions for what I could try?
Thanks!
I need the CSS and HTML code to give you a precise answer, but I think that you can solve the issue by giving:
position: relative;
overflow: hidden;
to the parent and:
position: absolute;
bottom: 0;
right:0;
to the child element.
I have one requirement to show vertical scroll and textbox TextBox_Inline_Issue element should be inline on a DIV. I'm using overflow-y:scroll and display:inline both css properties on the DIV. I'm able to get the vertical scroll after certain height but when I remove disply:inline, Textbox element comes down in second line instead being there in same line.
I'have attached screen shot for the reference.
.header-section{
max-height: 133px;
/*display: inline;*/
overflow-y: scroll;
}
I'm trying to build a horizontal scrolling image gallery, which has a fixed height (e.g. 200px) and a bunch of images (aspect ratio mantained, shrunk to fit 200px height) placed side-by-side in the gallery. If the images exceed the browser width, a horizontal scrollbar for the gallery is provided.
I'm having a problem with getting it to work on Firefox. In Firefox, the div that contains the image will act as if its child image wasn't shrunk, and thus leave lots of white space between images. The gallery works as expected in Chrome and Safari.
I've made a jsfiddle to try and replicate the problem in as little lines as possible - observe it in Firefox vs. another browser.
.container {
height: 200px; /* Want a fixed height for container. */
white-space: nowrap; /* Want elements to display side-by-side, for horizontal scrolling. */
overflow: auto; /* Want scrollbars on .container. */
}
.container > .element {
display: inline-block;
height: 100%;
}
.element > img {
height: 100%;
}
Am I doing something wrong? Is there any way to get .element to shrink to fit its scaled-down image content?
Note that aside from the image, I'd like a text overlay over the image (not reflected in jsfiddle), which is why I've chosen to enclose the image in a .element div (so that I can give it position: relative and then add an absolutely positioned child overlay to it), and chosen to give it a display of inline-block (so that I can align the child overlay to the bottom of .element).
You're seeing https://bugzilla.mozilla.org/show_bug.cgi?id=829958
The good news is that this is fixed in Firefox 25. The bad news is Firefox 25 is not shipping until October 28.
As a workaround for now, giving .container > .element a fixed height instead of a percentage height would work... Or alternately give .container a parent that has the overflow style. The key part to work around that bug is to have the fixed height on something that has visible overflow.
So what I'm trying to accomplish is to have a div centered on the page (margin: auto auto;) with a navigation div just to the left of it.
The idea being the navigation div can be switched on or off (so may or may not be there). If its there or not should not interferer with the centering of the main div.
Below is an example
I've tried a few things
Wrapping both divs with a main div. Setting the main div to margin: auto auto and then setting both child divs to float: left. The problem is that when the nav div dissapears the entire thing shifts left.
Keeping the middle div margin: auto auto; floating the nav div left and then using margin-left but this changes when the page gets bigger or smaller.
Any pointers would be appreciated in the best way to do this. I was hoping to avoid tables.
JSFiddle link
Try this:
In your html:
<body>
<div class="encasing">
<div class="leftmenu"></div>
</div>
</body>
In your css:
html, body
{
width: 100%;
height: 100%;
}
div.encasing
{
top: 50px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 500px;
background-color: green;
position: relative;
}
div.leftmenu
{
right: 100%;
width: 10%;
height: 300px;
background-color: red;
position: absolute;
}
The important parts are:
To put your block containing the menu inside your center block
Make the center block have margin-left: auto; margin-right: auto;
Make the center block have a relative positioning
Have the menu have a absolute positioning
Make the menu have right: 100%
The idea here is to make the left menu use the position of the center block and then adjust itself. Right: 100% will put the right edge of the menu on the left edge of the menu.
In the end, a really good trick in css is that absolute positioned elements adjust themselves relative the the nearest relative or absolute positioned parent. :)
A few solutions I can think of:
Use absolute positioning for the navigation div. You probably want to give the body element a min-width to avoid the navigation div overlapping the main div when the window is too small.
Three-column layout, e.g. two divs with fixed widths floated to the left and right, and the content div between them. Inside the left-floated div, display your navigation div (or not). Alternatively, try display: inline-block on the three columns. The difference is in how small windows are handled (try it out). Again, you can counter undesired effects by setting a min-width on the body.
Completely fixed layout. Decide on an ideal screen resolution, and hard-code everything to that. This way, you can absolute-position everything where you want it, but the downside is that it won't look good on anything that deviates too much from the intended resolution. Especially mobile devices will see devastating results; you counter these with #media queries to adjust your layout to other screen resolutions.
You should also try to find a site that does what you want to do, and see how they did it (inspect HTML, CSS, and maybe Javascript).
I'm trying to use a div to repeat a background to 100% of the height of the content inside the wrapper.
I'm using overflow: hidden to do this, but this (unsurprisingly) cuts off content at a point dependent on the user's screen resolution.
Removing the overflow:hidden line means the background won't repeat at all and the #wrapper div doesn't assume the full height of the content.
You can see my code and a preview here - http://jsbin.com/ikuba4/2 - if anyone has any pointers that would be great!
EDIT: To clarify, the issue is that I need my #wrapper div (which contains the background image slice repeating vertically) should dynamically extend its height to the height of the #inner_wrapper div - removing overflow:hidden results in the #wrapper div not extending its height at all, while using overflow:hidden extends the height to a point but then content gets cut off.
On #wrapper:
Remove height: 100%.
Remove overflow: hidden.
On #inner_wrapper:
Remove height: 100%.
Add overflow: hidden.
Testing with Firefox/Firebug, those steps sort it out.
Here is a fixed jsBin which is doing the equivalent of those steps.
Edit:
As #Marnix pointed out in his answer, you should also remove height: 100% from #outer_container - I don't think there's any need for it to be there.
A little different which works as well:
#outer_container
remove height: 100%
#wrapper
remove height: 100%
#inner_wrapper
remove height:100%
add overflow:auto