asked on

CSS layout is not working right in Chrome.

I have made some css and html for a page and they is behaving strangely in Chrome only. Here is a link to the css and html: Link to JSFiddle.
If you open the link and pull the result window all the way to the left so you get 2 columns you can examine the issue. It looks like this in chrome.

You can see that the blocks do not line up in even rows. However IF the text is so long that the overflow is hidden, then they line up just fine in Chrome:

The display is correct in IE 9/10 and FF. What is causing this in chrome and how can I compensate for it?

I do NOT want to add any JavaScript to readjust. I am looking for a simple CSS solve.

Thanks,

David

Montoya

Kinda doing this while I drive, so I cant look at your CSS, but do you have margin:0 ? This goes back to margin:0 needed in items like ULs in order to keep the li aligned in Chrome.... I'll try to take a look when I get to office.

rhawk

ASKER

Iammontoya, I added a margin:0 and it did nothing. Same issue. :(

rhawk

ASKER

Iammontoya, another odd note... If I set all the groups to have text that does not over flow OR all overflow, then it all lines up fine. Is seems to only be when they differ.

ASKER CERTIFIED SOLUTION

rhawk

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Montoya

try this:

{/*width (212)/height (120) compensating for padding*/
vertical-align:middle;

user_n

If you remove position: absolute in leftSide the fragments are aligned right but the text is not right

user_n

remove position css for div leftSide and rightSide
in css for the leftSide put float: left
in css for the rightSide put float:right

rhawk

ASKER

Solved the issue with minimal changes.