I am pretty new to HTML and CSS.
I need to create a drop down box (using select2) followed by a button.
Both should be on one line (no line break in between them).
Both are contained within a div element.
Upon resizing the screen, I want the select2 to be stretched up and consume\release the additional space, while the button remains fixed in size and in its location (right after the select2, not breaking to the next line). I need the select2 to have min-width and max-width values he can 'leave' in between.
I have googled and searched here, found many answers directing me to use white-space:nowrap, and display: inline-block but I keep failing to achieve my needs.
Here is a fiddle containing my attempts:
Any help?
Have updated your fiddle. jsfiddle.net/TNabn/6/
Let me know if this is appropriate as question is phrased slightly confusingly
Thanks
Related
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'm currently working on a UI that requires that I have a table with cells whose text is read vertically instead of horizontally. To do this, I am using CSS rotate transforms.
The problem I am running into is that the content is being measured before the render transform is taking place. This is causing my table to render incorrectly, giving wide columns instead of narrow ones.
Is there any way to fix this behavior with either css or javascript?
JSFiddle
Check this out: http://jsfiddle.net/c29rr/
I don't know if it will work in your case since it uses float:left to make the cells behave as divs but it's a start.
Not the best solution, but here's what I came up with: http://jsfiddle.net/gJCtN/2/
Also, vertical-align is not supported by elements without display:table-cell or something like it. More info.
I have a design consisting of three divs ( http://jsfiddle.net/herrturtur/Mem6u/ ), put next to each other by display: inline-block, but for some reason the last div appears in the middle of the page.
If possible, I'd like to display the three divs next to each other, with the height of the switch div adjusting automatically to the height of the div containing the select element.
What is the function of the switch? you may be able to work this with the float method and strategically placed "clear"..
if you have the option to use JQuery there is a handy tool called accordion (or accordian as there are a couple) that can perform the actions you want relatively easy.. have you already developed the code to perform the actual switch?
UPDATE:
I think is is similar to what you are looking to do .. let me know
working url with this code:
http://home.comcast.net/~elkins35/test.html
Just view the source to see the edits to the code you were using
Maybe this has already been answered and I am searching incorrectly, but here is my problem. I have an MVC project where the view needs to look like a table. So, I am using a div with spans inside of it. My problem is that I need the data inside to be vertically centered. When I set my display to inline-block I cannot vertically align because some of the data may wrap and become two lines. So, this throws out using line-height. Then I tried to make my span display values to be table-cell. This works and I can use vertical-align:middle, however then I am unable to set a fixed width. And, I need this to look like a table, so the fixed width is required or else it looks horrible.
Here are my attempts thus far, and I know the css needs cleaned up, but I would rather fix this first atm.
http://jsfiddle.net/Scorpionb/ukMfX/ (The scrollbars cause the entire row to misalign)
http://jsfiddle.net/Scorpionb/QzFc3/(white-space:normal; and removed overflow to get rid of the scrollbars)
http://jsfiddle.net/Scorpionb/H6ATy/ (trying to treat it as a table)
Hopefully this makes sense, but I have run around so many circles now that I am losing track of what works and what does not. So, ask if you have any questions.
Also, this is an ASP MVC project, so I am tying each row of data to a form to be submitted and bound to a model
You should really be using tables for tabular content.
You might also benefit cleaning up your CSS by using shorthand CSS. Some useful ones to get you started:
font
border-width
I use example 3 given in this page:
http://simple-navigation-demo.andischacke.com/
and I have a problem because when I open the main page (for example)
http://simple-navigation-demo.andischacke.com/
I get an empty div on the left instead of the content div filling the whole area.
On the other hand when I open a page from the menu (for example)
http://simple-navigation-demo.andischacke.com/books
Everything is just fine.
Can someone propose a solution? How can I completely remove the div in CSS if it does not contain anything?
There are lots of solutions; it depends on where you want your logic to be. A pure CSS solution might be tricky; it might be easier to do this sort of thing in JS.
That said, try changing #sub_navigation's width property to be a max-width instead. This way, it can still be set to float:left, but when there's no ul element inside it, it can collapse.
You might need to modify the width of your content div after that, but hopefully this gets you on the right track.