I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.
Related
I need to have 2 equal width divs side by side, the left column contains an image and the right column will contain dynamic text where the height of the text div can vary somewhere between 400px - 550px depending on how much text the site owner inputs.
I need the image to line up flush at the top and bottom with the end of the text box. The container element is fluid to be responsive.
Desired Effect
What I have at the moment is using floats to line the elements up together and responding fine, but the image falls short, like so:
I tried setting the image as a background-image on the left column with...
.column-image{
padding-bottom:100%;
margin-bottom:-100%;
background-size:contain;
}
But this still falls short a little unless i tweak the padding-bottom amount. This is then rendered useless when I re-size my browser as the aspect ratio changes.
I am trying to avoid using Javascript to solve this.
Use display:table for the container and display:table-cell for the inner divs. Also make sure to remove the float
Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/
Setting max-width and max-height to 100% for an image does what's intended and scales the image to fit it's container with aspect-ratio intact. However, I need to achieve the same thing but with an extra container kept tight around the image (to be able to position other stuff relative to the image).
I'm looking for non-JS solutions and mark-up semantics is not an issue since this is for an app. (tables would be ok). Also image dimensions can be considered known.
Another way to describe what I want: Make an image always fit inside the body and display a border around it (not using the trivial solution of putting a border on the image itself)
Here is a fiddle showing the problem. I gave the image an 0.5 opacity to make the yellow container show through. The objective is to have the container always the same size as the image. Ie. the image will always have a yellow tint but no other yellow areas should be visible. Note: I'm not trying to achieve any coloring effects it's just an illustration of the problem.
Try this one, http://jsfiddle.net/xmarcos/K4dHr/
Update: http://jsfiddle.net/xmarcos/K4dHr/4/
Here, this seems to work: http://jsfiddle.net/Wexcode/vzc4m/1/
You don't need to have a max-height around your <div> because it will stretch to the dimensions of its inner elements if you set it as display: inline-block. Forcing the <img> to have display: block will ensure that there isn't any extra space added around element inside container, unless you specify it (using margin).
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
You can see the example here: http://pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
proof of concept example is here
The Problem
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
A Potential Solution
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
Equal Height Columns with Cross-Browser CSS
I hope this helps.
The negative margin trick:
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden;
But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
Most of the times, the Previous parent has a heigt manually set, so you can use that value as reference, no other dirty tricks will be needed, and if the number is not the same for any reason maybe a comment can be added with the original number so in case you need to change it, by searching at the all the values, this one can be adjusted or even changed, in the time someone resolve this one for us.