I was trying to vertically align some text inside a div using a CSS table, but it doesn't work for some reason:
<div class="navlink" style="width:150px; display:table;">
<div style="text-align:center; display:table-cell; vertical-align:middle;">Some Text</div>
</div>
Any suggestions on how I can get this code to work?
Works for me, you just put table width instead of height.
<div class="navlink" style="width:150px; display:table;">
---> <div class="navlink" style="height:150px; display:table;">
It works, it's simply that you are not using any height for your cell div, so do it like this
Demo
<div class="navlink" style="width:150px; display:table;">
<div style="text-align:center; display:table-cell; height: 200px; vertical-align:middle;">Some Text</div>
</div>
This is the best answer I've found: http://phrogz.net/css/vertical-align/index.html
This comes up a lot. There's no easy answer.
A quote from the page:
A FAQ on various IRC channels I help out on is "How do I vertically
center my stuff inside this area?" This question is often followed by
"I'm using vertical-align:middle but it's not working!"
The problem here is three-fold:
A HTML layout traditionally was not designed to specify vertical
behavior. By its very nature, it scales width-wise, and the content
flows to an appropriate height based on the available width.
Traditionally, horizontal sizing and layout is easy; vertical sizing
and layout was derived from that.
B The reason vertical-align:middle isn't doing what is desired want
is because the author doesn't understand what it's supposed to do, but
…
C … this is because the CSS specification really screwed this one
up (in my opinion)—vertical-align is used to specify two completely
different behaviors depending on where it is used.
The article goes on to explain that there are two basic methods: absolute positioning, and the line-height method in the other answers.
Related
I'm getting into Flexbox now, trying to see how I can transition from using the traditional CSS grids.
I have two layouts: One made with a CSS grid. The other one made using Flexbox. The basic layout for both examples is quite basic: A header, a nav, a content section and the footer.
Design-wise they both look the same and behave exactly the same for RWD. However, in order for me to accomplish the same behavior using Flexbox I had to create a wrapper div around the Nav and the Content sections.
This is the HTML used with the CSS grid layout:
<div class="container-12 clear">
<header class="grid-12">Header</header>
<nav class="grid-4">Nav</nav>
<section class="grid-8">Content</section>
<footer class="grid-12">Footer</footer>
</div>
This is the HTML used with the Flexbox layout:
<div class="main-container">
<header>Header</header>
<div class="site-content">
<nav>Nav</nav>
<section>Content</section>
</div>
<footer>Footer</footer>
</div>
Notice the <div class="site-content"> around the nav and section elements.
So my question is: Is the <div class="site-content"> around the nav and section elements necessary in order to accomplish that layout using Flexbox?
I'm trying to achieve the same layout with the same HTML but different CSS techniques.
Here are the demos:
Basic Layout Using a CSS Grid
Basic Layout Using Flexbox
Thanks for any guidance on this.
The answer is simple: Yes, that extra wrapper is required.
I was able to find this article in Smashing Magazine from 2011 By Richard Shepherd where confirms that sometimes an extra wrapping container is needed in order to treat the child elements with Flexbox. Granted, his article uses the old 2009 syntax, but still, the case applies:
Using flexbox often requires an extra div or two, because the parent of any flexbox element needs to have display set to box. Before, you could get away with the following:
<div style="float: left; width: 250px;"> Content here </div>
<div style="float: right; width: 250px;"> Content here </div>
Now with flexbox, you’ll need:
<div style="display: box">
<div style="width: 250px"> Content here </div>
<div style="width: 250px"> Content here </div>
</div>
Many of you have already turned away, insulted by this extra mark-up that is purely for presentation. That’s understandable. But here’s the thing: once you master the CSS, this extra containing div becomes a small price to pay. Indeed, you’ll often already have a containing element (not necessarily a div) to add display: box to, so there won’t be a trade-off at all.
Extract taken from CSS3 Flexible Box Layout Explained
Thanks.
What is required to make links in bootstrap grids work throughout all the media breakpoints ?
In my case, the links work only as long as the grid is not stacked.
This is what the grid looks like:
<div class="row">
<div class="col-md-6">
<a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px);"> <span>Item 1</span>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-12">
<p>This is another row</p>
</div>
</div>
</div>
</div>
The working fiddle is here:
http://jsfiddle.net/pTw2j/8/
Edit Thanks for the fast answer. I chose overflow:hidden; at the end to avoid scrollbars while still fixing the issue.
The problem is that the links are floated, resulting in a height of 0 for the parent .storey container.
Setting overflow: auto on the container will fix the problem.
http://jsfiddle.net/pTw2j/13/
.storey {
overflow: auto;
}
This is referred to as "clearfixing." If you're interested in learning more, here are two good articles:
CSS Tricks: Force Element to Self-Clear its Children
David Walsh: CSS Clear Fix
I had the same problem. In my case a better solution was to add the class of "clearfix" to the containing div. Bootstrap has this class built in so you don't have to do anything with your CSS.
Adding overflow:auto will result in a horizontal scroll bar. Best to use clearfix class which resolves the issue.
I'm looking for a way to make sure the height of a scrollable, fixed element adapts to fit all the whitespace down until the footer.
Please see the following fiddle which is the layout I'm working on.
Been stuck on this for 2 days, it's about time to move on.
Better to see the fiddle in firefox, sidebar scrollbar not scrolling in chrome for some reason but that's a different issue.
<header></header>
<div id="platformContainer">
<section id="platformContent">
<div id="platformBody">
<ul class="mainList">
...
</ul>
</div>
</section>
<section id="toolBarContainer">
<div id="toolBarContent">
<ul id="toolBarList">
...
</ul>
</div>
</section>
<footer></footer>
Assuming you want the toolBarList container 100% height - this is what you already have. The sidebar is 100% height. The list within, however, is only set at 200px:
#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{
height: 200px;
...
}
Changing that to height:100%; makes it fill the entire height of the document. The problem now is accounting for the header and footer. This is a common question, however, and I've answered it myself here: https://stackoverflow.com/a/14892331/1317805 as have many other people. You'll need to ensure that the header and footer aren't hidden by or covering the content area.
I think you might need javascript to do this – 9edge
Not at all!
Also, please note when using section tags:
Use of the element is not to be thought of as outlining content that needs to be styled visually in a particular way. If this is the case the author may be best advised to just use a semantically neutral div.
Your #platformContent and #toolBarContainer styling may yield unexpected results.
http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements
In fact, your styling of those sections can be completely replaced with:
#platformBody, #toolBarContent {
position:relative;
height:100%;
top: 70px;
width: 100%;
}
Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?
overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.
To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/
Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
DEMO
You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
I've a several columns in CSS, with float:left property to align them horizontally. But as it float in the left side, I can't center all the divs.
So I found that if I wrap my columns with another div with display:table property, all works perfectly... but not in IE7 (idd, this property is not supported -.-).
Does anybody has a hack or trick for this?
Here is my code:
<div style="display:table">
<div style="float:left">A column</div>
<div style="float:left">A column</div>
<div style="float:left">A column</div>
<div style="float:left">A column</div>
</div>
Hm, why are you having a float: left on your leftmost div? I think that will cause some trouble. Do you have any css? You should have margin-left: auto and margin-right: auto on your outer div. Take a look on this page, there's all the details. Seems like you might have to add br-tags or similar too
if you use display:table; on the parent dic, you should have display:table-row; and display:table-column;-elements in it - and floating doesn't make any sense in that case. please take a look at this or ask google for more information.
(if you want to display a table, why don't you use the table-element? In cases where tables are used for layout, thats a bad practice, but doing the same sh*** by substituting table-crap for divitis doesn't make it better)
EDIT: if you just want to display your divs side by side and centered, you could simply try to use display:inline; or display:inline-block; (but the last will make problems in IE, too) - and remove that senseless display:table; on the parent-div