I have the following example: http://jsfiddle.net/sSqxn/2/
The month divs are using inline-block in order to be side by side. They can each be varying widths. The browser will automatically scroll horizontally to accomodate their total width.
Right now, the blue div is only ever the width of the browser window. Is it possible to make the blue div the full width of all the month divs?
Remove width: 100% from your .months rule.
.months {
float: left;
white-space: nowrap;
}
Related
I've been playing with this one for hours, with no success.
I have a top menu with submenus (that contains a popup menu).
In one of my popup menus, i need the container to be maximum 170 pixels width and all of the items to wrap around that width. For some reason they don't wrap up.
I've reproduced the exact menu in a fiddle. Notice the submenu COUNTRY. It contains a popup with flags, but they don't wrap around
https://jsfiddle.net/h81y2t0L/
I've added attributes like a width, a min-width, a white-space with no success
.flagMenu {
max-width: 170px;
/* white-space: normal; */
}
.flagMenu li {
display: inline-block;
}
How do i wrap around the flags in the container?
To wrap the inline-blocks you need to define a container width - but since you don't want an exact width, use width: max-content; That way the width will be equal to the width of the content but the max-width will stop it from growing further.
.flagMenu {
max-width: 170px;
white-space: normal;
width: max-content;
}
Demo
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 will try to explain this better than in title.
I have a big div with width = $(window).width()
Now i will have an undetermined number of div with images as backgrounds.
I want it all are positioning from left to right into the big div. Due to big div will have differents sizes (screen resolution) but divs with images will have same size always (all 300x200)...i want for example, if only 4 divs with images fit in the first line, the fifth image div goes to the second line.
Where to start?
Simply define your width for the div elements inside your container, and float them left. For example:
div.container > div {
width: 300px;
height: 200px;
float: left;
}
Here's a jsFiddle demo (resize the results pane to see it in action).
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.
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;