http://jsfiddle.net/aN57Q/1/
When I zoom my page, an element will eventually stretch it and when it does you get a situation much like the one in the jsFiddle above.
The blue element represents the element stretching the page, it cannot be changed the rest is fair game. I need the red boxes to fill the page appropriately.
Thanks so much in advance!
<div class="a">A</div>
<div class="b">B</div>
<div class="c"></div>
<div class="somethingBig">Blah!</div>
div {
height: 50px;
background-color: red;
margin-bottom: 10px;
font-family: Verdana;
color: white;
font-size: 30px;
line-height: 50px;
}
.a { width: 100%; }
.b { width: 100vw; }
.c { width: 100%; }
.somethingBig {
width: 600px;
background-color: blue;
}
Okay, this is the same thing that happens when the browser window is smaller, such that the red bars are not as wide as the blue bar. They are only going 100% of the body, which becomes smaller than the overflowing blue.
You can do min-width:600px; on your "div" CSS.
Related
This page http://alsotoday.com/roemerstrasse/ has a fixed bootstrap navbar, which should stay fixed, so the video in the background can shine through it. When scrolling the content all the way up, it will go beneath the navbar, which is not favourable. Anybody know, how to create an upper margin for the content, so it will scroll only just beneath the navbar without changing the navbar to not-fixed?
Edit 1:
main-area-video and panel_container (meanwhile called main-area) are both height 100%, because each, the video and the tiles should fill a screen.
Something like this ? In this snippet, the articles will not go behind the navbar, and only the content is scrollable. This is how SPA are supposed to work, for instance.
EDIT I added an opacity to the navbar so you can see, nothing is behind it.
body {
margin: 0;
height: 100%;
overflow: hidden;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
line-height: 50px;
font-weight: bold;
font-family: Helvetica;
font-size: 30px;
background: darkcyan;
width: 100%;
padding: 0 20px;
color: white;
opacity: 0.2;
}
.content {
margin-top: 50px;
background: #ddd;
height: calc(100vh - 50px);
overflow: auto;
padding: 12px;
box-sizing: border-box;
}
.article {
height: 200px;
width: 100%;
background: #ccc;
margin: 12px 0;
}
<div class="navbar">Navbar</div>
<div class="content">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
Since your page is always at 100% height and the only thing getting scrolled is the content you could just make it absolute instead of fixed.
But since you asked for a solution with a fixed position just add an margin to the content wrapper.
So to be clear: add margin-top: {MENU_HEIGHT}px to the content div, replacing {MENU_HEIGHT} with the actual height of your menu or the desired distance from it.
I'm trying to create a list of items where each item in the list contains essentially two columns ... the left column some text, and the right column 2 buttons for yes/no. I want the two buttons on the right to be vertically aligned with the text. For aesthetic reasons, I want a min-height on the list item. I finally figured out that a floating div must be inside an absolute div for the 100% height to work. The problem is now that I have an absolute div inside my original relative div, it no longer expands to accommodate text longer than min-height. I've read so many articles and tried so many different combinations of height/relative/absolute/float/clear/overflow and nothing has worked for my situation. Is there a solution to this?
In my example here http://jsfiddle.net/THBFY/4/ I need the red box to be the same height as the blue box so that the vertical align works.
<div class="list_container">
<div class="list_item">
<div class="item_text">
My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }
When I add in the inner div with position:absolute http://jsfiddle.net/THBFY/5/ the problem is the height no longer increases to show all of the text.
<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }
But if I now change the min-height of the outer div from 70 to 200 http://jsfiddle.net/THBFY/6/, you can see that the 100% height on the red box is in fact working, so my problem is either in the first situation without the absolute position, I need the red box to stretch, or in the 2nd situation with the absolute div, I need the container to stretch.
HTML:
<div class="list_container">
<div class="list_item">
<div class="item_text">My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
CSS:
.list_container { position: relative; width: 400px; }
.list_item { border: #000000 solid 1px; display:table; }
.item_text { display:table-cell; width: 340px; background-color: #0066BB }
.item_buttons { display:table-cell; width: 50px; background: #FF0000; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif"); }
.button_no { background-image: url("images/no.gif"); }
fiddle
I'm looking for a way to devide my screen perfectly into two divs.
One small fixed sized on the left and one with dynamic width on the right.
I didn't figured out how to do this yet.
Because the width in percentage is not proportional.
For example:
http://jsfiddle.net/acmnU/2/
If you resize the result field or the overall width you see that the green
div will not resize in proportion with the screen.
If the field gets to small the green div slips under the red one.
what I need is some kind of anchor. So that the green div fill the entire screen without
getting to big.
HTML:
<body>
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS:
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
float: left;
margin-left: 10px;
background-color: green;
height: 100%;
width: 80%;
}
I hope I have interpreted your question correctly. You can try this fiddle
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
margin-left: 200px;
background-color: green;
height: 100%;
}
I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.
I advise using a layout framework to ease this type of think. Bootstrap is a good one but there are lots of others.
If you want to do it manually, you need to give the Content class a width, and use relative positioning.
I have 2 divs with the following class names: "red" and "green"
The green div is hidden but when the mouse hovers over the red div, the green div appears.
However, the green div is appearing in front of the red one. I would like to reverse the order so that when hovering over the red div, the green one appears beneath it i.e. I want the red div to overlap the green div (I don't simply want a space between the 2 divs, I want the red div to be over the green one). I actually want to include a background PNG inside the red div so that when the green div appears it is actually underneath the PNG.
The green div is nested inside the red div and my CSS is as follows:
.green{
display: none;
}
.red:hover .green{
display: block;
}
you can change the order of layers with z-index
if you always want the red on to be on top and not put some text on it make it like this:
z-index:9999;
if you want to know more about it, use this tutorial: z-index
I don't see how you can hover over the red div since it's nested inside the green div and that one is hidden, therefor the red div should be hidden too.
But I changed some things.
I used position, z-index and nested the green inside the red div.
HTML
<div class="red">
<div class="green">
</div>
</div>
CSS
.green {
display: none;
background: green;
width: 310px;
height: 310px;
margin-left: -5px;
position: relative;
z-index: -1;
}
.red {
background: red;
width: 300px;
height: 300px;
margin: 5px;
}
.red:hover .green {
display: block;
}
I made the size of the green div a little bigger and added some margin so it would be visible.
Here's a live example http://jsfiddle.net/PaulvdDool/FpsuA/
HTML
<div class="wrapper">
<div class="red"></div>
<div class="green"></div>
</div>
CSS
.wrapper {
position: relative;
height: 50px;
width: 50px;
}
.red {
top:0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background-color:#d42046;
z-index:2;
}
.green {
top: 0;
left: 0;
position: absolute;
display: none;
height: 60px;
width: 60px;
background: #1cc477;
z-index:1;
}
.wrapper:hover .green {
display: block;
}
DEMO:
jsFiddle
I have a div.one which has a fixed size and a background color. Within it is another div which starts off hidden but is shown with javascript in certain circumstances.
How can I make it so when div.two is shown, you can see its background color and the text doesn't wrap? Basically I want it to behave like it doesn't have a containing div with a fixed size. Is this possible? Thanks
<div class="one">
<div class="two">
Some Text
</div>
</div>
.one {
width: 20px;
height: 20px;
background-color: white;
}
.two {
background-color: grey;
display: none;
}
Demo
.two {
display: inline-block;
background-color: grey;
white-space:nowrap;
}
Fix the dimension of the div as well to 20px and 20px, and set the white-spacing to nowrap.
.two {
width: 20px;
height: 20px;
white-space: nowrap;
...
}
Check out this demo to see if I solved your question.