I have a div which has a table which has a google map.
I want to place a info box within the google map external to the map, just floating on top
But I can't seem to get it right, the info div just pushes around the google map despite being on top of the map...
CSS
.google_map {
height: 270px;
width: 100%;
}
#flightMapInfo {
position: relative;
float: left;
z-index: 100;
color: #FFFFFF;
top: 30px;
left: 50px;
background:#5a85a5;
padding: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
div.tabContent {
border: 1px solid #c9c3ba;
padding: 0.5em;
background-color: #f1f0ee;
min-height: 300px;
}
.tableLeft {
width: 75%;
float: left;
border-right: dotted 2px black;
}
HTML
<div class="mapBlock tabContent">
<div id="flightMapInfo">WHARGL</div>
<table class="tableLeft">
<tr><td><div id="flightMap" class="google_map"></div>
</table></td></tr></div>
I wanted to comment on #scunliffe's answers, but this is rather lengthy.
Float says to browser, that rather than normal behaviour, divshould be either left or right and the rest of content should flow around (think: Images in *.doc).
Your problem is, that you confuse english 'float' [To remain suspended within or on the surface of a fluid without sinking] with css' 'float' [stay to 'left' or 'right' border and flow rest of website content around]
What you want to do is take the div out of normal flow of webpage (thus: position:absolute) position it.
Hint:
absolute is relative to 0;0 of first found ancestor, which is relative or absolute. Relativeis relative to 0;0 of what would be position in normal flow.
Relative divs* act as if they were on their original place , they are just rendered shifted. Absolute divs* are taken out of flow of website and position accordingly to hint above.
by div, I mean any styled tag
I apologize if you know all this and just can't make it work.
EDIT
In position:absolute; this means first found ancestor:
<body>
<div id="wrapper">
<div id="innerWrapper">
<div id="content">
and two CSS cases:
1.
#content { position: absolute; top: 10px; left: 20px; }
2.
#innerWrapper { positon: absolute; top: 200px; left: 200px; }
#content { position: absolute; top: 10px; left: 20px; }
In case one, since nether #wrapper nor #innerWrapper have set position, first absolute or relative ancestor in tree is body, thus positioning of 10px;20px is made from 0;0 of body (read: viewport) - #content is at 10;20 of window.
In case two, #innerWrapper is set absolute, thus making 200;200 of window a point, which is understood as 0;0 when positioning #content. Therefore (absolute ancestor found), content will be at 210;220 of window
Example: http://jsfiddle.net/3dq6V/
I think you are looking for position:absolute; not float:xxx.
Float just indicates that it will "flow" with the other elements on the screen... you want it to float above the other content and not be constrained by it, thus you want absolute positioning.
Related
Please take a look at the attached image, it makes it easier to understand.
In general the question is just how to absolute position an element left:100% while making it appear a bit less than 100%. Margin doesn't seem to work in absolute positioning.
I created a resizeble element with jQuery, and there is a right 'bullet' for the user to resize the element. I don't want to bullet to be on top of the container's border, so I set its position to absolute, and left: 98%.
Problem is - resizing the element takes the bullet to the left or right of the container's end, depending on its size (because the position of the bullet is set in percentages). Only 'solution' is to set its 'left' to 100%, but then the bullet is on top of the div. Adding a non breaking space after the bullet also didn't work since I had to set the left to 98% to contain both the bullet and the space.
What do you think? Is there a simple solution I didn't come up with?
Thanks in advance,
OmerImage
Edit: Jila here offered a simple solution of using calc:
#myContainer {
position: relative;
display: inline-block;
box-sizing: border-box;
}
#bullet-right {
position: absolute;
left: calc(100% - 16px);
margin-right: 10px;
top: 40%;
color: blue;
z-index: 5;
}
I tried 100% - 10px without the calc before and it didn't work obviously
Hope it can help others and thanks Jila
left only works on a positioned element. That is to say, any element that does not have the default static positioning. In addition to this, you should never set left: 98%; you should set right: 2% to prevent any confusion.
If you want to set a left offset on a dynamic element, you're looking for margin-left.
This can be seen in the following:
.container {
border: 1px solid black;
padding: 20px;
}
.text {
border: 1px solid black;
margin-left: 5%;
padding: 5px;
display: inline-block;
width: 85%;
}
input {
margin-left: 2.5%;
}
<div class="container">
<input type="radio">
<div class="text">Text</div>
</div>
how to absolute position an element left:100% while making it appear a bit less than 100%.
Don't use left: 98%;. Use right: --;. Since, as you state, percentages are dynamic, decide on a fixed value for the element offset. For example if you choose 10px the element on the right would be right: 10px and the element on the left would be left: 10px;.
If you really really want to use left for the one on the right use left: calc(100%-10px);, but there's no real reason for doing that when you can use right.
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
I'm making a pong clone using HTML/CSS/Js. I've set a div element to act as a border for the game, just to keep things in a confined space. How do I get elements (for example, a scoreboard) to act relative to their parent element? For example, if I tell the child to move 50% left, it moves to the center of the parent-div, and NOT to the center of the web-page. Basically I want the child confined by the dimensions of their parent (haha). It seems like
child-div {
position:relative;
}
in CSS would do the trick, but it's not...maybe it's because I'm developing in CodeAcademy's IDE?
position:relative means relative to itself not parents/children etc. It seems likely that you want relative on the parent and possibly absolute on the children. Without code, it's hard to help much further
Here's a quick demo for you.
.container {
width: 80%;
height: 250px;
margin: 0 auto;
position: relative;
border: 4px solid green;
}
.scoreboard {
width: 200px;
height: 50px;
background: lightblue;
border: 2px solid grey;
position: absolute;
top: 10px;
/* just for a bit of space */
left: 50%;
/*almost centered*/
margin-left: -100px;
/* half of known width */
}
<div class="container">
<div class="scoreboard"></div>
</div>
Note...there are other centering methods for absolutely positioned divs depending on whether the width is known and browser support requirements
left: 50%; does not center an element...it moves the element's top/left corner to the center of the containing element. You have to move it back half of it's width (if known)...see above.
One final point....positioned elements are not constrained to their ancestor elements but rather positioned in relation to them. It's quite common to have positioned elements outside the bounds of parents.
I am playing around to make an HTML/CSS carousel.
HTML:
<body>
<div id="container">
<div id="wrapper">
<div id="d1" class="box"><p>DIV#1</p></div>
<div id="d2" class="box"><p>DIV#2</p></div>
<div id="d3" class="box"><p>DIV#3</p></div>
<div id="d4" class="box"><p>DIV#4</p></div>
</div>
</div>
</body>
CSS:
.box {
height: 100px;
width: 100px;
margin: 15px;
border: 2px solid black;
color: black;
float: left;
}
#container {
width: 150px;
height: 144px;
overflow: hidden;
border: 2px solid black;
}
#wrapper {
height: 140px;
width: 555px;
border: 2px solid green;
position: relative;
left: 0px;
}
#d1 {
background-color: blue;
}
#d2 {
background-color: red;
}
#d3 {
background-color: green;
}
#d4 {
background-color: yellow;
}
Here's the fiddle: http://jsfiddle.net/97jhB/.
I intend to add javascript controls and provisions for left/right buttons later.
First, I just want to learn conceptually how it works.
I am trying to get the carousel 'effect' by playing with the wrapper's left.
If I go on decreasing the wrapper's left, I will be able to see the boxes successively.
I have a couple of questions:
If I don't set the wrapper's position to relative, changes made to it's left do not take effect. Why is that so? Isn't the wrapper supposed to be relative by default?
If I play around with the wrapper's margin-left instead of left, it seems to work as desired.
What is better between these two approaches: playing with left or playing with margin-left?
Because only relative, absolute and fixed positioning use left, right, top, and bottom to define their locations relative to the current context they are in.
Fixed is relative to the viewport, absolute is taken out of the normal page flow and relative to the first parent with a CSS position set on it, and relative is just relative to the nearest block-level ancestor.
static is the default position and uses margin-left, margin-right, etc to position the element relative to other elements in the page flow, within the nearest block-level ancestor.
Also, be aware that position:fixed does not work as expected on older mobile devices.
MDN has great documentation on this subject.
When you assign the position:relative CSS declaration to a div, you're not actually moving the space it takes up on the page, just where it is displayed.
However the default position is static for any html element if not specified explicitly.
position: static;
Check out this link on SO for a very complete explanation of the margin-left v/s left difference
Difference between margin-left and left
Static is the default, and the best thing to do is to have the wrapper relative and the items absolute, this way overflowing items won't go to the bottom (~ won't create new lines)... You'll have to remove float:left if you want to follow this path.
It's probably better to use left (or right if RTL), what if you want some margin between that your carousel slides, think of the scenario where you have more than one visible item.
I'm trying to place a button. I have its position set to absolute, so I can't figure out how to place it properly.
Its the button that says "Is this your product?"
See an example here: (removed)
I want it to be placed right on top of the widget in the right sidebar with 5px spacing all around. How do I do that?
I originally took the button from here: http://cssdeck.com/t/uHhhprW6
Appreciate the help.
if your Button will be always in same place so you can do it with:
.but {
position: absolute;
width: 80px;
height: 25px;
background-color: #DEDEDE;
right: 0;
margin: 5px;
}
And just edit your right or top whatever you want. little example
The quickest way I could get it to work was remove the top, left, float, and margin-left declarations from your .email rule, and change its position to relative.
.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}
I would imagine there are much cleaner/simpler ways to make this particular button - there seems to be a lot of absolute positioning going on with the containing element and its children. But the changes I have suggested seem to work as a quick fix.
When an element has position: absolute, you have to position it using left, right, top and bottom. The values you use on this properties should be relative to the closest positioned ancestor (a "positioned" element being one with a position value other than blank or static).
Consider, for example, the following HTML:
<div id="container">
<div id="position_me"></div>
</div>
And the following CSS:
#container {
width: 500px;
height: 500px;
position: relative;
border: 1px solid green;
}
#position_me {
width: 20px;
height: 20px;
position: absolute;
left: 100px;
top: 100px;
border: 1px solid red;
}
The red box will be 100 px from the top border of the container, and 100px from the left border of the container.
See working example.
If you use position: absolute on the button, you can specify it's location using the top, right, bottom and left properties. For example, to position an element with the id button to the top right of a page, with 5px spacing both on top and at the right, you could use this CSS code:
#button {
position: absolute;
top: 5px;
bottom: 5px;
}
If you just want the element to go to the right side of the parent element, you should use float: right. Then you can use margin-top, margin-right, margin-bottom and margin-left to make sure the element gets some margin around it.
See my example Fiddle for the difference. Note that both 'buttons' are within the same div in the HTML code, but the absolute positioned one appears to be outside of that block.
Have a look at this article for more information on CSS positioning.