Basically I want to layout a toolbar with some icons on the left and right and a variable sized text field in the middle. I want the text field to take up the remaining space in the middle. The side sections widths are not known ahead of time, they are determined by the number of visible buttons on each side.
The problem is similar to http://www.alistapart.com/d/holygrail/example_4.html except he side column widths can not be hardcoded.
Is it possible to do this purely in CSS?
It sounds like you need display:table-cell
http://www.w3schools.com/css/pr_class_display.asp
Container can be display:table-row and the children can be display:table-cell. I believe that should work for you.
To answer my own question, if you're using a browser that supports the flexible box layout model, setting the left and right DIVs to "-webkit-box-flex: 0;" and the center DIV to "-webkit-box-flex: 1;" does exactly what I want. The container should have "display: -webkit-box;"
Related
It's my understanding that flexbox containers and their child items flex fully along only one axis, depending on the value of the flex-direction property, row or column. With a "row" container, you can stretch and shrink the width of the container and the individual boxes it contains, but the content in those boxes does not grow or shrink to match. On the other hand, resizing a window vertically does cause content to resize accordingly. (I think the situation is vice versa with "column" containers, though I haven't tried them alone.)
So my questions:
Do I have that right? I've read through many nice blog posts on flexboxes, but none covered this characteristic explicitly as a main 'feature.'
Is there a flexbox-only workaround, some arrangement of rows-inside-columns or the other way around, maybe with specific properties set special ways?
I tried putting a columnar container inside a flexbox belonging to a row container, and then putting text into that, but I saw no change in resizing behavior--the text still resizes only when the window/viewbox is resized vertically, not horizontally. See this codepen.
(About the example: first, I apologize for extraneous properties or properties set to random-ish values, but I was trying anything and everything. I tried to pare them back without messing up the demo but I'm sure there's much to improve. The svg logo on the left is just in a top-level flexbox in the main container for that row--it behaves as expected, shrinking/growing only with vertical window resizes. I put a hidden logo in a third box on the right so with equal-width boxes on either side, the text between them comes out centered in the viewbox, if you don't use shrink too much side to side. Maybe there's a less kludgy way with flexbox to a row with centered text and a logo on the left.)
Im making a responsive site with dynamic content. I have a row of divs that will wrap at smaller screen widths. As some of the divs have more content and are taller than others, when a div wraps it doenst always go all the way to the left of the screen.
http://codepen.io/anon/pen/Ljmkb
I need a solution that works for different screen widths and for when the content makes the divs different heights, in other works I cant just set clear left on the 4th div.
Change float:left on your div elements to display:inline-block; in laymans terms this will place them on the same line if there is space, or start a new line and place the overflowed element at the start of it if not.
By then placing the elements in a vertical-align:top environment, they will maintain their top alignment.
Demo Fiddle
Look at this
I'm using float:left to align contents of my website grid-wise.
On the left side, the space between the two objects is 24px, whereas on the right side it's 10px.
How do I fill up the extra spaces so that both sides can have 10px margin?
You cannot achieve what you want with just CSS floats unless you make all your panels a fixed height and truncate the content of it's too big.
If you must have different sized boxes, use a JavaScript library like Masonry http://masonry.desandro.com
You can see what I'm going for at http://jsfiddle.net/vW45s/. A center div with two lines of text, and text on the left and right that abuts the text at the bottom of the center div.
I would like the text to be centered on the page (either the main "hello world" or the second line). Right now I'm using an outer div with a specified width and margin: auto. If the width is too large, the text will not appear to be centered; if the width is too small for the inner text, the divs will be stacked: http://jsfiddle.net/vW45s/1/.
Is there a better way to center these three floated divs, while still getting the left and right text to align with the second line of the center div?
Any tips would be appreciated. CSS is not my strong point, but I'm learning.
Floating and centering doesn't mix well. To be able to center something, the browser must be able to determine how wide the element is. To determine it's width, it needs to know how wide the other floating divs are. Their width depends on the width of the element you want to center.
You have these options:
Try to get it to work without assigning a size. It might be possible. Be ready to spend a day or two on this to get it work with Firefox and Chrome and then one week to fix it in IE. ;)
Assign a width to all three divs
Use absolute positioning instead of floating. Make the center column 100% wide and move the side columns in front of it (one left with left: 0 and the other right with right: 0; both will need a definite width). That works until you start resizing the browser window too much (and the side columns start to overlap with the center).
Use a table or display: table-cell because table cells know about their siblings widths without floating. That means you can assign a width to the two side columns and then let the inner column grow.
PS: Yes, I know about the myth that tables are bad. The myth is a gross simplification. It's bad to nest 500 tables to get the design you want if you can get the same result with two divs and some smart CSS. But that doesn't mean you must not use tables at all.
Have you tried adding width: 33% to the left, right, and center divs along with text-align: center?
To get an idea of what the hell I'm on about, please go Here and Here
As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.
Height on the sidebar and content are not set so the divs grow!
However, you can see that if one floating div is bigger than the other, the the background image appears.
I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony
Thanks
display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.
Or, you could always use the infamous Faux Columns
What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.
What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.
Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.