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.
Related
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
I would like to build a sort of "stack" of divs (with class .inner) within a containing div (#container) where each inner is pushed as far down in the container as possible without overlapping another inner. I've included illustrations of what this would look like with one and three inners, respectively:
I know I could get the result on the left by setting...
#container { position: relative; }
.inner {
position: absolute;
bottom: 0;
}
...but this solution would not scale to the example on the right - instead it would cause all of the inners to overlap one another. Is there any good way to accomplish what I want through CSS alone for an arbitrary number of inners? I know I could do it with some hacky Javascript.
You could use an additional container for the inner containers and use the trick you suggested.
<style>
div{border:1px solid red}
#container{height:1000px;}
#inner-container{position:absolute;bottom:0px;}
.inner {height:200px;width:200px;margin:5px;;
</style>
<div id="container">
<div id="inner-container">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</div>
Depends on what browsers you need to support. But a much cleaner solution would be to try mimicking some table layout in CSS.
I've not had a chance to thoroughly test this with IE8+, but most modern browsers can handle CSS table layout properties which would allow you to do something like this relatively easily.
So...
CSS
.container { display: table-cell; vertical-align: bottom; height: 400px}
HTML
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
The only caveat is that if you have two of these "container" divs following each other in the code, than they will behave like table-cells (TDs) and sit next to each other.
If you want to stack them, then you can get around this by wrapping the containers in a div without the table-cell style, or sticking another element inbetween... e.g.
<div>
<div class"container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
<div>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
OR...
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
<div></div>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
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 have the following code:
<div "background-color:green">
<div "float:left">something</div>
<div "float:right:>something else</div>
<div>
Why does the background color not appear in this case? What needs to be done to make it appear
{Code simplified for understanding , may not be in the approporiate syntax}
You need to clear the div. You can use clear: both on an element beneath, but I often find this is easier:
<div style="background-color:green; overflow: hidden;">
<div style="float:left;">something</div>
<div style="float:right;">something else</div>
<div>
Notice the overflow: hidden.
Of course, it only works where you don't require elements to leave their containing elements.
A floated object is "lifted" from its containter. The bottom edge of the outer div doesn't stretch to its content anymore.
An option is to add an element with clear (clear takes a direction (either left, right, or both), and pushes itself below a float it would touch:
<div style="background-color: green">
<div style="float: left">something</div>
<div style="float: right">something else</div>
<br style="clear: both;" />
<div>
You need to write in the style attribute
<div style="background-color:green;">
<div style="float:left;">something</div>
<div style="float:right;">something else</div>
<div>