The flex boxes I have are stretching horizontally and not vertically.I am looking at the code and the work Horizontal is not even in there so I am unsure how it's even doing that.
I asked the professor about it and she gave me a hint
For part 2, the boxes need to expand vertically when hovering. So change the orientation to "vertical" and do adjustments for sizes of height in .flexbox , .flexbox > div, .flexbox > div:hover. The book example adjusts width.
If there is overflow, use overflow :hidden in flexbox div. so text will not overflow when the mouse is not hovering.
Hope the above hints will help.
Here is a link to the actual page. Can someone point out what word I need to change?
http://wmelliott.x10host.com/Fig5_13_Redo/Fig5_13_Redo.html
My Work that's moving horizontal rather than vertical
There is a property flex-direction. As i can see in the image you should use flex-direction:column hope that helps.Note that this property would be used in the parent flex container.
Related
I am making a header component and what I want to achieve is to make my header picture stretch to the full width of the webpage, even when it the browser shrinks, however when you shrink the browser the picture does not stretch 100% and is driving me insane. I don't want to remove the scroll-x property, so how can I fix this? What am I doing wrong? Here is is a picture of my issue:
https://imgur.com/YCZOYGE
And here is a codepen with my code:
https://jsfiddle.net/philipkovachev9/ax2Ljtvn/5/
So, as promised I found a solution.
Change display:flex from your parent div, to display: inline-block and remove width:100%. You div will have the size of your content, even when it overflows.
Setting the width to 100% will be relative to the parent, it was the body. However, the body didn't include the overflow.
I hope it works :)
PS: If you still need display:flex, create a child div, with flex attribute.
add this css
body{padding:0;margin:0}
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
I'm having an issue with the CSS columns property. Namely, I cannot seem to get the container surrounding them to stretch to the width of the columns as seen here: http://jsfiddle.net/niaconis/43k5s/5/
Seems a lot like the similar issue with floats, only horizontal instead of vertical, but the pseudo-element clearfix doesn't help with this one.
How can I get the container to completely wrap the columns?
P.S. I know about the XY Problem, but this is merely a curiosity. I don't care about achieving the layout from the example. I do care about finding out why the container doesn't stretch to wrap its contents.
The absolute positioning of your element is causing the browser to incorrectly calculate how wide it should be when using the columns property. Remove it and the element stretches as it should.
Before someone down votes me for asking yet another centering problem. Please read my situation before judging!
I'm familiar with most common techniques for centering stuff but here is my situation. I have a DIV that must be both vertically and horizontally centered within its parent but it must also be fluid and not exceed the width of 890px.
Max-width achieves the fluid-ness that I want but because absolute positioned elements need width rather than max-width my vertical/horizontal centering breaks. At the moment i'm having to sacrifice fluid-ness over centering (or vice-versa) but I NEED both.
I'd like to keep the content within my centered DIV in view at all times, my current code doesn't do this, it hides the content as the window is made smaller http://jsfiddle.net/cCQ2w/
Can anyone propose a solution that might work for me?
I've tried to solve your problem. See this page: http://jsfiddle.net/PGce2/. So it centered horizontally and vertically and it is "fluid" and not exceed the width of 890px.
You can provide a width of 100% with max-width set to 890px.
I have shown [here][1] the sample of a div with both horizontally and vertically align center.
[1]: http://jsfiddle.net/r2qL5sgj/1/
EDIT:
Per Mat's suggestion below, I fiddled with jsFiddle and came up with the "real" problem.
Positioning content absolutely within the center DIV doesn't produce the required results:
http://jsfiddle.net/yxFQK/22/
In order to position children absolutely, the parent needs to be relative, right? But that messes up the nice left/center/right layout:
http://jsfiddle.net/yxFQK/23/
Any ideas? Thank you in advance.
ORIGINAL POST:
We want to have a fixed-width parent DIV with three dynamic-width children DIVs:
The left and right DIVs should size based on content. The center DIV should fill the space between the left and right DIVs:
[[Left][ Center ][Right]]
(or)
[[Big Left][ Center ][Big Right]]
The center DIV should scroll overflow content (so we can't use overflow: hidden).
Also, we would like to change the parent DIV size (using CSS media queries), and have everything continue to fill in nicely:
[[Left][ Center ][Right]]
[[Big Left][Center][Big Right]]
[[Left][ Center ][Right]]
[[Big Left][ Center ][Big Right]]
Any ideas? Thank you in advance.
I don't have enough reputation to comment on your answer so I'm submitting as an answer. Is this what you're looking for?
http://jsfiddle.net/yxFQK/
Remember it's always easier to make a jsfiddle rather than try to explain visually/conceptually. If you frame the problem well it's easier for people to help you out.