I have a number of "rows" which I want to have grouped together and centered in their container, somethign like this:
However, the number of rows is variable, and if there are enough rows to overflow a set height, I want it to scroll.
The best way I have found to get it to center the rows properly is to use the following css on the container:
.container {
display: table-cell;
vertical-align: middle;
}
However, since the container doesn't have display:block, setting overflow:auto doesn't work. Putting a scrolling div inside the table cell doesn't work either, because the scrolling div needs to have a set height, and that destroys the vertical centering.
After much experimentation, I have finally arrived at the following solution:
html:
<div class="scroll">
<div class="table">
<div class="container">
<div class="row" ></div>
<div class="row" ></div>
...
</div>
</div>
</div>
css:
.scroll {
overflow-y: auto;
height: 80px;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
See http://jsfiddle.net/ZCdPG/ for a full implementation.
Although it works, it is unfortunate that it requires three levels of nesting for a single container. Web components would somewhat alleviate this, but the real problem is that there is no real support for vertical centering in CSS, and a common use case can only be achieved with hacks.
Related
I'm trying to vertically align using the table/table-cell method.
JSFiddle
<div class="row">
<div class="small-6 columns valign">vertically align me</div>
<div class="small-6 columns"><p>content</p>.....</div>
</div>
.row{
display: table;
}
.valign{
display: table-cell;
vertical-align: middle;
background: grey;
height: 100%;
}
But it's not working, where am I going wrong? I suspect it is something to do with the height of the valign column. How can I get this to stretch to the height of it's parent?
I should also mention in my actual code I have the code nested quite deep in the page, so it's inside article and section tag and another div too.
On some browsers CSS property float does not work with display: table-cell so you should set float: none to table-cell elements in order to make them act like table cells
https://jsfiddle.net/zac926wL/5/
Ok, I've got a problem out there. To be short, here's a fiddle. I'll repeat myself here:
HTML:
<div class="container">
<div class="selected">
<span>Why don't you cover all the width!?</span>
</div>
<div>
<span>Little content</span>
</div>
</div>
CSS:
.container {
width: 100px;
white-space: nowrap;
background-color: #0f0;
overflow-x: auto;
height: 200px;
}
.selected {
background-color: #f00;
white-space: nowrap;
}
The first question is: why does not the inner div's background cover the entire span?
The second one: I'd like to have a fix, of course.
And one more thing: the html elements are generated by a third-party tool, to which I have no access, which makes "wrapping it all in another div" thing impossible. Only CSS, only hardcore!
UPDATE:
By the way, the container is itself resizable (a frame inside a frameset to be precise).
EDIT:
I've updated the fiddle in order to provide more info. The problem is, that when the second div will be selected, I'd like the red background to stretch to the width of the longest line.
UPDATE 2:
The above described problem can be solved with display: table-row; (see here). The tricky thing is to make this work even if content is less wide than the container itself (a fiddle).
Divs have width:auto by default. So the inner div is 100px wide, like the outer one. The span overflows out of the div.
In this particular case, the easiest solution is to give the inner div display:inline-block
div div {display:inline-block}
so that it no longer fits itself in its parent, but it moulds itself to the width of its contents.
Updated fiddle.
Edit: to answer your second question: yes, the display:inline-block stops the selected div from being as wide as the container.
Fortunately, that can be corrected by adding
min-width:100%;
in addition to the display:inline-block. See more updated fiddle.
Another edit:
And the question keeps changing. Now it's about frames in a frameset. Oh well.
Here is the latest fiddle that solves the problem as formulated now. But let's see what changes the future has in store...
I think you just need to apply the background color to the span instead of the div.
http://jsfiddle.net/M294p/8/
HTML:
<div class="container">
<div class="selected">
<span>Why don't you cover all the width!?</span>
</div>
<div>
<span>Little content</span>
</div>
</div>
CSS:
.container {
width: 100px;
white-space: nowrap;
background-color: #0f0;
overflow-x: auto;
height: 200px;
}
.selected {
background-color: #f00;
white-space: nowrap;
display:inline-block;
}
The answer to your first question is because you have explicit width to the parent div. You can apply display: inline-block to inner div and remove the width: 100px from the parent.
HTML
<div>
<div class="test">
<span>Why don't you cover all the width!?</span>
</div>
</div>
CSS
.test {
background: red;
display: inline-block;
}
An example : http://jsfiddle.net/M294p/6/
How do i get rid of the horizontal scrollbar on this code: codepen? I'm seeing it in Safari and Chrome, but not Firefox.
I'm using bootstrap, and I've got roughly the following markup:
<div class="container">
<div class="row">
<div class="messages span6 offset1">
<table class="table">
<tbody>
<tr>
<td class=timestamp>[2:22 PM]</td>
<td>echo|</td>
<td>zot: Got a paste or gist of the code?</td>
</tr>
<!-- many more rows… -->
</tbody>
</table>
</div>
</div>
</div>
And styling:
.messages {
height: 200px;
overflow: auto;
}
.messages .timestamp {
min-width: 75px;
}
The problem seems to be the min-width constraint, but I need that to keep the first column from wrapping. I also need to limit the height of messages to 200 pixels. I can't set overflow-x: hidden on .messages because it'll cut off content.
How about this:-
Use word-break on the last column to avoid it cut off.
word-break
Demo
.messages {
height: 200px;
overflow-y: auto;
}
.messages .timestamp {
min-width: 75px;
}
.messages td:nth-child(3) {
word-break:break-all; /* or use word-break:normal; if you don't want to get the word cut in between*/
}
This will adjust the word-break based on the width available, without hiding the contents.
Use the following css:
.messages {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.messages .timestamp {
min-width: 75px;
}
You could change the height property for .messages to "auto" instead of 200px.
You could increase the width of the table by changing its span6 to a span7, or use a span class to force a width on the message tds that is consistent with the Twitter bootstrap grid structure context.
I couldn't tell you exactly why this is necessary; I actually don't know much about how tables get laid out. But this seems like a solution you could deploy.
A completely alternate thought: why are you using tables to do this? You're not laying out tabular data; you have some semantically related pieces, but they're not tabular in their relationship. Given that, you're breaking one of the cardinal rules: don't use tables for layout! It looks to me like you could probably make this work much more sensibly using div elements, using either float or inline-block with specified widths on them. In that case, your markup would look something like this:
<div class="container">
<div class="row">
<div class="messages span6 offset1">
<div class="message">
<span class="timestamp">[2:22 PM]</div>
<span class="author">echo|</div>
<span class="messageContent">zot: Got a paste or gist of the code?</div>
</div>
<!-- many more rows… -->
</div>
</div>
</div>
Then, your CSS would be fairly straightforward, since you've defined the width value for the span6 (I looked at the actual CSS on the CodePen):
.message {
display: block;
clear: both;
}
.timestamp, .author, .messageContent {
display: inline-block;
vertical-align: top;
}
.timestamp, .author {
width: 75px;
}
.messageContent {
400px; /* You'd obviously need to tweak this down to account for any padding */
}
You shouldn't have the nasty overflow problems, and the divs should fill up their heights in perfectly normal ways. You can also bound them. And there's no overflow issue anymore.
(Perhaps you're where you are because it's something that bootstrap defaults to, in which case: UGH. Break it, or do whatever is necessary to get away from using tables for layout. It will always, always be more pain than it's worth, and it's unsemantic to boot.)
For part of a layout I want to make, I want to use three divs, all floating next to each other. The Left and Right have a max-width set, which works fine, but I want the middle div to expand its width to fill the remaining space. To clarify, the left and right divs may have a width of anywhere from 0px to the max-width, depending on what is in each, and I want the middle div to expand its width so that it takes up the rest of the space not used by the divs on either side.
The problem it's having now is that if there is a lot of content in the middle div, it's expanding and pushing the right div off to the next line instead of keeping it up with the other two.
Here's the css I have so far:
#left-column {
width: auto;
max-width: 200px;
height: auto;
float: left;
}
#middle-column {
float: left;
width: auto;
}
#right-column {
width: auto;
max-width: 200px;
height: auto;
float: right;
}
...and the HTML:
<div id="left-column">...</div>
<div id="middle-column">...</div>
<div id="right-column">...</div>
I think that this can be accomplished using a three-column, single-row table, but I absolutely do NOT want to use tables - I want to accomplish as much as possible by using pure css.
Thanks!
Classic Floats
If you order it:
<div id="left-column"></div>
<div id="right-column"></div>
<div id="middle-column"></div>
and you float the left column left, and the right column right, the middle column should fill in the remaining space. You will have some issues with margins, borders and paddings though.
Flexbox
If you don't need to support older browsers, you can use flexbox. With flexbox, this sort of structure becomes much simpler, and the markup doesn't need to change.
You will need to be able to select the parent element, so for the purposes of this demo, the code will be wrapped by <div class="wrapper">.
.wrapper {
display: flex;
flex-direction: row;
height: 200px;
}
.left {
background-color: red;
width: 100px;
}
.middle {
background-color: green;
flex: 1;
}
.right {
background-color: blue;
width: 100px;
}
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
The height and widths are added explicitly so that the <div>s are visible. With actual content, the columns would automatically adjust.
I don't want to dredge up an old thread here but I was looking for a solution to my own problem and came across this and I thought I'd better share with Francisco...
Tables are a terrible idea for positioning layout, the main problem is that before a table will show/render in the browser it has to render it's </table> tag.
Could you imagine if Facebook's column content used a table for it's layout, it would take ages for it to render anything to the screen when checking your timeline for instance!
Another issue is that tables behave extremely differently in each browser.
Basically: <table> for layout = NO!, <table> for listing out rows of data or information = YES!
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.
You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
You can use
.floatybox {
display: inline-block;
width: 123px;
}
If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
My answer:
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Why?
Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.
One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.
Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.
I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.
Anyway, I hope that's helpful.
you can do:
<div style="float: left;"></div>
or
<div style="display: inline;"></div>
Either one will cause the divs to tile horizontally.
I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
I would use:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
It's the first time I use this 'code tool' from overflow... but shoul do it by now...
What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.
Try this for starters from Smashing Magazine.
Look at the css Float property. http://w3schools.com/css/pr_class_float.asp
It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.
I would try to give them all display: block; attribute and using float: left;.
You can then set width and/or height as you like. You can even specify some vertical-alignment rules.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
another...
try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)