Cascading Style Sheets

Since it was not really possible to change the positioning of the menu, I removed the button's tooltip and instead used CSS to create a DIV element which behaved exactly like a tooltip, containing the original tooltip's text. That way, I could control the element's position and ensure no elements are hidden. The element was also styled to resemble a typical browser tooltip.

Taggings:

Using flexboxes for this purpose is a good solution, however, further css must be implemented in order for the content to be responsive.
An alternative would be to use a wrapper containing both items, and giving it a "position:relative". Then using "position: absolute" in both of your divs (assuming you've got one for the bar on top and anotherone for the content). You would also need to restrict the heights of the top-bar component.

FOR EXAMPLE:

#wrapper{
position: relative;
}
#top-bar, #content{
position: absolute;
}
#top-bar{
height: 50px;
width: 100%;
}
#content{
width:100%;
}

Trying to fit the screen in CSS

In a web application I am developing, I had a CSS design problem. I had a title bar on top and underneath I had the content. I needed to get the content to spread itself to fit the whole screen instead of squeezing itself to the top.
Subscribe to Cascading Style Sheets