The problem is that my divs are being ordered so that the first column collapses first and is read first on mobiles (intended).
But on word-wrapping at very specific screen dimensions, the divs get out of balance and now look a little funky on their vertical balance with each other.
An image can be found here (red shows divs):
What I want is to add some space on the text that wasn't word wrapped so that
Personally, Id say the current design works well, as it can fit and change to different screen sizes, the fact that it doesnt line up is understandable as the word is just to long.
However if you wanted to you could set a min-width on the container which represents that box. This means the word wouldnt be wrapped when the screen gets smaller. But it could come with side effects as it will push over the other two divs depending on how the css works.
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.)
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
I frequently find myself with a two column layout, in which one column contains all the content and the other contains various extra elements. These need to be somewhat anchored to specific paragraphs in the first column to make any sense. An example:
While it appears to be three continuous columns, it's actually four separate rows, each with three columns -- that is, the first row contains the gallery block, the first paragraph and the "1918" timeline block; the second contains an offset region, the second paragraph and the illustration above the "1925" block, et cetera.
The upsides of this approach are that the extra content pieces (hereafter "blocks") are vertically aligned to the paragraph referencing them and are responsive due to being sized proportionate to the column width. The downsides are that it's not at all semantic, and having blocks taller than the main paragraph will stretch the height of the column and add blank space beneath it (Unless absolutely positioned, which these are).
I could also make it a single 3-column row, with the blocks added to the main content column above the referencing paragraph, and then absolute positioned into the blank space created by the outer columns. This is good in that it's much more semantic, but bad in that block widths won't reflect the column width defined by Bootstrap's grid, and thus are much more difficult to make responsive.
I could do the same but put all the blocks one after another in each column, positioned vertically with bottom margins (or positioned relatively), but this is even more difficult to make responsive given the distance between blocks will change in a responsive layout when the central column is narrowed or widened. I could scale the text at different breakpoints to prevent the paragraph shape from changing, but that would probably reduce readability because I'd need to scale down on smaller devices.
Is there anything I'm missing? Put another way, is there a clean, semantic way of vertically positioning an element in reference to another element?
Could this plugin answer your problems?
http://leafo.net/sticky-kit/
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
I have two divs that I would like to be side-by side if the screen is wide enough but if it's a narrow screen I want them to display one below the other, basically like inline block will do. the problem with inline block is the shorter one is as low as it can go on the 'line', like a full stop next to a bigger letter. how can I make the two divs go as high as possible on the 'line' so the white space is below the smaller div not above it, more like a quote mark next to a letter
either div could be taller than the other
I think you're looking for:
vertical-align: top;
However, without seeing your test case it's difficult to discern whether or not there are other metrics involved that are creating that space, e.g., margin, padding etc.