There is a Div of width say 500px and height 50px.
Inside this Div there are many (say 50) small Div of width 50px and height 50 px.
Now i want a horizontal scroll instead of a vertical one.
How can i force those small divs to overflow horizontally not vertically
Also number of small divs can change.
Assign the following CSS to the outer DIV:
white-space: nowrap;
overflow-x: scroll;
See an example at this fiddle.
Try setting the child div's to display: inline-block, then set the parent to white-space: nowrap.
Hope that helps :)
the main div style define
float : left;
overflow : scroll;
Related
I want to make the div stay the same size while I resize the window.
My css for the div:
.header {
white-space: nowrap;
color: #fff;
padding: 0.5em;
background: linear-gradient(90deg, #B71C1C, #0D47A1, #0D47A1);
}
and here is the output before the wrap:
and after the wrap:
what I want is to header div always stay the same size no matter the browser's width.
The "white-space:nowrap" property is meant for text wrapping, not for general responsiveness of your elements. https://www.w3schools.com/cssref/pr_text_white-space.asp
You either want to add a fixed "width" property (f.e. in pixels), or a "min-width" property to your element.
I think the white-space: nowrap property is used to stop text from wrapping. In your case you might want to set a fixed width for that div so that it will not change based on the window size.
I have a contenteditable div that I want to fill 100% of its container.
The div has the following styles applied, among stylistic ones:
width: 100%;
max-width: 100%;
height: 480px;
overflow-x: auto;
overflow-y: scroll;
word-wrap: break-word;
overflow-wrap: break-word
The issue is that the text never wraps horizontally. The div continues to expand infinitely once the length of each line exceeds its original width, despite width and max-width being set.
Changing the properties to an explicit quantity, e.g. 960px, has the desired effect. The div remains at the defined size and horizontal text wraps inside it once the obvious end of the line is reached. I want the contenteditable div to consume 100% of its parent though. How do I have it fill the parent without it expanding horizontally infinitely on text entry?
Ilmiont
You could try with
text-overflow:ellipsis;
Use this property:
word-break:break-word;
In my rails app I have a container that holds from 1 to 4 divs that contain product images/text. There is 1 div if someone only selected 1 product in the previous page, 2 divs if someone selected 2 products, 3 div's if someone selected 3 products and so one. So the amount of product div's will varies and change depending on circumstance.
What I want:
the container and its div's to be centered.
if there is one div, I want that to be centered/margin:auto,
if there are two div's I want them to float/inline-block and margin centered,
I want all div's to be float and be centered but until all the div's fill the width of the container.
I tried to margin:auto the container, but I need a set width. If I have a set width then it wont grow depending on how many div's are in the container.
image1 http://www.image-maps.com/uploaded_files/3201312101150184_div1.png
image2 http://www.image-maps.com/uploaded_files/3201312101150184_div2.png
image3 http://www.image-maps.com/uploaded_files/3201312101150184_div3.png
width of div's inside container do not change.
My question has nothing to do with the width of the browser.
You can use text-align on the container if your insider div are inline-block:
.container {
text-align:center;
}
.container div.inside {
display:inline-block;
}
You can set display to inline-block for the divs and text-align to center for the container.
Just remember that text-align is inherited, so you'll need to re-set it to the desired value on the divs.
The only way I know of doing this is to use
display: inline-block;
on the divs, and it's container. Do not use
float: left;
and set
text-align: center;
on the container and it's parent.
margin: auto; can only center a div if it has an explicit width. A div that auto-grows does not have an explicit width and so margin: auto; won't work.
White space
Be careful when using inline-block as the browser will see whitespace in your markup and render it to the page, which can cause unwanted effects. Just make sure to trim out all the white-space between your divs.
I have a div which is filled with dynamic content. The div width is set to 680px, however if the content exceeds this width, rather than wrapping, it just keep going on a single line creating a very wide div.
What should I do to enforce the 680px of the div and force the dynamic content to wrap within those restraints?
thanks
You can try to add the following in your div's css class:
.someClass {
word-wrap: break-word;
width: 680px;
}
Hope it helps!
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.