Solved

Vertical FlexBox

Posted on 2014-01-15
18
281 Views
Last Modified: 2014-01-16
What changes i need to use a vertical flexbox and expand vertically with no gaps between the boxes. When the mouse hovers over, the flexbox expands and the overflow text is

revealed. Thanks
MulticolumnLayout.html
0
Comment
Question by:mustish1
  • 10
  • 8
18 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39784119
Flexbox can mean many different things
Is this what you are after
http://jsfiddle.net/GaryC123/6UrwZ/1/

Hover over the middle section
0
 

Author Comment

by:mustish1
ID: 39784160
Thanks it works. Can this be done in css or i have to use the javascript for mouse over?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39784190
http://jsfiddle.net/GaryC123/6UrwZ/3/

I've changed your css a bit.
0
 

Author Closing Comment

by:mustish1
ID: 39784225
Thanks.
0
 

Author Comment

by:mustish1
ID: 39784244
is there any way only the column the mouse moves over on it will expand not the rest of them. As right now all of them expand when i move my mouse to any of the column? Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39784246
Shouldn't be, what browser are you using?
0
 

Author Comment

by:mustish1
ID: 39784252
firefox. May be that is the problem.
0
 

Author Comment

by:mustish1
ID: 39784255
Lets try IE
0
 

Author Comment

by:mustish1
ID: 39784259
Yes it works perfect in IE. Browser problem. Thanks.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 58

Expert Comment

by:Gary
ID: 39784263
Works fine in FF26 for me. (FF is what I use for testing)
0
 

Author Comment

by:mustish1
ID: 39784285
When I move my mouse over the middle column. The left footer expands too and goes down. Only the footer not the text

<div>

</div>
    <footer>
       <em>&copy; 2014 fdsaflsadfl;jsdlfldsklfdsj </em>
    </footer>
   </body>
</html>
image1.png
0
 
LVL 58

Expert Comment

by:Gary
ID: 39784293
Cannot replicate, can you attach your code.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39784312
Let's tidy up your code a bit

http://jsfiddle.net/GaryC123/6UrwZ/7/
0
 

Author Comment

by:mustish1
ID: 39784379
0
 
LVL 58

Expert Comment

by:Gary
ID: 39785422
So whats wrong with it, apart from you need to change the min-height, that should max-height , don't know how it got lost in the code

http://jsfiddle.net/6UrwZ/8/
0
 

Author Comment

by:mustish1
ID: 39785469
When I move the mouse over 2nd or 3rd column. First column also expand but it shows only the footer from the first column.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39785534
http://jsfiddle.net/6UrwZ/14/

I don't understand what you mean, it will only expand the div being hovered. Obviously the footer is going to be pushed down

Example which flows over other content
http://jsfiddle.net/GaryC123/6UrwZ/12/
0
 

Author Comment

by:mustish1
ID: 39785563
ok thanks. it works.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now