I'm getting some strange CSS behavior when using display:table,table-row,table-cell
When a table-cell contains an empty div, it pushes down the content of the cell next to it.
<html>
<body>
<div style="height:200px">
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:100px;width:200px;overflow-y:scroll"></div>
</div>
<div style="display:table-cell">
<div style="height:100px;width:100px;overflow-y:scroll">Why am I getting pushed down?!?</div>
</div>
</div>
</div>
</div>
<div style="height:200px">
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:100px;width:200px;overflow-y:scroll">A</div>
</div>
<div style="display:table-cell">
<div style="height:100px;width:100px;overflow-y:scroll">Suddenly I'm not getting pushed down?!?</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I put some content in the DIV, behavior stops. Is this a bug? Affects Firefox and Chrome. If it's not a bug, how do I get around it?
To get around this problem, set vertical-align:top on the empty td.
FIDDLE
Different browsers can use different systems it is hard to say that if this is a bug or your browser
acting differently or could be a server not updating to check this inspect element and check if code matches
Related
I have a problem working with Bootstrap and Safari.
I want to place a fixed div relative to it´s parent and it works in all browsers except Safari.
The same problem is explained here:
https://github.com/lionheart/openradar-mirror/issues/147
Now i try to find a good workaround:
Original Code (does not work in Safari)
<div class="row">
<div class="col-md-8 col-md-push-4">
<div class="fixed-div">SOME FIXED CONTENT</div>
CONTENT A
</div>
<div class="col-md-4 col-md-pull-8">
CONTENT B
</div>
</div>
css:
.fixed-div{
position:fixed;
}
this does not work as expected in Safari. The "fixed-div" is not "pushed" like it`s parent. It should be displayed above "CONTENT A".
I found a solution but i think this is not a clean one:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="fixed-div">SOME FIXED CONTENT</div>
</div>
<div class="clearfix"></div>
<div class="col-md-8 col-md-push-4">
CONTENT A
</div>
<div class="col-md-4 col-md-pull-8">
CONTENT B
</div>
</div>
Do you have some better ideas how to fix this?
Try switching to the CSS property from fixed to absolute. If that does not fix your issue you could add custom check before within your HTML to see what browser a user is coming from and load that specific CSS page How to use different CSS for Different Browsers.
I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.
What I am trying to accomplish is having a fixed-width first div and a fluid second div which will fill up the rest width of the parent div's width.
<div class='clearfix'>
<div style='float:left; width:100px;'>some content</div>
<div style='float:left'>some more content</div>
</div>
and on this one everything seems alright and fluid.
<div style='display:table'>
<div style='display:table-cell; width:100px;'>some content</div>
<div style='display:table-cell'>some more content</div>
</div>
I want to go ahead with the second one but i feel like the second example will give me headaches in the future.
Could you offer some suggestions or insights?
display: table-cell is perfectly fine to use, with just one downside..
It doesn't work in IE7 (or IE6, but who cares?): http://caniuse.com/#search=css-table
If you don't need to support IE7, then feel free to use it.
IE7 still has some usage, but you should check your Analytics, and then make a decision.
To answer your specific use case, you can do it without display: table-cell, provided that you don't need the height to adjust based on content:
http://jsfiddle.net/g6yB4/
<div class='clearfix'>
<div style='float:left; width:100px; background:red'>some content</div>
<div style='overflow:hidden; background:#ccc'>some more content</div>
</div>
(why overflow: hidden? With: http://jsfiddle.net/g6yB4/3/ vs without: http://jsfiddle.net/g6yB4/4/)
You could do something like this. It puts your main content first. You can use a vertically repeating css background image on your main "content" container to create the illusion of a background running all the way down the left column.
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
</div>
To extend to a 3-column with fluid center:
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px; margin-right:100px;">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
<div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
Right content here
</div>
</div>
To get the first example working, you should also float the containing div, this will make sure that both of the elements within sit as you would expect within it. Not really sure what you mean by 'is a pain', though?
One down side of using table-row (very related to the OP) is that you can't use margin/padding on a row.
I Need the right Column elements to be flush with the javascript back button image. Not sure what the deal is, I have tried clear left, clear right, and clear both.
Live Example:
http://newsite.702wedding.com/las-vegas-marriage.asp
Any Help Would be Great.
Change the code which looks like this:
<div class="package-back-button1"></div>
<div class="clearfloat-left"></div>
<div class="win-this-package1"></div>
into this:
<div style="float: left">
<div class="package-back-button1"></div>
<div class="win-this-package1"></div>
</div>
So, remove the .clearfloat-left div, and enclose the two items inside a div with float: left.
A kinda yucky (but easy) fix is to do this:
On .package-right-box1, add margin-top: -89px.
Tested in Firefox, IE7/8.
Here is a solution on jsfiddle. Code is below.
<!--Left Column Boxes-->
<div style="width:50%; float:left">
<div style="background-color:#f00; width:100%">left1</div>
<div style="background-color:#0f0; width:100%;">left2</div>
<div style="background-color:#00f; width:100%;">left3</div>
</div>
<!--Right Column Boxes-->
<div style="float:right; width:50%">
<div style="background-color:#aaa; width:100%;">right1<br />
<div style="background-color:#ff0; width:100%;">right2</div>
</div>
<div style="background-color:#0ff; width:100%;">right3</div>
</div>
Also, be aware that your second div on the right was nested within the top-right div. I'm not sure that was intended, but am just pointing it out.
I have a question about my layout. I have a setup something like this:
<div id="container">
<div id="body">
<div id="item">
</div>
<div id="item">
</div>
</div>
</div>
And I want the body box to stretch with the amount of items I put in it but it doesn't. anyone know how to fix this with css.
If your items are floated, you could add a block with clear: both; parameter set, as Pat mentioned already.
If you don't want one more element in your code, you could apply overflow: hidden; to your body:
<div id="container">
<div id="body" style="overflow: hidden;">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Be carefull though, as everything that sticks outside the body box will be cut.
First off, you should use a class for your item div's as id's should be unique on the page. Second, this is probably being caused by your item div's being floated. If you add a clearing element below them, it should fix it:
<div id="container">
<div id="body">
<div class="item"></div>
<div class="item"></div>
<div style="clear: both"></div>
</div>
</div>
Have your item divs float left (display: inline might work too, haven't tried it), and set the display of your body div to display:inline-block;. That should shrink to fit its contents.
Quick and dirty:
<div id="container">
<div id="body" style="display:inline-block; overflow: auto;">
<div class="item" style="float: left;">
Hi
</div>
<div class="item" style="float: left">
There
</div>
</div>
</div>
Edit: Fixed, thanks to Matt Sach.
I would personally discourage the use of inline-block, Internet Explorer support for it is poor in older versions.
IE 6-8 (8 compatibility mode only) have issues with it.