I have a divider with float left property housing some text, then divider float right housing an image. Total width of both dividers should be no bigger than 735 and I am reserving 200 for image. How can I adjust the width of the first divider to be 535 if image is present and 735 if image is hidden?
<div style="width:735px">
<div style="float:left; width=????????>
some text here
</div>
<div style="float:right">
<img src="../images/biteme.png" alt="" style="height:auto; width:auto; max-height:115px; max-width:200px; display:block" />
</div>
</div>
To do this in pure CSS would be easy, you'd need a different approach. Only float one div and then the other will automatically take up the remaining space
DEMO http://jsfiddle.net/kevinPHPkevin/gAUR5/
img {
width: auto;
height: auto;
max-width: 200px;
display: block;
}
Set the img css to display: none and see that the other div takes up all the remaining space.
I am not sure if this properly answers your question, but I think one solution may be to set the left div (division)'s width to "auto" instead of going for a fixed width. Also, you should consider floating both elements right so that the left div can respond to changes in the right div's size.
Otherwise, you will need to rely on javascript to affect the DOM elements (JQuery will make this easier).
If you can use JQuery, this will do this trick:
$(document).ready(function(){
var width;
if($('#outerdiv #rightdiv img').is(":visible")) {
width = 735;
} else {
width = 535;
}
$('#outerdiv #leftdiv').css('width', width);
});
If you can't use JQuery, I don't think what you want to do is possible.
Related
I have a simple DIV with a fixed height like and several images with individual heights inside (their height is equal or less the height of the outer DIV):
<div>
<img src="..">
<img src="..">
...
</div>
This markup is as-is and can not be changed. I need to display all images side by side and all images should be vertically aligned with the middle of the DIV (so the padding top and bottom is identical per-image).
How to do that without changing the markup? Various answers deal with a markup where the image is placed itself inside a DIV which is not the case here.
After re-reading your question, that the <div> is at least as high as the highest image, simply do this:
CSS
img {
vertical-align: middle;
}
Try it here: http://jsfiddle.net/AsD9q/
You can also prevent the div from breaking (when the viewport is to small) by setting an explicit width or using white-space: nowrap; on the container: http://jsfiddle.net/MvDZJ/ (using width) or http://jsfiddle.net/xMtBp/ (using white-space)
That's the outcome:
First answer, which works with every height of the div:
As you said nothing about container itself, I assume, that it's not wider than the viewport. Than you could simply do something like this:
HTML
<div>
<img src="http://lorempixel.com/200/100/">
<img src="http://lorempixel.com/200/80/">
<img src="http://lorempixel.com/200/120/">
<img src="http://lorempixel.com/200/60/">
</div>
CSS
div {
display: table-cell;
vertical-align: middle;
/* only added for demonstration */
height: 200px;
border: 1px solid red;
}
img {
vertical-align: middle;
}
This won't work in IE7 though, as it can't handle display: table-cell. You can try it here: http://jsfiddle.net/3vXXy/.
This can be done with jQuery, the problem is you have no explicit selectors to work with so it would affect every image in every div on the page.
First you need to set the images to the top of the div like this in the CSS:
div img{vertical-align:top;}
Then take each image in succession, get it's height and set it's top padding to half the difference between the height of the div and the height of the image.
$(document).ready(function(){
$("img").each(function(){
var margin= ($(this).parent().height() - $(this).height())/2;
$(this).css('margin-top',margin);
});
});
Again, not an ideal solution without good solid selectors, but it does work. http://jsfiddle.net/calder12/H4Wkw/
I'm trying to get an image centered on the screen, and I want it to stretch horizontally.
The trick here is that I need set margins. Lets use 200px as an example.
The image needs to stretch horizontally (and possibly scale proportionally) to maintain those margins no matter the windows size.
I can center it, and I can stretch it, but I can't do both at once for some reason.
Also, this needs to be CSS only! No JS.
Any help is greatly appreciated! :D
P.S. I've seen ton of questions about scaling images with the window size, and this is not the same thing. I need set margins, in pixels, that stay constant, while the image between them stretches horizontally.
I put a container around my image which would preserve the margins. As the window's width changes, the margin stays intact - only the width of the .container is changed. By setting the width of the image within the container to equal 100%, the entire image would be scaled (proportionally) based on the width of the container:
CSS:
.container {
margin: 0 200px;
background: red;
}
.container img {
width: 100%;
}
HTML:
<div class="container">
<img src="http://www.aviationnews.eu/blog/wp-content/uploads/2012/07/Olympic-Rings.png" />
</div>
You could use two divs, the outer with the set margins, the inner with width set to 100%:
http://jsfiddle.net/tqmrY/4/
<div id="holder">
<div></div>
</div>
#holder {
background: #333;
height: 100px;
margin: 0 100px;
}
#holder div {
width: 100%;
}
One way you could do this is by putting your image in a div and then putting padding on the div.
You would set your img to have a width of 100% and auto height, and then put padding on the containing div.
Here is an example
http://jsfiddle.net/uJnmf/
I got a little problem with the div width.
I show you an image of what I have
.
There is an outside div that has no specified width, it can be small or big.
On the right we got a image that floats on the right.
The text div contains a dynamic width that fills all the undefined width space. and inside a undefined width text.
What I want is that the overflow of the Text Div is hidden when the text width is more then the Text Div space.
The problem is how to specify a width to get the overflow on a dynamic width ?
If I don't specify any width, the image will go under the text if it's too long.
I hope I was clear enough.
Thank you for your help.
Edit:
Here is a bit of code to be more clear.
<div class="outside">
<img src="img.jpg" class="img"/>
<div class="text"><p>some text that is too long</p></div>
</div>
<style>
.img {
float: right;
}
.text {
float: left;
overflow: hidden;
}
</style>
The problem is that .text doesn't have any specific width, so the overflow doesn't work
DEMO HERE
so let me get this straight:
you want the text to be clipped when they overflow
however, you want to set limits using the div where it's contained (which is dynamic)
try this
<div class="container">
<img src="myimage.jpg" />
<div class="flexi"> some long content</div>
</div>
img{
float:right;
}
.container{
overflow:hidden;
zoom:1;
}
.flexi{
white-space: nowrap;
overflow:hidden;
zoom:1;
}
There are many solutions:
One example:
http://jsfiddle.net/SHYZR/
As per my understanding, you want that as and when your DIV is filled out by some text, its width should be increased respectively. try out this :
div
{
width:150px;
height:150px;
overflow:hidden;
}
Using this, your overflowed text which goes beyond 150px will not be displayed.
You can fix the width of Text div to occupy a percentage of outer div and leave the remaining space for the image depending on your image size.
Check here
edited to put the correct link.
I want to equal two divs height when a div height large
example :
<div style="float:left;padding:2px;background:red;">B</div>
<div style="float:left;padding:2px;background:green;">A<br />C<br />D</div>
<div style="clear:both;"></div>
the Div 2 height larger then div one
I may have a possible solution for you:
http://jsfiddle.net/adaz/wRcWj/1/
Well, it'll probably work on ie7+ so I'm not sure if that's good enough for you.
Brief description:
1) Set position relative to the container and self-clear it (I've used overflow: hidden but you can also use clearfix).
2) Float one of the divs inside so the container will expand depending on content inside.
3) Set position absolute to one of your divs, and give it top and bottom position 0px, this will make sure that it has 100% height.
Cons:
- Lack of IE6 support
- You need to chose which div will always have less content and then position in absolute
Hope it helps!
This is typically the behavior of a table, so you can do this with display: table-cell. I based an example on Adaz's : http://jsfiddle.net/L2uX4/
Wrap the two div's whose height you are trying to equalize in a container div, i.e.
<div id="container">
<div class="column">A<br/>B</div>
<div class="column">C</div>
</div>
Set an explicit height on the container and set height=100% on the columns:
div#container {
float: left;
height: 10em;
}
div.column {
height: 100%;
background-color: red;
}
Sorry to ask a really obvious question I'm sure it has a really simple answer, I just can't figure it out.
Very simply I want to place images inside of divs, where the images fill 100% of the height of the div.
CSS
.container{
height:100%;
float:left;}
img {
height:100%;}
HTML
<div class="container">
<img src="xyz.jpg" />
</div>
The result is as expected but with a large amount of whitespace to the right of the image (within the div) when viewed in any non-webkit browser.
In my layout I want to have many of these divs lined up (by float) in a row so its essential that the div's width shrinks to that of the image.
http://jsfiddle.net/osnoz/VzrnT/
By default, a div without specified height dimensions only expands enough to encompass its contents. Without a specified width, the div will expand to the width of its parent. So until you specify the width, the div's width will not shrink down to the image.
Your div is set to 100% height, which is in relation to its container height, not its contents.
You also do not need to specify 100% on the image itself. This will only make the image stretch to 100% of its container's height. Unless, you specify a container height, this is pointless.
I don't know if I understood the question right, but here it goes:
.container { display: inline-block; height: 100%; }
.container img { height: 100%; }
See the example at jsfiddle.net/erxLv/2