I want to hide div when it is empty, through CSS, preferably, but I already applied a style that I don't want to sacrifice.
Here is my code rendered as:
<div class="auto-style2"></div>
Here is my second style:
.auto-style2 {
width: 1100px;
height: 200px;
overflow-y: scroll;
border:1px solid #d3d3d3;
}
I tried: empty-cells: hide;, but that didn't work.
The link below recommended, div:empty { display: none };
But since my div is already using a different style, I would think that it would have to be done through that style only; I think it is going to ignore div:empty; because the second is applied to my div.
Related:
How to hide/remove a DIV when empty
You can use:
`.auto-style2:empty { display: none }`
This will work along with your existing .auto-style2{...}.
Note: For empty to work, it has to be literally empty. If there any visible white spaces it wont work.
.auto-style1 {
width: 1100px;
height: 200px;
overflow-y: scroll;
border:1px solid #d3d3d3;
}
.auto-style1:empty{
display:none;
}
.auto-style2 {
width: 1100px;
height: 200px;
overflow-y: scroll;
border:1px solid #d3d3d3;
}
.auto-style2:empty{
display:none;
}
.auto-style1 shows up cause of white spaces.
<div class="auto-style1"> </div>
.auto-style2 is hidden below this line.
<div class="auto-style2"></div>
You can give the div an #ID and then do:
ID:empty{display: None}
Related
I have a general, possibly beginner question about HTML.
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
max-width: 200px;
border: 1px solid red;
}
#item2 {
height: 100px;
max-width: 200px;
border: 1px solid blue;
}
<div id="container">
<div id="item1"></div>
<div id="item2"></div>
</div>
My question is, why do #item1 and #item2 divs go underneath each other as opposed to next to each other? Isn't it true that they are no longer block-level elements because I have specified a set width for them? Why are they not lined up next to each other inside of #container? The #container has more than enough width to accommodate both items.
Note: This is strictly for learning/curiosity. I know that I can use margins and positioning to place them where I want to. However, I'm just curious as to why it behaves this way.
Thanks.
Div elements are block elements, unless you specify the display property to inline or inline-block it wont align to to the right like other inline elements do.
adding display : inline-block to the css of div's will give you what you want.
You have two ways to place you blocks horizontally: display property or float property.
It doesn't matter that you have set width to your elements. They are still block and displayed vertically.
To change this behaviour, use stylesheet (note that in both cases width, not max-width should be set):
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
width: 200px;
border: 1px solid red;
display: inline-block;
}
#item2 {
height: 100px;
width: 200px;
border: 1px solid blue;
display: inline-block;
}
or this:
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
width: 200px;
border: 1px solid red;
float: left;
}
#item2 {
height: 100px;
width: 200px;
border: 1px solid blue;
float: left;
}
<div> tag always start with new line if you are not using frameworks like bootstrap or other. If you want to see multiple items in single line then add css like display: inline-block
just add float:left; property in child divs or display:inline-block; https://jsfiddle.net/8tvn0kw6/5/
div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.
Even if you specify width it wont allow other elements right next to it. This the property of block level element.
Use the css inline-block it will occupy the specified width or content width.
https://developer.mozilla.org/en-US/docs/CSS/display
The height of the container should be the sum of heights of the child divs and the heights of the borders of the children
ie., height of parent container = 100+ 100+ 1+ 1+ 1+ 1 = 204px
#container {
height: 204px;
}
The #container ie you div has a display property of block. This is a default property if you don't set it to anything else. In your case the div takes this default display property.
To view #item1 and #item2 side by side just use display: inline-block in your #container.
Please replace your class like below.
#item1{
height:100px;
max-width:200px;
border:1px solid red;
display:inline-block;
}
#item2{
height:100px;
max-width:200px;
border:1px solid blue;
display:inline-block;
}
I have two divs next to each other. The div on the right is 300px x 335px. The div on the left goes all the way down the page. I want the width of the left div to go all the way until the right div. Then under the right div, it takes up the whole width of the page. Is this possible?
div elements are block level elements. So they are like square blocks. No, they can't work as you ask. However, you might Google for CSS Shapes to see if it can do what you wish but it's not available in all browsers and still isn't exactly the same as you request.
Here is some option either you can add min-width to the short div and long div to extend it. or you can add a background-color body to fake the illusion of it. but like Rob said there is no good way that can work out.
.short {
width: 100px; height: 100px;
background:red;
float:left;
//min-height: 500px;
}
.long {
width: 100px; height: 500px;
background:blue;
float:left;
//min-height: 500px;
}
.width {
width: 100%;
height: 200px;
background:yellow;
}
.clearfix {
overflow: auto;
zoom: 1;
}
body {
// background-color: red;
}
<div class="clearfix">
<div class="short"></div>
<div class="long"></div>
</div>
<div class="width"></div>
That is not possible, although you could always put another div under the one on the right and set the margin so that it looks like it's part of the one on the left.
This is one of the method to achieve what you want
CSS
#left1 {
margin-right: 300px;
height: 335px;
background: #aaa;
}
#right {
width: 300px;
height: 335px;
float: right;
}
#left2 {
background: #aaa;
border: 1px soild #000;
min-height: 300px;
}
<div id="right"></div>
<div id="left1"></div>
<div id="left2"></div>
I'd like to create a table like div structure, which is placed in a container, can be scrolled horizontally and gets not breaked. I wrote the structure, but when the content gets longer than the container it puts the rest of the content in a new line.
Here's my code so far:
http://jsfiddle.net/rcdzdyv7/2/
where all of these elements represent a "table" row:
<div class="header">...</div>
<div class="body">...</div>
<div class="footer">...</div>
My goal is to make these rows one-lined and look like if it was a table. How could I solve this?
You can't use float:left because when content reach the width there's no way to avoid the floating elements "jumping" to next line (without changing the html structure).
However you can use display:inline-blockbecuase your elements this way can change their behaviour with the property white-space:nowrap.
Basically:
.container {
width: 500px;
overflow-x: scroll;
}
.header {
width: auto;
display:inline-block;
background-color: #D9D9D9;
white-space: nowrap;
clear: both;
}
.body {
display:inline-block;
margin: 5px 0;
}
.body-row {
background-color: #E5EBFF;
display:inline-block;
clear: both;
white-space: nowrap;
}
.footer {
clear: both;
background-color: #D9D9D9;
white-space: nowrap;
}
.row-title {
width: 300px;
display:inline-block;
}
.row-content {
width: 150px;
display:inline-block;
}
.value {
width: 100%;
}
as in this FIDDLE
You could use:
.row-content {
width: 150px;
display: inline-block;
}
instead of:
.row-content {
width: 150px;
float: left;
}
Let me know if it works!
this is because you are using DIV with delimited width no set height.
so when the width needed will be too high for the container width it will automatically do under. Hope this makes sense. A soluation can be to use inline-block, personnally I would recomment to use a classic table but just my opinion
try these css properties to the <div> for which you want a scroll
div {
overflow-x: scroll;
overflow-y: hidden;
}
hope this is what you want !
I have a webpage containing two <div> blocks: .fixed and .stretch. Here you can see its HTML and CSS code: http://jsfiddle.net/p2bhuzs0/. My issue is, when I resize browser window so width of .stretch block is less than its min-width value, a blank row appears above the block.
How do I make it not appearing, and, instead of it, make vertical scroll bar appearing?
It seems like you're trying to effectively create a tabulated layout *(though not using a table as you dont have data), so why not use CSS tables?
Demo Fiddle
CSS:
.container {
position: relative;
background: #ddd;
border: 1px solid #999;
display:table;
}
.fixed, .stretch{
display:table-cell;
}
.fixed {
width: 420px;
}
.fixed div{
background-color: limegreen;
margin-right:20px;
}
.stretch {
background-color: lightblue;
overflow: hidden;
text-overflow: ellipsis;
min-width: 300px; /* When less than this value, a blank row appear above .stretch block */
max-width: 500px;
}
You'll then need to wrap the content of the fixed column in another div
So I have this strange problem, I have two div on one line (display:inline-block) and the first div appears on hover in a sliding effect. For this animation I need to set overflow:hidden, but it seems to break the my page.
I made a demo on JSFiddle
Have you ever face this problem ?
Thank you
NOTE: IE8+ compatible hints or solutions would be a huge plus
Code
HTML
<div class="container">
<div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
<div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>
CSS
.container {
background: #000;
color: #FFF;
}
.hello {
display: inline-block;
width: 40px;
background: #F00;
}
.textWrapper {
display: inline-block;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
EDIT
For those who want the hover animation : JSFiddle Updated
You will see my problem by hovering the 2nd container (the JQuery "animate" call add a "overflow: hidden" property)
You need to specify vertical-align: top for your inline-block child elements.
When you specify overflow: hidden, you are triggering a new block formatting context, and its bottom edge will align with the baseline of the following inline element.
See demo: http://jsfiddle.net/audetwebdesign/7SZkN/
The relevant CSS to modify is:
.NoOverflow {
overflow: hidden;
vertical-align: top;
}
There is pretty much CSS2 so it should work fine in IE8+ (any browser that supports inline blocks).
Have you tried to float them left.
.container {
background: #000;
color: #FFF;
}
.hello {
/*display: inline-block;*/
float:left;
width: 40px;
background: #F00;
}
.textWrapper {
/*display: inline-block;*/
float:left;
background: #090;
}
.NoOverflow {
overflow: hidden;
}