Unluckily I don't know what to do :(
I want to align the text "bla bla...." at the bottom of the left div.
Setting it as position:absolute & bottom=0 doesnt work always because there are cases where image does not exist, and that would be a problem as if the text wont increase container div height...
I could change the layout if there is no img with php but that doesnt guarantee that in case img has less height than text, text overflow etc...
I know this is strange, the table is the only solution I have?
A table is rarely (if at all) a good solution for layout.
You could do a min-height so if the img does not exist, you will always have a height that will be adhered to.
You can use display:table-cell.
http://jsfiddle.net/JeaffreyGilbert/32NWh/
<style type="text/css">
div#leftContent { float : left; position : relative;}
div#rightContent { float : right; position : relative;}
.bottom { position : absolute; bottom : 0; }
</style>
This is a rough Stylesheet emulating your skeleton; combined with something like...
<div id="leftContent">
<p class="bottom">Your text, as a 'p' element--but it could be any element.</p>
</div>
<div id="rightContent">
<img src="" />
</div>
Your <p> element (or any element for that matter) would be positioned at the bottom of the left div, wherein you could change the padding/positioning to whatever you'd like; this still allows you to style the image in the adjacent div anyway you'd like.
Related
I have a problem using the vertical-align:top; property on a cell-tab css content.
Here the picture : http://img4.hostingpics.net/pics/157625Capture.png
My HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style_test.css" />
<title>Test</title>
</head>
<body>
<div class='tableau'>
AAAA<img class='img1' src='images/drapeau_anglais.gif' />
<img class='img2' src='images/drapeau_anglais.gif' />
<span>BBBB</span>
<!-- This text lose the vertical-align:top; propertie because it is in the <span> => WHY ??? -->
<p>CCCC<img src='images/drapeau_anglais.gif' />DDDD</p>
<!-- As in the span, everything in my <p> loose it s vertical align propertie -->
</div>
</body>
</html>
My CSS code :
.tableau
{
display:table-cell;
border:1px solid black;
vertical-align:top;
}
.tableau p
{
display:inline-block;
}
.img1
{
/* I dont say anything here. img1 SHOULD be on top because of the ".tableau" class but it doesnt... why???*/
}
.img2
{
/* I force the vertical align on my image (but I shouldnt have to do that normally ?) But with this "trick" it works */
vertical-align:top;
}
Thanks a lot for your help !
I commend you for wanting to understand. The problem with vertical-align is that it doesn't take much HTML and CSS for there to be quite a lot going on. What we can do it to build the layout up piece by piece.
AAAA
This text is placed in a anonymous inline box. This goes in a line box, preceded by a zero-width inline box that's the height of the container element's font, called the strut. The strut and the AAAA text are vertically aligned with each other with respect to each others baseline. So already, we have
<img class='img1' src='...' />
The vertical-align of the .img1 element is the default which is baseline, and images are replaced inline elements, so the baseline of the image is its bottom margin edge. .img1 has no margins, border or padding, so that makes it the bottom edge of the image itself, so now, if we assume that the image is taller than the font, we have
Note that the line box is now taller than previously to accommodate the image. In fact the line box is taller than any of its component parts.
<img class='img2' src='...' /> part one
We'll skip the second image for the moment and come back to it later. We'll just leave a placeholder for now.
<span>BBBB</span>
Exactly as AAAA, except that here the inline box is formed from a real element rather than being anonymous. This gives us
CCCC<img src='...' />DDDD
This is exactly like AAAA<img src='...' />BBBB`. Nothing new to add here.
<p>CC...DD</p>
The p element is set to inline-block, which means that its line-height contribution to the line it is in is its margin box. It has default margins from the user agent stylesheet of (typically) 1em top and bottom. It too is aligned to the other elements on the line using its baseline. So now we have
Again the line box grows in height, this time to accommodate the p element's margin box.
<img class='img2' src='...' /> part two
Now we can fill in the placeholder we left earlier for .img2. This image is vertical align:top, so it doesn't align with the other elements, but with the top of the line box. So that gives us
.tableau { display:table-cell; vertical-align:top; }
Then the whole thing is wrapped up as one and positioned at the top of the table-cell.
Wrap up
Finally, we need to account for why "AAAA" appears at the top in your picture and not aligned to the other text as depicted in my answer above. This seems to be because you captured the picture from Chrome, and was therefore subjected to Chrome's screwy vertical-align implementation. Firefox and IE display the layout correctly.
With your vertial-align: top You mean about effect like here: http://jsfiddle.net/bdoq99a2/1/
I've simply changed this:
.tableau *{
display: inline;
}
Image: http://take.ms/BxlzD
The problem comes from the browser stylesheet, in this case the default margin for paragraphs. No need to fuss around with display: table-cell and vertical-align: top. Just check the fiddle: http://jsfiddle.net/bdoq99a2/2/
.tableau {
border:1px solid black;
}
.tableau p {
display: inline-block;
margin: 0;
}
<div class='tableau'>
AAAA<img class='img1' src='http://lorempixel.com/400/200/' />
<img class='img3' src='http://lorempixel.com/300/200/' />
<span>BBBB</span>
<p>CCCC<img src='http://lorempixel.com/300/200/' />DDDD</p>
</div>
I would like a way to prevent columns of flowing text from becoming too narrow. For example, in a column of HTML text, there is an image floated to the left. Text flows down the right-hand side of the column around the image, as expected:
However, if the image is almost as wide as the column, then the text ends up being very narrow:
In this case I want the text to simply not flow past the image, but to drop below it as if the image were a block:
I am trying to find a simple and general way of doing this. It's for a blog - I want to be able to add the image and text, maybe add a class or paste in a bit of markup (sigh), and have the flow work. I would prefer to do it with CSS and HTML only because it's hard to insert JavaScript to the blog posts. I have a couple of methods (see my answers) but neither is satisfactory. Can you do better?
When you set display: inline-block; to an element, the element will be flowed with surrounding content.
So you would need to add a line-break <br> to produce a line break in text, but the vertical space of the line will remains as you mentioned. [and one more thing happens is the horizontal scroll-bar which will appear if you decrease the width of the panel.]
Introduction
Using <table></table> element has a lot of benefits here.
When you use <table> element (as the following), it causes the content goes to the next line. And when the remain horizontal space gets lower than width of the <table>, it'll go to the next line and push the content down.
And also, horizontally scroll-bar won't appear in this case, because browsers won't display the <table> when it hasn't any element inside or any specific height or border properties.
(different browsers have different behavior, Mozilla Firefox doesn't display table element with a specific border property but Google Chrome does.)
HTML:
<img src="http://placehold.it/100x50" alt="">
<table></table>
Lorem ipsum dolor sit amet...
CSS:
img { float: left; }
table { width: 12em; }
Here is the JSBin Demo.
The Solution
As a pure CSS way, I used ::before pseudo-element to create a element which behaves like the <table> HTML element.
HTML:
<div>
<img src="http://placehold.it/400x400" alt="">
<p class="content">
<!-- Here is the content... -->
</p>
</div>
CSS:
img { float: left; }
.content:before {
content: ' ';
display: table;
width: 10em; /* <-- Change the current width size */
}
Here is the JSBin demo.
A better solution is to give every paragraph an invisible CSS pseudo-element with the desired minimum paragraph width. If there isn't enough space to fit this pseudo-element, then it will be pushed down underneath the image, taking the paragraph with it.
If the img is flot: right, add clear: left to the p:before.
And if the img is float: left, add clear: right to the p:before
p:before {
content: "";
width: 10em;
display: block;
overflow: hidden;
clear: left; //use clear:right if img is float:left
}
I tried adding an extra element before the text. I think this would probably just about work. Something like this:
<style>
.shim { display: inline-block; height: 0; width: 12em; }
</style>
<img class="floated">
<div class="shim"></div><br>
If one examines Derridaist reading...
This is OK - if the flow column is narrow then the shim drops below the image and the text follows it. I have to add the <br> to stop the text being indented by 12 ems, which adds a line of vertical space. I guess I could reduce the line-height on the <br>but the whole thing might end up being a bit verbose.
The simplest method I found is to set the minimum width of the column by preventing the first few words from wrapping:
<style>
.chunk { white-space: nowrap; }
</style>
<p><span class="chunk">If one examines</span> Derridaist reading...
This works well, but:
I have to manually edit the text each time I do this
I can't precisely control the column width (in ems or pixels)
I have a div that has two divs that float left/right respectively. The right div contains a lot of text, and the left div has 3 images.
I am trying to make it so that the three images are distributed with one at the top, middle, and bottom of text, so that if more text were added then the images would move to 'correctly fill the space'
I have a 'ul' inside the left and if I set the height:200px; property it displays correctly, but I can't get it to match the height of the other div dynamically! I've tried using % and tried the +1000 -1000 padding/margin hack but that doesn't seem to do have the desired effect, so I must be barking up the wrong tree. (I have searched all morning on this and I can make the div work but not the ul height to match the div!).
JSFiddle: jsfiddle.net/b98Rx/3/
HTML:
<div id="articleBody">
<div id="articleMainText">
<p>This is some text that should overflow to the some space below here</p>
</div>
<div id="articleMainImages">
<ul id="articleMainImagesUL">
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>
</div>
CSS: (In fiddle)
Example as an image:
Sorry for the MSPaint but I hope it shows what I'm trying to do!
I am open to other suggestions and I don't have to use a ul/li. Ideally to be compatible with as much as possible! I might make this into a 2 column table and make three seperate divs for each image to align top, middle, and bottom! Would this work?
EDIT:
Solved it myself, see this fiddle for how I did it! http://jsfiddle.net/B63Yy/
What might work is having nested divs, and having the images as backgrounds, attached to top, middle and bottom - though they would not print to paper. Of if you are targetting browsers that support multiple background css then use that.
This would not work if the text was too short as the images would start to overlap - unless you enforce a min-height.
Otherwise I think you are looking at javascript to do this.
Anyone know better?
Update: this kinda works ... needs polishing though.
<div id="articleBody">
<div id="articleMainText">
<div id="a"><div id="b"><div id="c">
<p>This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here</p>
</div></div></div>
</div>
</div>
#articleBody { /* Body of article */
display:block;
width:200px;
overflow:auto;
background-color:#ecd;
}
#articleMainText { /* Main text DIV */
width:10em;
margin-right:32px;
padding-left:32px;
margin-top:0px;
padding-top:0px;
}
#a, #b, #c {
background-image: url("http://phrogz.net/tmp/gkhead.jpg");
background-repeat: no-repeat;
background-size:20px 20px;
}
#a{background-position: left top}
#b{background-position: left center}
#c{background-position: left bottom}
I've edited your fiddle to work:
http://jsfiddle.net/b98Rx/7/
what I changed was:
#articleMainImages img {
bottom:0;position:absolute;
}
#articleMainImagesUL li {
height:33%;
position:relative
}
and deleted the table-cell props where you had them.
How can I make image caption width same as image? Now I have the following code:
<div class="image">
<img src="foo.jpg" alt="" />
<div>This is the caption.</div>
</div>
I've tried a lot of things (floating, absolute positioning etc), but if the caption is long, it always makes the div wide instead of going on many lines. The problem is that I don't know the width of image (or the length of caption). Is the only way to solve this use tables?
So the problem is that you don't know how wide the img will be, and the caption for the img may exceed the width of the img, in which case you want to restrict the width of the caption to the width of the img.
In my case, I applied display:table on the parent element, and applied display:table-caption and caption-side:bottom on the caption element like this:
<div class="image" style="display:table;">
<img src="foo.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>
You can apply display:table; and an arbitrary initial width, eg. width:7px; to the parent block like figure and everything will work as expected!
Here is a live demo:
http://jsfiddle.net/blaker/8snwd/
This solution's limitation is that IE 7 and earlier do not support display:table; and IE 8 requires your doctype to be !DOCTYPE.
Sources:
http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
W3Schools (can't post link due to stackoverflow's 2-link limit for people with less than 10 rep)
If the problem is the caption being too long, you can always use
div.image {
width: 200px; /* the width you want */
max-width: 200px; /* same as above */
}
div.image div {
width: 100%;
}
And the caption will stay static. Also, the tag name is img, not image.
Or, if you want to detect your image width, you can use jQuery:
$(document).ready(function() {
var imgWidth = $('.image img').width();
$('.image div').css({width: imgWidth});
});
That way, you're getting the image width, then you set the caption width to it.
The only way to do captioning properly is to enclose the image and caption in a table constructed from span elements with table, table-row and table-cell css attributes.
Any other method (including HTML5 figure tags) either gives width mismatches or causes unwanted line breaks.
If your method must work in a non-css3 browser, then a table is probably the best bet.
You could try to set the image div wrapper display:inline-block
http://jsfiddle.net/steweb/98Xvr/
If the caption is long, the only solution will be to set a fixed width, or set the .image div width by js. I'm trying to think about a pure css solution, but I think it's an hard challenge :)
The key is to treat the image as having a certain width some length. In the example below I checked and my image was 200px wide. And then treat the caption as an inline-block.
HTML:
<div style="width:200px;">
<img src="anImage.png" alt="Image description"/>
<div class="caption">This can be as long as you want.</div>
</div>
CSS:
.caption {
display: inline-block;
}
You can also replace the inline-block with text that is left justified, right, or stretched over the exact image width by replacing above css with one of the following:
.caption {
/* text-align: left; */
/* text-align: right; */
text-align: justify;
}
I'm extremely confused why my code won't display the image properly. Here's my code:
<style type = "text/css">
#pic {
background:url('http://www.tishbi.eu/img/shopping_cart.png') no-repeat;
</style>
<div id = "pic"> <p>
</p> </div>
Only a tiny portion of the image is displayed along with the text... I'm so confused why this is happening. The only way I can display the whole image is if I add almost 170px of padding around the image. Someone please help!
Thanks.
You need a closing brace before </style>
#pic has a width and height of zero, so the background wont show. Either put content in the div, or set a width and height.
Check it out working, here: http://jsfiddle.net/UzcDM/1/
You need to specify a width and height for your div.
Also, make sure you close your CSS:
#pic {
background:url('http://www.tishbi.eu/img/shopping_cart.png') no-repeat;
width: 200px;
height: 300px;
}
Put Height and width in your css class.
Please view demo here
taking that path set right e.g. ../../Images/logo/google.png,
try adding position:absolute;
it might be simply behind some elements