I've got a <div> with an image on the left side and some text on the right side.
How can I achieve that the image always fills the vertical space?
This is how its supposed to look:
The parent's height will change in 3 steps using media queries.
This should make all images in your div reach from the top to the bottom.
<div id="content">
<img src="source.jpg">
Other div contents...
</div
#content img {
height: 100%;
}
Related
Actually, I'm having very big width image. Width is 3000px and height is 100px. I need to display image's center part in my browser.
If I put my image, It's showing left part of the image. But first I should display center part. If Display screen is big, then side can display.
and it's inline image only.
<div class="my_img">
<img src="img.png" >
</div>
What can I do?
Use margin:0 auto; display:block;. This will make it to the center.
contain scales the image to the largest size such that both its width and its height can fit inside the content area.
Try:
img{background-size:contain;}
Not the cleanest way I'm sure, but it works:
http://jsfiddle.net/7eA3W/
<div>
<img src="http://placehold.it/3000x100" alt="" />
</div>
div {
overflow: hidden;
width: 300px;
}
img {
margin-left: -1350px; // minus half of the image width, minus half of the container width
}
If you want to show the center of the image, what you have to do is using a div instead of an img.
In that div's style you set tthe background to be the image you want to show, and then, you center it with css background-position: 50% 0px
<div class="my_img">
<div
style="background-image:url(img.png);
height:YOUR_IMAGE_HEIGHT;
background-position: 50% 0px;">
</div>
</div>
with this, if the screen is small, the imagen wiil be cropped and show the center. If the screen is large, youll see the whole image, also centered
I am trying to achieve something like this..
http://line25.com/ see in the footer where he has "About Line25" then "Most popular posts" with block of text by side of each other?
I do this in my footer and on smaller screen resolutions it moves all over the place.
http://akaleez.co.uk/Templates/1/
Put the boxes in a wrapper div and center it like this:
.wrapper {
margin:0 auto;
display:table;
}
Display table will cause it to be exactly as wide as the 3 boxes. Next remove the margin of the first box.
Currently it has 180px margin, which obviously will not center propperly if the screen is smaller or wider then expected.
The reason it "moves all over the place" is that you specify width: 100% for your footer. When the width of the viewport is smaller than the width of the three text blocks, one of them will display below the other two.
Add another wrapper around your blocks of text like this:
<div id="foot">
<div id="footer-wrapper">
<div class="box1">...</div>
<div class="box2">...</div>
<div class="box3">...</div>
</div>
</div>
Then add the following to your CSS definition:
#footer-wrapper {
min-width: 990px;
margin-left: 180px;
}
Then remove the margin-left from .box1.
Note that this will force your whole page to be 1170px wide and display a scroll bar at the bottom of the window if there is not enough space to display it all.
If don't want that, try and add this to your CSS:
#foot {
overflow: hidden;
}
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 want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks.
Thanks in Advance :)
without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...
your CSS should look similar to this to make it work:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
I am able to accomplish it but by
keeping the height of the content
fixed but I don't want to make the
content's height fixed.
If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?
If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.
It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}
I am trying to create a full width background image that aligns vertically with a centered div. Should I create a wrapper around all the content, or is there another way to do this (without absolute positioning)? Thanks.
alt text http://img229.imageshack.us/img229/7391/99479284.png
EDIT: Sorry if I didn't explain this very well. I've changed the image.
Background images do not display outside of their containing elements. That doesn't mean that all or part of a background image cannot be positioned outside its element, just that the parts that are outside the element boundary won't be displayed when the page is rendered.
So in short, yes. You'll have to use a wrapper div.
Yes, you want to use a wrapper:
CSS:
#wrapper { width: 100%; background: url(yourimage.png) left center repeat-x; }
#content { width: 960px; margin: 0 auto; }
HTML:
<div id="wrapper">
<div id="content">
My content
</div>
</div>