I am trying to horizontally align 3 columns (Bootstrap) that have variable heights depending on the size of the view port. As seen on the first picture, everything is centered and aligned on large screens.
When the viewport becomes smaller, the paragraph's height changes and the alignment is lost. I would like to keep the headings (blue), paragraphs, and buttons aligned.
My inital thought was to create three rows for the three different types of elements. Unfortunately I will not be able to do that since I want to keep the border in the middle column.
What would be a correct way of keeping alignment of these three columns regardless of the viewport size?
I've never really seen a perfect answer to this, thats not with javascript, I can't remember the exact code, however, last time i did it, i placed the text in a nested section, each boxes text section had the same class, and i assigned a min-height to that class that was long enough that it fitted the longest piece of text in, then place the button underneath that section.
If you put your code in a JSFiddle i can help you more, however,
it should looks something like this, layout wise,
<div class="four columns">
<img></img>
<div class="text"> this will have a min height
</div>
<input>button here</input>
</div>
I hope this helps, i know it doesn't seem very clear, if you have a live version or a JSfiddle i'm more than happy to help further.
as for the text, you're very limited, there is some very good jquery scripts, just look through http://www.unheap.com
and just have general play with text sizes
Assuming they are in an inline containe vertical-align:middle;
Related
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
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.
So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...
If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.
I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.
In your .forumviewright class, add this property:
height: 100px;
That brings the baselines together.
Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.
Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.
EDIT
Your question begins with:
Can't get CSS flexbox to expand properly.
Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.
If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.
To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.
https://jsfiddle.net/eympj0yq/2/
Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.
This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:
Height 100% on flexbox column child
Hope this helps. Good luck!
I have an issue with having different sized buttons (a tags) with the bootstrap grid system. Right now, I have 4 different sized buttons, and they each take up 3 columns each. For example, I have 4 similar to this:
<div class="col-md-3"> Button Text Here
</div>
My current setup (JSFiddle) is:
http://jsfiddle.net/cov4ca1z/17/
For right now, I'm not worried about how the buttons are overlapping when the window is shrunken down to mobile size. Ideally, what I'm looking for is something like this:
http://oi62.tinypic.com/wbp1sp.jpg
I played around with a couple different things, but I couldn't find anything that worked.
Thanks.
The column widths in the Bootstrap grid system are fixed. If you put each button in its own column, it's going to be constrained by the size of that column, and it will behave independent of your other buttons. So, your very very long button is going to wrap within its own column.
It sounds like you want all the buttons to appear next to each other and have them wrap one at a time as the screen size expands/contracts. I updated your Fiddle:
http://jsfiddle.net/cov4ca1z/24/
I put all the buttons together in their own column and included a float: left in your btn-slider class:
<div class="col-md-12">
Medium
Very Very Very Very Long
Short
About Average Size
</div>
Why not place do something like this?
<ul id="buttonList" class="list-inline">
<li>Medium Size</li>
<li>Very Very Very Very Long</li>
</ul>
Then use CSS to style ul#buttonList li{} to adjust the margins as you would like.
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.