I thought setting the min-height property will expand if necessary to accommodate its contents, but I was shocked to realized that it is not displaying the content at all, especially when I re-size. Some contents is completely loss from display. This code below is not the exact code thought, but this is the closest to my problem I can get.
<div class="parent">
<div class="box"> Box One</div>
<div class="box"> Box two</div>
<div class="box"> Box three</div>
<div class="box"> Box four</div>
<div class="box"> Box five</div>
<div class="box"> Box six</div>
</div>
<style>
.parent {
min-height: 300px;
width: 100%;
background-color: blue;
}
.box {
width: 50%;
height: 50px;
color white;
}
</style>
The Problem: You can see the problem when the content inside the .box increase and the size of the browser is decreased to mobile version. Then you can see the real problem, that the content is getting out of the blue box.
You can see the problem here : https://jsfiddle.net/bro49tg7/3/ resize the width of the output to smaller screen.
To Solve this problem
Change your css code to this:
.box{
width: 50%;
min-height: 50px; /* changed this */
color: #fff;
}
Exactly as Hunzaboy says, you need a min-height on each box for this to work. Take a look at this fiddle:
https://jsfiddle.net/6zpek8m6/
.parent {
min-height: 300px;
}
.box {
min-height: 50px;
}
Related
I'm trying to find a workaround to the weird CSS overflow behaviour describe in this answer:
If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.
I have a horizontally scrollable section with many card inside of it, I want each card to scale up when the user hover over it.
I started with a simple
.card:hover{
transform: scale(1.5);
}
that obviously resulted in a vertical scrollbar appearing on the horizontally scrollable section, for the rule described at the beginning.
So I tried modifying the position property to absolute on hover and also added a wrapper around the card to prevent other card from collapsing due to the previous element being removed from the document flow, this seems to work but also produces a very weird behaviour: if you scroll horizontally the hover effect kinda breaks, it only works if the mouse is positioned on an overlapping area between the card normal position and the hovered (absolute) position. Since the card gets absolutely positioned on hover, that position remains the same even if the user scrolls horizontally.
I'm trying to find a CSS/HTML only solution, if there is one.
The ideal would be to either have both overflow-y: visibile and overflow-x: scroll or to find a way to calculate the top, left values according to the scrolled position of the cards.
Here is a minimal example (also on jsfiddle):
.container-wrapper{
position: relative;
}
.container{
width: 100%;
display: flex;
overflow-x: scroll;
border: 1px solid orangered;
}
.wrapper{
flex: 0 0 calc( 100% / 5);
}
.card{
height: 100px;
margin: 0 0.5em;
background-color: blue;
}
.card:hover{
width: 200px;
position: absolute;
transform: scale(1.4);
}
/* color */
.red{
background-color: red;
}
.pink{
background-color: pink;
}
.yellow{
background: yellow;
}
.cyan{
background: cyan;
}
.green{
background: green;
}
<div class="container-wrapper">
<div class="container">
<div class="wrapper">
<div class="card red"></div>
</div>
<div class="wrapper">
<div class="card pink "></div>
</div>
<div class="wrapper">
<div class="card yellow"></div>
</div>
<div class="wrapper">
<div class="card cyan "></div>
</div>
<div class="wrapper">
<div class="card red"></div>
</div>
<div class="wrapper">
<div class="card green "></div>
</div>
</div>
</div>
Hope I've been clear, thank you all.
I have a slightly unusual CSS challenge to overcome.
I have a two column layout, whereby the width of the left column is set by the width of a main image, and the right allowed to fill the remaining space. There is a container under the main image, which could have a natural width greater than the main image. However, I want this div to be the same width as the main image, and the overflow to be hidden. Here is my effort at attempting this:
.outer {
margin-right: 5px;
position: relative;
}
.left {
float: left;
}
.right {
width: auto;
overflow: hidden;
}
.contentOuter {
overflow: hidden;
}
.content {
width: 500px;
}
.inner {
background-color: grey;
color: white;
width: 100%;
height: 150px;
}
<div class="outer left">
<div class="image">
<img src="http://placehold.it/350x150" />
</div>
<div class="contentOuter">
<div class="content">
<img src="http://placehold.it/500x50" />
</div>
</div>
</div>
<div class="outer right">
<div class="inner">
Hello world!
</div>
</div>
But as you can see, .contentOuter stretches to the width of its contents, regardless of what I attempt.
One major caveat I have is that apart from .content having a fixed width, I don't want any other hard-coded widths in my CSS; everything should be completely fluid, and the dimensions of the columns determined by the dimensions of the .image img.
So, I am after something that visually looks like this, but without the hard-coded max-width on .content:
.outer {
margin-right: 5px;
position: relative;
}
.left {
float: left;
}
.right {
width: auto;
overflow: hidden;
}
.contentOuter {
overflow: hidden;
}
.content {
max-width: 350px; /* Hard-coded for demo purposes */
}
.inner {
background-color: grey;
color: white;
width: 100%;
height: 150px;
}
<div class="outer left">
<div class="image">
<img src="http://placehold.it/350x150" />
</div>
<div class="contentOuter">
<div class="content">
<img src="http://placehold.it/500x50" />
</div>
</div>
</div>
<div class="outer right">
<div class="inner">
Hello world!
</div>
</div>
One option, though that depends on further requirements you may have, it so simply add to the lower block:
position: absolute;
width: 100%;
This takes it out of the flow, and the enclosing element will not take its width into account for sizing, only that of the image on top. The overflow: hidden will then hide whatever overflows.
The drawback is that the height of the enclosing element (or the position or subsequent elements) will not take into account the size of this element.
jsFiddle: https://jsfiddle.net/jacquesc/rsz0hb1g/
A quick way to solve this would be to simply use some jQuery. It would only take two lines of code to achieve this.
var imgWidth = $('.image').width();
$('.content').width(imgWidth);
Going mental about that thing: I have a following structure of divs:
<div class="main">
<div class="container">
<div class="column">
<div class="content">
<div class="block"></div> (repeat 4 times)
</div>
</div>
<div class="column">
<div class="content">
<div class="block"></div> (repeat 4 times)
</div>
</div>
<div class="column">
<div class="content">
<div class="block"></div> (repeat 4 times)
</div>
</div>
</div>
</div>
CSS:
.main {
overflow-x: scroll;
width: 400px;
}
.block {
display: block;
width: 300px;
height: 80px;
background-color: blue;
margin: 5px;
}
.container {
width: 1000px;
}
.column {
float: left;
height: 300px;
}
.content {
height: 300px;
overflow: scroll;
}
The idea of this layout it to have one big container, scrolling horizontally, that contains smaller containers that scroll vertically.
Issue: while it works perfectly on android and desktops, can't get it to work on iphone with safari (can't test on chrome for iOS though, don't have access to device). Instead of scrolling the container, iphone scrolls entire page (please try to scroll left-right while keeping finger on blue rectangles). Please see this jsfiddle on iphone.
I do figured out reading stackoverflow and testing by myself that it has something to do with css overflow property, but still can't figure out the solution.
Any ideas please?
So once again the solution was to add -webkit-overflow-scrolling:touch; in the right place of the code. In this case it was the very top main container and get rid of unnecessary overflow properties:
.main {
overflow-x: scroll;
width: 300px;
-webkit-overflow-scrolling:touch;
}
Tested on the emulator, but looks like working now. JSFiddle
Sorry, I'm sure this question has been asked before, but if there anyway to do the following:
I have three divs in-line like the diagram shown below, when the browser window is shrunk it automatically drops each div to the next line. I know that I could use the #media command and assign a different css stylesheet if the browser is a certain size, but it would be great if I could make it fluid.
Before:
After:
Thank you!
Wrap the divs in a container element, like....
<div class="wrapper">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>
Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.
Try:
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
and:
.box {
background: #000;
width: 300px;
height: 300px;
float: left;
}
They should automatically drop when below 900px, see: http://jsfiddle.net/JQFH7/
Elements into it
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div>
CSS
.inner
{
width: 100px;
height: 100px;
display: inline-block;
background: black;
}
div#wrapper
{
width: 100%;
text-align: center;
}
JSFiddle
I'm sure this has been asked quite some times however after quite some time searching for a solution I have finally resorted to asking a question here!
I am working on an HTML Help file for an application I am developing, where the file is split into two sections. One, a sidebar (floated to the left) and two, the main content section (also floating left).
The problem I am facing is that when the main content extends beyond 100% of the page height, the sidebar background stops.
I would use the faux column effect where I assign the a background image of my sidebar however to maintain my design's integrity I have to set a different background image for the body.
Check out this JS Fiddle I set up - http://jsfiddle.net/5gpFx/
Hopefully that can help you see what the issue is if I failed to communicate it well enough!
Cheers!
Just wrap both columns in a container and set the faux-column background on that - this way the body will be available for setting whatever image you want. I've made a simple example here: http://jsfiddle.net/5gpFx/2/
I had the same problem but I could not make work the solution with flexboxes above. So I created my own template, that includes:
a header with a fixed size element
a footer
a side bar with a scrollbar that occupies the remaining height
content
I used flexboxes but in a more simple way, using only properties display: flex and flex-direction: row|column:
I do use angular and I want my component sizes to be 100% of their parent element.
The key is to set the size (in percents) for all parents inorder to limit their size. In the following example myapp height has 100% of the viewport.
The main component has 90% of the viewport, because header and footer have 5%.
I posted my template here: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>