OK so today my brain is broken I can't figure this basic problem out. I want to have a LINK that goes underneath an image. The images may have different widths, let's say some are 100px wide and some are 200px wide:
<div>
<img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
WORDS
</div>
If I set the link's display to inline-block, it only takes up the space it needs to say "words". If I set it to block, the div stretched to accomodate it and it takes up 100% of the available space and is 5x too wide, much wider than the image.
I want the link to take up the whole width of the div, and I want the div to be as wide as the image (plus padding).
If I set the div's width in pixels, it doesn't look right if the image is a different width. What am I missing here?
Set the link style display:block; and maybe give your image a width="100%"
The parent div will automatically be set to display: block which will span the entire length of the page. If you set the parent div to display: inline-block the div will only be as wide as the image. Then you set the link with a width: 100% and this should give you the results you are looking for.
here is a Fiddle for you to see what i mean.
I have updated the fiddle to include 2 different size images. the key is you have to wrap each image and link in a new parent div.
Hope this helps!
*EDIT: If you would like to add a space between the image and the link with padding only give your image the top/bottom padding like so padding: 1em 0; and then add the side padding to the parent div like so padding: 0 1em.
Here is another Fiddle with that implimented.
Is this what you want? Let me know if I can improve this answer :)
<div>
<img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
WORDS
</div>
I suppose u ask something like this...
<div style="width:100%; max-width:400px;">
<img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="auto;text-align:center;display:block; max-width:400px; width:100%; padding:1em;border: 5px solid #EFEFEF;">
WORDS
</div>
well as u see i've played with the width in all the elements to achieve it, and cheated on the "a" tags' border-padding.
without setting a width on your image and your main div, you cant achieve what u asked unless u use javascript...
Related
I've got the following HTML and CSS
http://jsfiddle.net/x7zr999s/
If the browser is small enough, it gives the desired result:
But if it's big enough, there are two or more items per line:
Is there any way to prevent this without disabling float: left or enabling anything that breaks it? I want the posts to "wrap" around the original post like in the images.
This problem appears because you have a fix width on your div. In your fiddle you have given the div, a width of 100, so when the screen widther, and because your div are all floated left they fill in the extra space and that is what happen to your case.
// this code is from the fiddle you create
<div class="reply" width=100 height=100>reply 1</div>
There are some way to solve this. and the easy way is to wrap your div and put exact width you desire. so when the screen widther your floated div will remain to there same position.
This is a demo.
In the demo i put extra div before the end tag of div wrapper and have a class name blocker that help not to break your layout. if you can see in your style are class blocker style is clear:both this article explain about Clearing floats
hope this help...
You can insert you code into a wrapper and give it a maximum width:
#wrap {
width: 100%;
max-width: 1400px;
}
.op, .reply {
float: left
}
.reply {
min-width: 51%;
}
<div id="wrap">
<div class="op"></div>
<div class="reply"></div>
<div class="reply"></div>
<!-- ... more to go ... -->
</div>
Set CSS attribute max-width to the parent div. It sets the maximum width that the parent can extend to. The default width is 100% of the window size. However max-width property restricts further extension of width after the specified maximum value.
Float left wraps child elements if the required parent's width is available. In your case you can restrict it by not allowing the parent's width to extend after a certain point so that the child divs wraps in the given space i.e. in 1 column (required).
So I have a couple container holding that have an image and I'm trying to add padding to the container only if the images is less than the width of the container.
I know this will be a simple javascript solution but is there a way to do this with css?
Example html:
<div class="image-container">
<img scr="my/path/to/image"/>
</div>
<div class="image-container">
<img scr="my/path/to/image2"/>
</div>
css: I dunno :)
Take a look at this image to get a better idea of what I'm trying to do: http://grab.by/r1sS
It is not possible to add padding based on the image size using CSS.
Although, From the link you provided it looks like you are trying to center the image. You can achieve this by setting text-align to center on the container which will center the child elements ie. the image.
.image-container {
text-align: center;
}
In regards to the original query, it is not possible to add padding based on the image size using CSS.
I'm not aware of any way to apply the exact conditional you're asking for in pure CSS since CSS has no conditionals.
But, based on your screen shot it seems like you don't need padding. Why not just center the image over a colored background. Won't that accomplish the same thing?
When the image is full width, it will cover the entire background and fill the container. When it's not full width, it will be centered in the container.
To center the image in the container and apply a background color:
.image-container {
text-align: center;
background-color: #777;
}
I'm working with an HTML site which has a design that is fixed on a certain width, centered with auto as left and right margins. I'm working on an interactive script that sometimes creates a large table as output that will not fit into this width, it might be wider.
To illustrate:
<html>
<body>
<div style="margin: 10px auto; width: 300px; border: 1px blue solid;">
<div style="margin: 10px auto; width: 400px; border: 1px red solid;">
</div>
</div>
</body>
</html>
(http://jsfiddle.net/ALPXn/)
My question is, how can I align the inner, red div in the center, no matter if it sticks out to both sides of the blue div, without giving it an explicit negative left margin, because I don't know the final width?
I think you can do this using jquery. You can change the css dynamically, after page has been loaded you can change css.
Code will look similar to this.
var x = $('outerDiv').width();
var y = $('innerDiv').width();
$('innerDiv').css('left',-(y-x)/2);
For that, you have to give divison id's as outerDiv and innerDiv.
The problem here is that you'd have to make the child element ignore the parent's width and position for this to work. It is possible with some javascript manipulation though. By changing the css position to absolute, and centering it relative to the screen, it will effectively ignore the parent, while still technically being contained by it.
Updated link using offsetWidth: http://jsfiddle.net/g6dGE/1/
I have an img element with style='width:40%;height:40%;'. I would like to add a div that automatically wraps it. However when I insert the div instead of wrapping the img it just expands to the div inside.
How can I force this div to wrap img so it can be used as a frame. The reason why I do not preset the div's height and width is because img's percentages will be given dynamically, so div should wrap the img according to img's sizes.
If you do it like this
<div id="wrapper">
<img src="...">
</div>
you could add the display: inline-block; attribute to the wrapper. That did it for me. Yet still, your style='width:40%;height:40%;' will make its height being adjusted by its parent as #jesse-van-assen already mentioned.
The problem with a width and height of 40% with an image tag, is that the image isn't downscaled to 40% of it's original size, but takes up 40% of it's parent, as you can see here.
In your case, you want to wrap the image in a div, but still want to size it to 40% of it's parent. In this case, the parent IS the wrapping div. You see the problem.
If you just want to use the div as a frame, you can use css to style the image to gain a similar effect, like this:
<img src="..." style="border: 1px solid #000000; padding:10px;"/>
Example of this principle here.
make all your images float to left.
img
{
float:left;
}
and clear each div with
<div style="clear:both"></div>
as the very last element in the wrap div before it closes.
hope it helps.
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.