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).
Related
I have two divs horizontally aligned that will wrap (their size gets smaller until the wrapping occurs at some point) when resizing the browser window. The problem is that these two divs won't automatically fill the gap they leave behind
Both have width 48 %, min-width 400px and are floated to left in a div container
Example
DIVCONTAINER
DIV1 ==> There's huge space on the right side because div1 won't auto-stretch after wrapping
DIV2 ==> There's huge space on the right side because div2 won't auto-stretch after wrapping
Is div auto-stretch even possible when wrapping takes place with resizing?
EDIT:
Here's a demonstration of the problem
JSFiddle
<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
.div1, .div2 {float: left; width: 50%; min-width: 400px; height: 100px;}
.div1 {background:red;}
.div2 {background:blue;}
Floated divs will not be able to dynamically occupy the remaining width of a container - they are no longer part of the normal layout of the document.
You can achieve what you're looking for by removing your floats, and then using
table display properties, or
flexbox (if you don't need to worry about <= IE9)
CSS-Tricks' Filling space in the last row will guide you in the correct direction for the flexbox solution.
May be it's because of min-width:400px
If you resize the browser below 800px, that width 48% will not work because of min-width:400px
If you want to wrap both divs into wrapper then wrapper should have 800px or higher than 800px width.
Play with fiddle you will come to know what is happening...increase wrapper width to 800px...
Is there a way to display a set of images horizontally in the center of a div even when the image is wider than the div? For instance, if the outer div is 100px wide and the image is 200px wide then I want the image center (i.e. at 100px) to be aligned with the center of the containing div (i.e. at 50px).
At the moment it works fine when all the images are smaller than the div, but when they are wider, they become left aligned. If they are all the same width, then I can set the scroll position of the div, BUT they are dynamic images and can be any width. Look at the fiddle for an example.
The intention here is to produce something like a document viewer where each image is a page in the document and would therefore be aligned in the middle.
Thanks for any help!
Nest the images inside another div and set its display to inline-block
HTML
<div id="outerdiv">
<div id="innerdiv">
<img src="http://ipsumimage.appspot.com/60x20,ff0000" />
<img src="http://ipsumimage.appspot.com/200x20,ff0000" />
<img src="http://ipsumimage.appspot.com/100x20,ff0000" />
</div>
</div>
CSS
#outerdiv
{
overflow:auto;
width:100px;
background-color:gray;
text-align:center;
}
#innerdiv {
display:inline-block;
}
See this fiddle.
Well Im just starting out with jquery but I can give you a theoretical answer. Use jquery to take width of parent div. take width of image. find the difference in both and move negatively to the amount in the image.
Example: div width is 50
image width is 100
put position relative on the parent div
put position absolute on image
and put 50-100=50/2(actually 25 as the width is distributed to both sides. 25 to the left and 25 5 to the right.) as the left of the image
div parent{
position:relative;
}
div img{
position:absolute;
left:-25; //actually this is the difference of the image and div/2
}
Use jquery to do this dynamically
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.
I have a fluid width layout. Left and right column have a fixed width and my center column changes its width in between max and min width specified as the browser width changes or screen resolution changes. It looks like image below:
As you can see, there are some small containers in middle column, they hold up several products etc.
The problem that I am experiencing is that when the width changes and middle column cannot accommodate 3 containers, 1 will fall below, as they are floated and then it looks like something below:
Now this space that comes in the right of containers looks ugly. What I want to do is to keep them centered if one falls below when width decreases then two should appear in the center of the middle column and when another one falls then 1 container left should also appear in the middle like below:
Can I do this with css only? or I need to introduce some scripting language for doing it dynamically?
This is the css for container, that I am using
.prod-container{
float: left;
width: 180px;
height: 290px;
margin: 2px 6px;
border: 1px solid black;
}
Example on http://www.myappontest.heliohost.org/index1.html
Replacing float: left; with display: inline-block; in .prod-container's style and adding text-align: center; to #center-content-container's style will achieve the desired behavior.
Working version of your page: little link. Here's the modified CSS file, too: another little link.
Hope that helped you in any manner!
I would put the center floating blocks inside a div with a max-width 100% (in the scope of the center column). Center that block with "margin-left: auto margin-right: auto". This will keep the floating blocks moving to the next line if there's not enough room, and the centering div will size with it's contents, allowing it to center within the center column.
I have an image element, I need it to fit inside a specific div (let's call it div 1). The image has a wrapper div that needs to fit to the image (let's call it div 2).
It almost works using the following methods:
setting the image and div 2 to float: left;
or
setting image to display: block, and div 2 to display: inline-block.
Both work great when the page is first loaded, but div 1 is actually a fluid width/height div that resizes with the browser, and when you reduce the height of the browser the width of div 2 doesn't adjust (illustrated by the green border)
Here are sample pages:
http://sabrinagelbart.com/fit-img-and-outer-div-to-container.html
(left:-50%, left:50% are for centering, don't make a difference with the bug)
http://sabrinagelbart.com/fit-img-and-outer-div-to-container-inline-block.html
Try background-size: cover; and top: 0;, bottom: 0;
or try position: fixed;