I have a top bar with multiple div inside. It works as expected in Chrome but in Firefox, the .third div got wrapped around in a second row. How to make the .third div in Firefox to have nowrap like Chrome?
http://jsfiddle.net/qhoc/C6f4c/
Here are the conditions:
.top always have width:100% so it covers the whole browser window
Each inner divs (first, second, third...) have their own predefined fixed width
They must stay in one row. And if the browse width is not enough, the ones on the right will be overflow hidden (not wrap into second line).
Prefer to handle this with css. jQuery should be last resort.
Help is appreciate!!
Remove the float:left from your inner divs an add display:inline-block. Those divs will act as inline elements but with the same block properties.
http://jsfiddle.net/C6f4c/2/
.top {
width: 100%; /* this is optional to accomplish your first condition, either you don't need to have inline-block on this element */
}
.top div {
position: relative;
/*float: left;*/
height: 100%;
display: inline-block;
}
Have you tried using media queries? You can hide a div once the browser reaches a certain max width etc.
More here:
http://css-tricks.com/css-media-queries/
Related
Context
I have a navbar with a fixed height. I want the space underneath to fill the rest of the screen vertically. I also need to have a fixed height because I have a container inside the page that has a list that is scrollable but without scrolling the whole page overflow: hidden
The Problem
When I set a height on all parent elements of 100% I get a vertical scrollbar. I found some answers on SO about "margin collapse" but nothing that could solve my problem.
100vh also won't work without having a scrollbar.
Here is the css for setup the height (#__next is just a div where next.js renders the page):
html,
body,
#__next {
height: 100%;
width: 100%;
}
The navbar is just a fixed pixel height, and the space below has height: 100%
Here is a screenshot that shows the vertical scrollbar:
I can't find any problems on the chrome inspector.
This is how it should look (design file):
Do you know how to solve this? I need to have both containers from screen "SippetPanel" and "SnippetContent" to take the remaining height without adding a scrollbar. It should also work to have a inner scrollbar with overflow hidden (later on when there are many items in the list like from design file)
Be aware that percentual heights refer to the height of the parent.
You can use calc() to solve your issue:
#__next{
height: calc(100% - navbarpx);
...
}
calc()
For the padding issue you can look into border-box.
I usually just try different vh values, that means 90vh, 95.5vh etc. so it all sits perfectly. You can try to meddle with body position: absolute etc., but that would push everything into the navbar, so then you would need to fix it with additional margin-top.
So the best solution I see is to try different vh values for the height and find the sweet spot. You will need to do the same for different phone types as well with media queries, but it shoudn't really be hard.
One of the ways is to use flex-box, it allows you to explicitly say(take all available height.
.body {
display: flex;
flex-direction: column;
}
.navbar {
flex: 30px 0 0;
/* 30px height and do not grow or shint */
background: red;
}
.content {
flex-grow: 1;
/* take all available space */
background: blue;
}
.body, html, body {
width: 100%;
height: 100%;
}
<div class="body">
<div class="navbar"></div>
<div class="content"></div>
</div>
How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:
HTML:
<div class="example">
</div>
CSS:
.example {
height: 100px;
width: 10000px;
background-color: black;
position: absolute;
overflow: hidden;
}
Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.
Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.
You can set overflow: hidden on the elements container. In this case it's the body.
body {
overflow: hidden;
}
You're nearly there!
Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.
You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.
As you mentioned in your OP, you want to hide horizontal scrollbars.
For this, you would need to set
overflow-x: hidden
But (as mentioned), be sure this is on the parent container of .example.
This could be the body, or another div etc. HTH.
e.g.:
body, .parent-container {
overflow-x: hidden;
}
You can use overflow-x: hidden in CSS to hidde only horizontal scroll.
I'm trying to create a horizontal layout of fixed height, inline-block elements that contain CSS columns in it.
article {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
-moz-column-fill: auto;
column-fill: auto;
height: 350px;
display: inline-block;
}
The problem is that the width of inline-block elements is improperly set (columns take up less/more space than container provides) - it seems that the width corresponds to the content before it is being transformed into columns (in Chrome - in result containers are on top of each other) or fits single column (in Firefox and IE - in result containers overlap).
Example (inspect the width of article element):
http://codepen.io/anon/pen/yNQdVE
The only solution I came up with is to make container fit single column and use JS to set width to the scroll width. Is seems to work fine in all 3 browsers I tested.
Example:
http://codepen.io/anon/pen/gpQNWg
Is there any pure CSS solution to this problem?
Changing the display from inline-block to table-cell seems to give you desired results.
Seen in this pen is that style applied along with borders for visual aid.
http://codepen.io/TheLarkInn/pen/jPQjzK
It appears that although it is an inline-block element, that the browser assumes the second column stretches the width of the viewport despite having a width of 300px per column.
You can also wrap all the articles in an element using display: flex; also.
Okay I apologize if this is a repeat - but I couldn't find any working answers anywhere.
I want to have two divs (50% width each) side by side... so a left and a right - inside of a content div (see photo below).
I want them to have min-widths at 300px and once the page gets smaller than 600px (which is when both divs will reach their mins) I want to divs to wrap.. so one on top the other.
I've tried to do that here: fiddle but am having problems.
Here is EXACTLY what I want:
You're making things hard for yourself! This can be done quickly and easily with inline-blocks. Have a nice JSfiddle.
Lets explain the code:
.wrapper
{
text-align: center; /* specifies that the inline-blocks (which are treated
like text here) will be centered. */
font-size: 0; /* Explained later */
max-width: 1000px; /* Your desired max-width */
position: relative; /* These two lines center your wrapper in the page. */
margin: 0 auto;
}
Now for the inside 50% elements:
.left, .right{
display: inline-block; /* This will treat these divs like a text element.
This will work with the parent's "text-align: center" to center the element. */
min-width: 300px;
width: 50%;
font-size: 16px; /* Explained below */
vertical-align: text-top; /* Explained below */
}
You might be wondering why font-size is included. It is because with this method comes a little quirk - if a font size is kept at default, the div's will have an annoying gap between them that can not be eliminated with margin.
However, adding font-size: 0; to the parent element eliminates this gap. It's weird, and you then have to specify the font-size for your children elements, but it's well worth it for the ease of use.
But there's still a problem - the blue element is pushed down, and isn't flush on the top. This can be remedied with vertical-align: text-top; This will make sure all Div elements are aligned by the tops, so they lay in a more pleasant pattern. This is just another little quirk to remember when using inline-blocks. I know it seems like a lot of things to fix just for something this simple, but compared to your other options using inline-block is the cleanest and easiest way of going about this. (Though if you prefer, jshanley offers a very good alternative using float elements)
Also, because these children are now treated like text, they will automatically reposition themselves when the window gets too small! No media-queries needed. Yay.
Good luck.
Instead of using inline-block which causes some sizing quirks, you can use block elements, and float both .left and .right to the left, giving each a width of 50%.
Then to make them stack you need to do a little calculating. Since you specified that the wrapper is 80% of the page width, and the break point for the content is at 600px (each element 300px) the page's breakpoint would be at 750px since 80% of 750 is 600.
You can make a media query that will only apply styles when the page width is less than 750px and set .left and .right to width 100% to make them stack.
#media only screen and (max-width: 750px) {
.left, .right {
width: 100%;
}
}
It's very simple to implement, and gives a good result, here's the fiddle.
I think both #jshanley and #emn178's answers do the trick, but I want to point something out:
The display: inline-block; css property doesn't work with float: right nor float: left, since when you use the float property, it ALWAYS automatically set the display property to block.
Since you're doing this:
.right{
min-width:100px;
background-color:purple;
height:100%;
margin-left:50%;
display:inline-block;
}
The display: inline-block; property is doing nothing.
left and right could have same layout, so I add a class block.
To use float:left and width:50%, it should work.
http://jsfiddle.net/emn178/mzbku/7/
I add media query, it should be what you want.
But you need to calculate how to set the size.
I have three components, a #parent, and 2 of it's children #top and #bottom.
#parent is not of a fixed size.
#top has children that are floated, and does not have a fixed size (it's children can change size). To fix it's height because of floating children, it uses this:
#top:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
I want #bottom to take up the remaining height in the parent, If I use height:100% like normal it makes it overflow the same size as #top's height.
I have also seen people use overflow:none; but this makes some of my content in #bottom get cut off.
How can I make #bottom take up the remaining height in #parent?
EDIT: I made a jFiddle to show the problem. Also, I need to support back to IE 7. I am open to using Javascript/jQuery.
if you float the top element then use height: 100%; this should solve the issue:
#top{
background-color: blue;
width:100%;
float:left;
}
see: http://jsfiddle.net/SKkAp/1/
What this does is now bottom actually fills the full parent since top is floated. But the content of bottom is pushed out of the way of the floated top making it appear as if bottom is filling the remaining space, where it's really filling the whole parent. Hopefully you can make sense of that. Haha