I have a simple fixed width table. The first column has a fluid width and contains some simple text. The other columns are fixed width, and contain a padded div with some more simple text in them. All elements of the table are set to vertical-align: middle. Everything vertically aligns fine in IE7+, FF, Chrome, etc.
Then I've added some JS to toggle the display of the fixed width columns. Everything remains vertically aligned in FF, Chrome, even IE7, but for some reason IE8 goes screwy.
Here's an demo: http://www.pinksy.co.uk/table.html
To demonstrate:
Toggle column 4. Column 5 will then be vertically aligned as if it was still the old row height.
Toggle column 3. Column 4 and 5 will then be vertically aligned as if it was still the old row height.
Toggle column 2. Column 3, 4, and 5 will then be vertically aligned as if it was still the old row height.
So, it's something to do with IE8 not being able to recalculate the vertical alignment of the remaining right-most columns with respect to the new row height.
The crazy thing is, it's fine in IE7! Any ideas greatly appreciated!
My IE8 was running on Compatibility View mode. I could replicate your issue when I switched to normal mode. I added a nested table for the numbers and that fixed it...
<td class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra risus. Quisque sodales libero eget diam tincidunt interdum sollicitudin nunc porttitor. Donec bibendum ultrices purus sit amet viverra. Sed in libero quis tellus vehicula mattis sit amet vitae turpis.
</td>
<td>
<table>
<tr>
<td class="num1">
<div class="val">Num1</div>
</td>
<td class="num2">
<div class="val">Num2</div>
</td>
<td class="num3">
<div class="val">Num3</div>
</td>
<td class="num4">
<div class="val">Num4</div>
</td>
<td class="num5">
<div class="val">Num5</div>
</td>
</tr>
</table>
</td>
Related
Not sure what the problem is: http://watercookies.topfloorstudio.com/
If you scroll down to "Latest News", I'm trying to get the div with the class .newscontentright to be inline with the image on the left. I've wasted too much time trying to figure it out on my own. Any help?
You need to set the width of newscontentright
.newscontentright {
width: 300px;
}
And remove the following from between newscontentleft and newscontentright
<div style="clear:both;"></div>
As a side note, learn to lay out pages without using clear. Use clear only when absolutely necessary, otherwise things get messy. 'Overflow: auto' is often a better solution.
In this particular case the clear is completely unnecessary so just remove it.
maybe try your clear before your first float?
<div style="clear:both;"></div>
<div class="newscontentleft">
<img class="imageshadow" width="178" height="122" alt="news1" src="images/news1.jpg">
</div>
<div class="newscontentright">
<h3>Fall Blue Ridge Parkway “Bike for the French Broad”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, turpis ut hendrerit porttitor, lectus ipsumegestas sapien, ac tristique metus quam id est. </p>
<a> href="#">Read the full article »</a>
</div>
This renders the same in Chrome and FireFox so maybe this is intended behavior but it seems pretty screwy. Putting a image in the h2 tag at the top of a div with "display:table-cell" causes extra padding to the top of the other table-cell divs roughly the same size as the image.
Here's my test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chrome Test</title>
<style>
#col3 {
display:table;
border:1px solid black;
}
#col3 div {
width:33%;
display:table-cell;
border:1px solid blue;
}
</style>
</head>
<body>
<h2>Wrong?</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div>
<h2><img src="url" height="80" width="215" alt="heading 2" /></h2>
<p>Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
<h2>Right</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, </p>
</div>
<div>
<h2>Heading 2</h2>
<p><img src="url" height="80" width="215" alt="heading 2" />Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
</body>
</html>
Is this a bug? Can I avoid this behavior?
An h2 tag is a block element and may have some default padding assigned to it by the browser. Be sure to include a CSS Reset file (for example, this one), to remove that unwanted formatting.
Based on your given code i create the fiddle below -
Fiddle: http://jsfiddle.net/TtYn3/
Demo: http://jsfiddle.net/TtYn3/embedded/result/
As per required image in H2 tag and the padding issue solved in other columns.
Your divs are table cells and you don't set any vertical-align anywhere, so everything ends up baseline-aligned. The baseline of a cell is the bottom of the first line of text (more or less), so the bottoms of the first lines end up vertically aligned with each other. If the lines have very different heights (as in this case, because the image gives its line an 80px ascent), you get white gaps above the shorter lines.
If you don't want the cells to baseline-align, set their vertical-align to whatever value you want (sounds like top in your case).
Because you have display set to table-cell, your divs will behave just like they are in a table, and will stretch to the height of your tallest div (in each case, the div with the image inside an <h2>.
Second, you are using <div id="col3">. Id is only to be used in CSS for when you will call that CSS only once. You should assign col3 to a class instead of id, so that it can be used over and over on your page.
If you remove the display:table and table-cell attributes, your divs should shrink to their correct sizes.
Also, display:table-cell does not work in IE6 or IE7 (not that big of an issue these days, but still).
H tags and P tags always have default top and bottom padding / margins and it depends on the browser. I always set a class for them and set the margin to 0 and the padding to 0 unless I'm looking for some spacing, in which case I will set my own via css.
I have created an email newsletter for a client and the contents display correctly in my browser when testing the page and in Hotmail when opening the email. However, Gmail is consistently displaying the page incorrectly. I have a two-column layout, and the left column is just fine. The right column, however, does not contain the contents - they are instead placed off to the right outside the cell (as shown by using Chrome's developer tools). This happens no matter what the contents are. I've tried viewing it in Gmail through Firefox and still get the error. I'm stumped.
I read these two pages trying to get some help, but neither one addresses why the contents of a cell would display outside of it. It's the column with the Lorem Ipsum that is not displaying correctly. Here's what it should look like: http://www.murraysampson.net/michele/newsletter.html
And displayed incorrectly:
http://cl.ly/2e3D0z3A432g3r1x1a31
Here's my table:
<table width="900" height="541" border="0" cellpadding="0" cellspacing="0" style="border:solid thin">
<tr>
<td colspan="2"><div align="center"><img src="http://www.murraysampson.net/michele/header.jpg" alt="Header" width="875" height="114" /></div></td>
</tr>
<tr>
<td height="24" colspan="2" style="padding:0px; border-top:solid thin; border-bottom:solid thin"><p style="float:left; pading-top:10px; padding-bottom:0px; margin-top:10px; marging-bottom:0px"><span style="font-family: arial; color: #FF6600; margin-left:15px">An occasional snapshot of our activities</span></p><p style="float:right; pading-top:0px; padding-bottom:0px; margin-top:10px; marging-bottom:0px;font-family: arial; color: #666666;"><span style="margin-right:15px">January 2012</span></p></td>
</tr>
<tr>
<td width="574" height="600"><img src="http://www.murraysampson.net/michele/content.jpg" width="560" height="500" style="padding-top:0px; margin-left:15px" /></td>
<td width="326"><span style="font-family: arial; color: #FF6600; margin-right:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus metus, facilisis in tincidunt in, sodales id turpis. Quisque bibendum risus eget odio ultricies accumsan. Vivamus vitae venenatis nulla. Fusce sed nisl eu libero bibendum tincidunt quis sed sapien. In sed est vel ante venenatis scelerisque at at nulla. In hac habitasse platea dictumst. Mauris at tortor lorem, vehicula vestibulum erat. Aliquam ut odio nunc, in volutpat risus.</span>
<img src="http://www.murraysampson.net/michele/signature.jpg" alt="Signature" width="170" height="62" align="bottom" /><img src="http://www.murraysampson.net/michele/portrait.jpg" alt="Portrait" width="114" height="154" align="top" /></td>
</tr>
</table>
I had this problem even after adding the "display:block" thing, and here's how I solved it:
If the contents of cells are too big for the column width, they cause them to enlarge. Most of my text was on the large side, so I thought maybe the non-breaking spaces I had added to empty table cells was the issue. I added a "font-size:9px" attribute to the table, so that the non-breaking spaces would be smaller. This fixed the problem.
This question has been asked before.
Here is the answer from that question from mahalie:
The specific answer to your question is that Gmail adds extra space to
table cells which only contain an image. To fix this add
style="display:block" to these images.
Campaign Monitor is a great resources, as is Mailchimp.com. Both
provide several guides, template examples etc.
I'm trying style a 2-col div with an image the width of one column in the first column, using the CSS3 property column-count. For browsers that CAN handle CSS3, it should look like this:
img col
col col
col col
col col
However, for browsers that cannot read the CSS, instead of having the image stuck in the top left with the text starting on the next line, I want it floating, like this:
img texttextte
xttexttexttext
texttetexttext
Currently, I have this for the image in question, which lays out exactly what I want for browsers that CAN'T support CSS3:
display: inline;
float: left;
-webkit-column-span: in-column;
-moz-column-span: in-column;
But for browsers that can support it, it appears like this, with the image taking up a column all to itself:
img col col
col col
col col
col col
...which is not what I want at all. How do I get that image to float, with or without columns?
EDIT:
Here is the HTML:
<div id="content">
<h2>Title here</h2>
<img src="/static/images/img01.jpg" width="200" height="152" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam porttitor urna sit amet est pulvinar congue. Integer
lacinia dictum enim, non molestie turpis volutpat et. Praesent
pretium accumsan sapien, porttitor rhoncus augue porta ac.
Quisque fermentum enim quis magna condimentum a lobortis urna
accumsan. Integer viverra tristique turpis, sed fermentum
lorem hendrerit vitae.</p>
</div>
Here is the not-quite-working CSS so far:
#content {
width: 600px;
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 18px;
-webkit-column-gap: 18px;
}
#content img {
display: inline;
float: left;
-webkit-column-span: in-column;
-moz-column-span: in-column;
}
I feel like a floating, inline image shouldn't behave that way in a column.
You could try this...
<img src="/static/images/img01.jpg" width="200" height="152" style="float: left;"/>
...as an inline style (better still as a class in an external style sheet) or with the good old align attribute ...
<img align="left" src="/static/images/img01.jpg" width="200" height="152" />
...I hope this helps.
You can just put the image in the p tag. Your size for the columns and the image you have preset so you're good. I've done this no problem, the only thing you can't do is have the image span multiple columns.
I have an issue with float and have included the sample code below. I am trying to create a two column layout: I know how to do this a number of other ways so this question is with a view to finding out why FLOAT behaves the way it does here.
The container DIV has two DIVs, both are floated left.
As expected, the size of the browser window determines whether or not the second floated block level element will go alongside or under the first floated element.
The problem arises with the length of the content in the second floated DIV (assume the browser window is maximized, at whatever resolution).
In the code below, I have commented out part of the second paragraph. On my browser this is the cut off mark: including any content after this causes the whole DIV to clear the first DIV, even though there is a lot of space left in the second DIV before it should need to clear the first DIV.
I cannot see anything in the code that should cause this to happen. I am aware of how float behaves in terms of block level and inline content and the consequences of placing non-floated blocks beside floated ones, but I cannot find anything in the documentation to explain why the block should clear when there seems to be sufficient room for its content.
Help much appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Float Problem</title>
<style>
body {
background:#5c604e;
}
#container {
position:relative;
background:yellow;
}
p {
background-color:#cccccc;
width:50%;
}
.block {
width: 200px;
height: 200px;
}
.float {
float: left;
}
.pink {
background: #ee3e64;
}
.blue {
background: #44accf;
}
</style>
</head>
<body>
<div id="container">
<div class="block pink float">Lorem ipsum dolor sit amet consectetuer Nam fringilla Vestibulum massa nisl. Nulla adipiscing ut urna ipsum Curabitur urna lacinia pretium feugiat Ut.
</div>
<div class="blue float"> <h2>Test Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum erat a neque eleifend vitae ultrices nisi tempor. Praesent facilisis lobortis nisl, <!--sit amet gravida orci mollis vitae. Maecenas porta turpis id urna porta id ornare velit dapibus. <!-- Proin sollicitudin, tortor viverra posuere mattis, nisl est rhoncus urna, nec elementum augue turpis vitae diam. Pellentesque ut quam sit amet elit tempus suscipit nec vel nulla. Proin ullamcorper sollicitudin metus in posuere. Aliquam a vehicula odio. Morbi scelerisque arcu ac nibh cursus ullamcorper. Aliquam pulvinar commodo nunc nec laoreet. -->
</p>
</div>
</div><!--end of container div -->
</body>
</html>
See it at http://cssdesk.com/86cPH
In your example, you have two block-level element floated next to each-other. Because they're block-level, they establish a new containing context in which their contents will live and affect layout.
The standard behaviour when calculating box sizes for floated elements is to base it on the contents of the element. Because your second floated box doesn't have an explicit width, the browser determines that its width should be based on its contents, which in the case of the floated element is going to be as wide as its contents can feasibly be.
Thus, the second box flows underneath the first because the intrinsic width of the paragraph affects the blue box, which is larger than the allotted explicit constraints of its container (i.e., the width of #container minus the width of the first floated element).
If you wanted the text to flow around the floated element, you should omit the "blue" box. Only when the float and the contents are nested in the same container (and the content isn't a block-level element) will the content then flow around the pink box as one might expect.
As far as getting a working two-column layout with equal-height columns, I'd recommend trying display: table if you don't need to support IE7.
What you want to achieve? you haven't fixed the width of second block and so its width is going mad with the content length.
Give it a fixed width.
If you want that rest width is covered by it then try this.
.block1 {
width:20%;
}
.block2 {
width:80%;
}
and in html
<div class="block1 pink float"> ..content.. </div><
div class="block2 blue float"> ..whatever content.. </div>
remember there should be no space between closing div of left block and opening div of right block else whitespace between them will cause them to stacked over one another