Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to createa a div, who has some links, and a logo image. The thing is that I don't want that the div to resize to the image size. I want that the image ovelap the div. I want something like the image. But when I add the image inside the div, the div size is increased to contain the image.
What you are saying is that you want to remove the image from normal flow. There are several ways to do that:
Float
img {
float: left;
margin: <position it with this>;
}
Floating is handy because it will remove the element from normal flow, while still giving you the option of clearing the float. It will also push the float: right navigation away when near. The only downside is that it's not as powerful as absolute.
Absolute
#nav {
position: relative; /* child positioned in relation to the first element with non-static position */
}
img {
position: absolute;
z-index: 1;
left: <position it with this>;
top: <position it with this>;
}
Absolute completely removes the element from flow, so it won't interfere with anything, including the right navigation (this could be a downside). You can position it accurately with left and top.
Negative Margin
img {
margin-bottom: <some negative number>;
}
This will pull the bottom of the container up, making it look like it's out of normal flow, without the consequences of that. I personally prefer this solution. It will work as long as you can calculate the correct margin-bottom for it to look right.
Plain, fixed height
#nav {
height: <some height>;
}
The simplest solution: just give your navigation a set height.
You can use absolute positioning:
HTML:
<div class="main">
<div class="image">Image Div</div>
</div>
CSS:
.main {
border: 1px solid green;
width: 50%;
height: 50px;
}
.image {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
border: 1px solid blue;
}
You can try it here.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
in the following code <span> has an image which I want to re-size. Also, wrapper should take the height of the resized image instead it takes the size of the original image. Also this problem is only happening in firefox.
HTML
<div class="wrapper">
<label> India </label>
<span class="visa visa01"></span>
</div>
CSS
.wrapper {
width: auto;
border-radius: 3px;
background: #dadada none repeat scroll 0% 0%;
padding: 2px 10px;
display: inline-block;
float: left;
}
label {
display: inline-block;
max-width: 100%;
}
.visa {
width: 1.6em;
top:1px;
position: relative;
}
.visa01 {
content: url("/images/waww/resume/visa01.png");
}
.visa01:after {
position: relative;
top: 25px;
width: 70px;
height:50px;
display: inline-block;
transform: scale(0.4);
content: url("/images/waww/resume/visa01.png");
}
Any idea how to make the height of the wrapper as the new height of the visa01.
At first glance the issue is due to the transform property. I'm not sure why you are utilizing a transform property when declaring a static height and width. Try omitting the transform in place of a manually adjusted height and width (since you were statically declaring these anyhow) and you may no longer have this issue where the original image "container" so to say is getting set dimensions, yet then being transformed afterwards (and the new dimensions now picked up by the wrapper).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
In the below code,
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
float: left;
color: black;
}
#one{
background: red;
}
#two {
position: absolute;
background: yellow;
}
#three{
background: green;
}
#four{
background: blue;
}
--
box "two" being absolutely positioned and being away from the flow of the document, box "three" & "four" are taking place of box "two", due to which, box "two" is displaced as last element, as shown below, which looks good,
But in the below code,
<div id="parent-div">
<div id="default">Default</div>
<div id="centered">Centered</div>
<div id="centered-text">Centered Text</div>
</div>
<div id="top-left-pos">Top Left
</div>
<div id="another-pos">Another pos
</div>
#parent-div{
background: #B3bEb5;
border: 0.1em solid black;
}
#default{
background: #DBE9F4;
}
#centered{
background: #89CFF0;
width: 50%;
margin: auto;
}
/* text-align: left, right, center, justify */
#centered-text{
text-align: center;
}
/* Absolute Positioning : Positioning Based on the Document */
#top-left-pos{
background: #89CFF0;
border: 0.1em solid black;
position: absolute;
width: 200px;
height: 100px;
float:left;
}
#another-pos{
background: #FF0000;
border: 0.1em solid black;
float: left;
width: 190px;
height: 110px;
}
top-left-pos element is absolutely positioned and away from the flow of the document, another-pos element does take the place of top-left-pos element but does not displace top-left-pos element? instead another-pos element is rendered beneath top-left-pos element, as shown below, Why top-left-pos is not displaced, unlike first scenario of box "two"?
How float and position work together?
They don't. An absolutely positioned element cannot float. A floating element cannot be absolutely positioned.
When an element is specified to both float and position: absolute, the latter takes precedence and the element does not float. Though unrelated, the float: left in your first scenario takes precedence over the display: inline-block as well. The spec has an entire subsection detailing how display, position and float work together.
Why top-left-pos is not displaced, unlike first scenario of box "two"?
Because box "two" in your first scenario is being displaced by floating elements. In your second scenario, there are no floats to displace that element. All you have are two absolutely positioned elements that are unaware of each other.
Float is nothing to to do with stacking elements in a 3D environment. As per the explanation on MDN:
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
You may be wanting the z-index property instead, if you're looking to stack your elements on top of one another. You will also need to take them out of flow in order to do this, by using position:absolute.
Update
Frustratingly, you've edited your original question with some quite major changes. The crux of these changes begs the question:
What is the relationship between float, position and display?
Thankfully, you can go and read-up about that here. Please do so. Stack Overflow is not a place you can come to learn everything you want to know about anything.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How to place the Scroll button to the bottom of the first page?
Using bootstrap code and not using extra CSS.
Example site
This is what I mean:
you can use position fixed? that would keep it at the bottom of the page
button{
position:fixed;
bottom:20px;
}
https://jsfiddle.net/Lf5o705a/
or position absolute would keep it at the bottom of the first section
button{
position:absolute;
bottom:20px;
}
https://jsfiddle.net/Lf5o705a/1/
I don't think bootstrap has anything built-in for this.
If you want to write some css, consider the following example:
HTML:
<div class="outside">
<div class="inside"></div>
</div>
CSS:
.outside {
height: 300px;
background-color: #eee;
position: relative; /* This allows you to position something absolutely within this element. */
}
.inside {
height: 50px;
width: 100px;
background-color: #ccc;
display: inline-block;
position: absolute; /* This allows you to specify the position within the parent element */
bottom: 10px; /* will be located 10px from the bottom of 'outside' */
/* This is a method for centering an absolutely positioned element */
left: 50%;
margin-left: -50px; /* Half of the width, so that it can be centered
}
Example fiddle
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a problem with my school project. I want to make two columns on my page using css, but nothing is working...
Website : http://kitlab.pef.czu.cz/~wbdinfo141528/
CSS : http://kitlab.pef.czu.cz/~wbdinfo141528/css/style.css
I hope that there is some dumb mistake, but I can't figure out, where the problem is.
I want to place the right column next to the left one :
Your margin was taking up the entire row, that's why the second div was pushed down. You don't need margin, just set the width and display it as an inline-block. The inline-block means it'll still be a block, but will wrap like text - so if there's enough space for the second div to be in the same row as the first, it can be.
Replace CSS with this, comments for what was changed.
div.leva {
background: blueviolet;
/* float: left; */
/* margin: 5px 500px auto auto; */
width: 49%;
display: inline-block;
}
div.prava {
background: yellow;
/* float: left; */
/* margin: 5px auto auto 500px; */
display: inline-block;
width: 49%;
}
Alternatively, you can use a relative container div and set that to 100%, and have two absolute divs inside the container with 50% width.
HTML
<div class="container">
<div class="leftdiv"></div>
<div class="rightdiv"></div>
</div>
CSS
.container {
position: relative;
width: 100%;
}
.leftdiv, .rightdiv {
position: absolute;
width: 50%;
top: 0;
}
.leftdiv {
left: 0;
}
.rightdiv {
right: 0;
}
You must add margin:0 in div leva et prava http://jsfiddle.net/rvp5js2w/
At first glance your floats are incorrect.
The purple is floated right while the yellow is floated left.
Set a width (where width is less then total width of stranka/2) for each of these div's and then float them correctly and it should line up.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
As per my knowledge, Absolute positioned element and floated element are removed from the normal flow of html (correct me if i am wrong).
Here's my jsFiddle
Here's my code:
<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>
my css:
.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
when i write anything inside my main-area why does the right-sidebar slides to down.
Add a top property to the side bar
.right-sidebar {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
When position absolute is specified you are expected to position the element, meaning you must set its top, bottom, left and right properties to the values you desire. If one of these properties is not set the browser positions them, since they will be set to auto.
As they have told you, put top:0 to fix it.
Ok, the reason:
Check this link: http://dev.w3.org/csswg/css-position/#abs-non-replaced-height
The section you are looking for is the 2nd rule: (emphasis added by me)
If ‘top’ and ‘bottom’ are ‘auto’ and ‘height’ is not ‘auto’, then set
‘top’ to the static position, then solve for ‘bottom’.
And that is the reason. Remember, top defaults to auto not to 0.
Add top:0; to your right bar. It should not longer push down after that.