In short: When I have a container and some inline-block divs, the container's width shrinks around the divs. But when the divs are too-long and therefore one of them goes to another line, the container width is rendered as 100%.
In the picture the default behavior is the first one, whereas the desired behavior is the second one.
Here is a fiddle with the example:
http://jsfiddle.net/gzbx4upq/
See fiddle for desired results
Either use
display:block;
or
display:inline;
or
max-width:250px ;
That seems possible using pseudo classes.
CSS
div {
display: inline;
position: relative;
}
div:before {
content:"";
position: absolute;
left: 0px;
right: 0px;
bottom: -5px;
top: -5px;
background-color: blue;
z-index:-1;
}
div:after {
content:"";
display: block;
}
p {
display: inline-block;
background-color: red;
}
Working Fiddle
Related
I am trying to overlay 2 DIV's in my main parent DIV:
I want to overlay the the second div over on top of the first one. I have a problem overlaying it as I cannot keep it in the middle of the screen.
I have tried this to overlay:
The overlay works fine here, but my container is no longer center when I do this. How can I overlay and keep it center ?
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Here is what you need to do (see width of both divs and text-align properties):
You can give them background color to see z-index works perfectly :)
#first {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 1;
}
#second {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 2;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
When you position absolute, the positioned element is taken out of the document flow and positioned relative to the next highest parent element that is not the default position, i.e. not position: static;
The following will cause the absolute positioned children to stay within the containing div:
#container {
position: relative;
}
Your container's text is no longer centered because you have removed its children from the document flow. In essence, it has no content and collapses, and therefore, has no width to which to align the text.
One thing you could do is set the container to position: relative and full-width (i.e. width: 100vw), then set its children to width: 100%.
Then the inner divs will take on the width of their parent.
See this working JSFiddle.
#container {
position: relative;
width: 100%;
height: 100px;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
#first{
position: absolute;
}
#second{
position: absolute;
}
<div id="container" class="container">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Your main issue is that the divs will not have any relative width to the parent div.
Therefore the text is still technically "centered" in each corresponding div because they're inheriting text-align: center from the container div.
However, the divs' widths will automatically be as wide as they needs to be (i.e. to fit the text, in this case).
You can remedy this one of two ways:
Force the divs to be centered
Give both divs the following (extra) CSS:
left: 50%;
width: 100%;
margin-left: -50%;
This will literally center them in their parent div.
or
Force the divs to be the same size as their parent
Give both the divs the following (extra) CSS:
top: 0;
bottom: 0;
left: 0;
right: 0;
This sets the divs to span their entire parent's height and width.
In both situations, you might need to make the .container class use position: relative, in order for the child divs to have something to be absolute to.
If you're using Bootstrap, there is no need to worry about this, as .container class already has this applied.
Hope one of these solutions helps you :)
Try this style:
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
I've got the following:
<div class="wrapper">
<div class="top">
</div>
<div class="left">
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
With the following CSS:
.top {
position: absolute;
left: 0;
height: 80px;
width: 100%;
}
.left {
position: absolute;
left: 0; top: 80px; bottom: 100px;
width: 200px;
margin-left: 5px;
}
.main {
position: absolute;
left: 200px; top: 80px; bottom: 100px;
width: 84%;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
}
I'd like to keep the footer at the bottom of the page (after left and main, and regardless of how big/small main is), but with position: fixed the footer scrolls up/down as you scroll through the page. I've tried position: absolute and that doesn't push the footer all the way to the bottom. I've tried some of the other solutions found here and none have worked. How can I keep the footer at the bottom of the page (similar to the footer at the bottom of this page)?
Thanks in advance!
Try this:
.footer{
position:absolute;
bottom:0
}
Position absolute moves footer according to the element that contains it. Bottom 0 keeps the footer at the bottom of it's parent.
This will work if the parent of the absolute positioned element has relarive position. To say it more particular, your wrapper needs to have the following code:
.wrapper{
position: relative
}
Fixed does what you're describing, locks elements with your viewport. Absolute makes an element ignore the flow of the rest of your page, so if you want to make it go beneath everything else you'll run into problems. Give this a shot, it'll put it underneath all your content.
footer{
position: relative
width: 100%
float: left
}
If you need it to stay at the very bottom of the screen when you have very short content, you can add a wrapper element around everything and try something like this
.wrapper{
display: block;
min-height: 100vh;
position: relative;
padding-bottom: footer height (set this to how tall your footer is)
}
footer{
position: absolute;
bottom: 0;
}
Give this a go:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
.left {
float:left;
width: 200px;
margin-left: 5px;
}
#right {
float:left;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
And for older browsers:
#container {
height:100%;
}
Don't use position for every <div> you only need to add position to .footer
Here is a working example...
I've got an HTML-File.
As you can see, if you click on an image it opens a box below with some text. That works with jQuery. Is there a way to push the images under the box down?
So that the box never covers an image. Please note that it should be responsive.
Here's the fiddle:
That's the css:
#projekte {
list-style: none;
text-align: center;
width: 100%;
}
#projekte li {
display: inline-block;
margin: 10px 5px 10px 5px;
width: 300px;
}
#projekte img {cursor: pointer; width: 300px;}
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: absolute;
}
don't make the .beschreibung elements absolutely positioned, as this will take them out of the flow of the document. Change your css to:
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
}
Updated fiddle (with vertical-align:top as stated in comments)
You have to change position parameter to relative
.beschreibung {
background-color: #bec3c8;
display: none;
left: 0;
position: relative;
}
And using jQuery, you can set it's width, like:
jQuery(".beschreibung").width("desired width");
EXAMPLE FIDDLE
Also, you need to hide previous image description, like:-
$("div[id^='projekt']").hide();
You can change your CSS Class position: relative
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: relative;
}
So I just found an easy solution. I just put the .beschreibung in a wrap div and set the .beschreibung to 100% width. You can find the updatet fiddle here: https://jsfiddle.net/znt3npqa/9/
I have an angular SPA. Main page is divided into 2 parts - left and right (both have separate scrolls). Left portion have links and right portion displays data for those links.
This is main CSS.
#left, #right {
overflow-y: scroll
}
#left {
margin-top: 75px;
margin-left: 5%;
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 75%;
}
#right {
margin-top: 75px;
margin-left: 5%;
position: absolute;
left: 25%;
top: 0;
float: right;
width: 70%;
height: 75%
}
html, body {
margin: 0; padding:0; border: 0;
overflow: hidden
}
#printSection {
visibility:hidden;
}
Right portion contains a div - #printSection, and a button print. I want to print data of #printSection while user clicks on print button. print css is -
body {
background-color: white;
color: black;
font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
Every thing is fine except clicking on print button showing empty pages for left section data first then the #printSection data.
Why this empty pages are coming for left section data?? Please help me. If you need any more inputs please let me know.
visibility: hidden
Keeps your elements in the document flow, and just hides any content. This is the cause of your problem.
display: none
Removes the elements from the document flow completely.
Angular way you can achieve this instead of CSS
If you don't want to store element in DOM(in your case) use ng-if like
in controller:
$scope.showdivVar=true;
View:
<div ng-if="showdivVar"></div>
As you can see in this jsfiddle, when you click the menu button, the little triangle that points to the button is only shown after the animation has finished. I'd like the animation to start with the pseudo element and only then proceed to the drop-menu element. How can I accomplish this?
A solution doesn't necessarily have to use javascript, CSS3 will be most welcome, I'm not worried about compatibility issues.
You can try this - DEMO
.drop-menu {
display: none;
position: relative;
height: 60px;
top: -20px;
}
.drop-menu ul::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -30px;
left: 30px;
border-width: 15px;
border-color: transparent transparent red transparent;
border-style: solid;
}
.drop-menu ul {
background-color: red;
position: relative;
top: 20px;
z-index: 999;
}
See http://jsfiddle.net/SZWmd/23/
The problem is that while sliding, the element must have overflow:hidden, but then the triangle is hidden too.
Then, you have to slide .drop-menu ul instead of .drop-menu. You could easily do
$('.drop-menu-button').click(function() {
$('.drop-menu').toggleClass('visible');
$('.drop-menu ul').slideToggle();
});
and use this selector:
.drop-menu.visible::before
But the problem is that when is sliding up, the triangle is hidden at the beginning.
Then, you need
$('.drop-menu-button').click(function() {
if($('.drop-menu').hasClass('visible')){
$('.drop-menu ul').slideUp('',function(){
$('.drop-menu').removeClass('visible');
});
}else{
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideDown();
}
});
Edit:
You can also use
$('.drop-menu-button').click(function() {
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideToggle('',function(){
if(!$(this).is(':visible')){
$('.drop-menu').removeClass('visible');
}
});
});
See it here: http://jsfiddle.net/SZWmd/31/