I have a google map that takes up 100% of the width and height of the screen. Well, the height is set to 1000px because I can't get it to go to 100%, but that's another question. Anyway, I want to have the #map div to take up the full screen and display a rectangular box to the right of the screen - this is a div that would have the class set to 'search_box'.
I am having two problems with the html and css in my app:
The rectangular box does show up on the right of the page as I want it, but it shows up UNDER the google map, so you can't see it! I can only confirm this because if I refresh the page, it does show up for a split second before the google map covers it. :(
I want the box to be about 50px lower than the menu above it, but padding-top doesn't seem to do anything. I'm not sure if this is because it's floating. Any ideas?
Also, should the 'search_box' div be inside of the 'map' div?
In my HTML
<div id="map"></div>
<div class="search_box"></div>
In my CSS
.search_box {
background-color: white;
float: right;
}
#map {
width: 100%;
height: 1000px;
padding: 0 auto;
margin: 0px;
overflow: hidden;
}
If you want the search box to float next to the map you'll need to float #map as well. If you want the search box inside of the map, you should wrap them both in a containing div and position the search box absolutely.
To position the search box on the right side of the map, wrap both the divs inside another div.
<div class="map-wrapper">
<div id="map"></div>
<div class="search_box"></div>
</div>
Now use absolute position for the search div to position it on the right side of the map.
DEMO
CSS
.map-wrapper{
position:relative;
}
.search_box {
background-color: blue;
width:100px;
height:200px;
position:absolute;
top:10px;
right:10px;
}
#map {
width: 100%;
height: 1000px;
padding: 0 auto;
margin: 0px;
background-color:#ccc;
}
I can't imagine why you would want/care to position an element beneath another that completely covers it, but: http://jsfiddle.net/3bV3M/5/
Re-order your DOM:
div.search-box
div#map
#map should have position:absolute to take it out of the normal document flow but allow its position to still be controlled. I left .search-box on top of #map so you can see it positioned; to move it behind, remove the z-index: 1;. Note that I enabled css normalisation on the fiddle.
html, body {
display: block;
height: 100%;
position: relative;
width: 100%;
}
.search_box {
background: red;
height: 1.2rem;
margin-left: auto;
margin-right: 0;
position: relative;
top: 50px;
/* use `top` instead of `margin-top`, it doesnt contribute to the box */
width: 5rem;
z-index: 1; /* remove me */
}
#map {
background: black;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
Related
I've got a little css problem.
I got a div with a max-width. In this div there is a img that needs to be positioned outside his div (to the bottom). Unfortunately I can't use position absolute because of the max-width. When I would use position absolute, at some point the width of the screen reaches the max-width and the img with position absolute will go outside the div on the right side.
I know this must sound a little messy, so I've made a Jsfiddle:
https://jsfiddle.net/te93s8h1/
This JS Fiddle shows a example of the issue I got. I need the green block outside the div (at the bottom) but the green block can not go outside the div on the right side. How can I achieve this?
I prefer css only.
Never mind my question, I think I understand what you're trying to achieve. You should add a position: relative; statement to the style block of your .grid class as demonstrated in this JSFiddle.
Just simply try this without using position absolute.
.container {
background-color: #00f;
width: 98%;
height: 100px;
margin: auto;
max-width: 1300px;
}
.grid {
position: relative; /* Added Position */
background-color: #f00;
width: 50%;
margin: auto;
min-width: 600px;
height: 100px;
}
.block_outside_div {
position: inherit; /* Added Position */
background-color: #0f0;
height: 50px;
width: 50px;
left: 45%; /* 45% Percentage value for move from left */
top: 120px; /* 120px value for move from top */
}
<div class="container">
<div class="grid">
<div class="block_outside_div">
</div>
</div>
</div>
How to automatically adjust size of the div which is horizontally centred, using another div which has position: fixed property?
To better understand what I mean please take a look at the picture below. Div A is a fixed div with a fixed size and div B is a div which is horizontally centred. I want div B to resize (when I resize browser window) in a such way so right border of A and left border of B never overlap (ideally, if the distance between the borders kept the same).
I know that this can be fairly easy done using JavaScript by reacting on resize events, but I'm wondering is there any way to achieve this in pure CSS?
Here's another way. This should work in older browsers too.
<style>
div {
border: 1px solid red;
height: 100px; }
#A {
position: fixed;
width: 150px; }
#B {
margin: 0px 155px; }
</style>
<div id="A">Stuff</div>
<div id="B">Stuff</div>
How about this:
#a{
width:200px;
}
#b{
width:calc(100% - 400px);
}
Just set the width of B to be 100% of screen width minus twice the width of A and their borders will touch.
When an element is given the settings position: absolute or position: fixed You can change the width of an element by using the left and right properties.
Simply add the same amount to the right as you would to the left
#left {
position: absolute;
width: 150px;
}
#middle {
position: absolute;
left: 165px;
right: 165px;
overflow: auto;
}
/* For demo purposes */
html, body, div { height: 100%; margin: 0; } div { background: red; } #overflow { height: 200%; }
<div id="left"></div>
<div id="middle">
<div id="overflow"></div>
</div>
My google map canvas, is set to width 80%. The map itself fills 80%, but there's a wide space to the right of the canvas that fills the 20% left of the screen.
Which makes my div unable to be placed there.
html:
<div id="map-canvas" ></div>
<div id="search">Test</div>
css:
#map-canvas {
width: 80%;
height: 100%;
margin-left: 50px;
margin-right: 50px;
min-height: 80px;
min-width: 200px;
margin: 0;
padding: 0;
z-index: 0;
position: relative;
}
#search {
background: #2E2E2E;
float: right;
width: 20%;
height: 800px;
z-index: 1;
}
That's because a div is by default a block element, which means it fills all the width available for it, unless you tell otherwise.
One way is to use float, that "disables" the block property. You tried using it on the search div, but the map div is your problem.
Add a float:left property to the map div and it will do. See here: http://jsfiddle.net/L222L/1/
Just a tip:
What's the point of setting a margin property, if you are then removing it?
margin-left: 50px; <---
margin-right: 50px; <---
/* ... */
margin: 0; <---
I can't seem to get the black box to the center of the screen as opposed to the center of the div its inside in.
EDIT: For clarification, I only want the black box in the center of the results panel not the pink box with it. Also I would also like to keep my javascript intact.
EDIT 2: I'm trying to have something like an overlay that popsup in the middle of the screen when a user clicks on the image. Not sure if this is the best way or the best code to achieve that!
Would appreciate if anyone can help.
Here's my attempt: http://jsfiddle.net/BPLcv/1/
HTML
<div class="tooltip">
<div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
<div class="description">Poop</div>
</div>
CSS
.tooltip {
position: relative;
border: 1px #333 solid;
width: 200px;
height: 200px;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}
.overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.description {
position: absolute;
width: 300px;
height: 300px;
display: none;
background-color: black;
text-align: center;
z-index: 1;
/* centering???? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
Thank you!
If you want the description/overlay in the middle of the screen, your best bet is to use an element outside of your tooltip-elements, as these are fixed width.
If you have a top-element with width: 100%, your centering css wil work for any immidiate children.
Working fiddle: http://jsfiddle.net/BPLcv/4/
Here the overlay is filled with whatever is in the description element of the tooltip you're hovering:
overlay.html($(this).find(".description").html());
The description class is always hidden.
Check this Demo jsFiddle
CSS
body{
margin:auto;
width:50%;
}
Try this. Assign the div of interest id = CenterDiv, then add this css:
z-index:10;//remove left:50%
Now try adding this function via onload or onclick, etc:
function centerDiv() {
document.getElementById("CenterDiv").style.marginLeft = ((screen.availWidth - 300)
/ 2) + 'px';
}
The number 300 can be any number that represents the width of your element of interest.
Substituting the width of your element (here, 300px), this function will center an element with absolute position.
I am experiencing some strange behaviour when attempting the following (see jsfiddle: http://jsfiddle.net/9nS47/).
HTML:
<div id="slider">
<div id="wrapper">
<div id="navigation"></div>
<div id="container">
<div id="button"></div>
</div>
</div>
</div>
CSS:
HTML,BODY
{ width:100%; height:100%; }
* { margin: 0; padding: 0; }
#slider
{
position: fixed;
top: 0;
bottom: 0px;
left: 100px;
overflow-y: auto;
background-color: red;
}
#wrapper
{
position: relative;
height: 100%;
background-color: #000000;
min-height:400px;
}
#navigation
{
display: inline-block;
width: 80px;
height: 100%;
background-color: #0000FF;
}
#container
{
display: inline-block;
height: 100%;
background-color: #00FF00;
}
#button
{
width: 22px; height: 100%;
float:right;
background-color: #CCFFCC;
cursor:pointer;
}
What I am trying to do is making a left side navigation bar that spans the whole visible window height and only Shows a scrollbar if its height is smaller than for example 400px. The scrollbar for that div seems to be always visible due to some resizing problems (there is an extra pixel at the bottom I can't explain[color:red]).
Firefox also moves the second child element below the first when the scrollbar is visible because the scrollbar seems to be part of the content area and thus takes up to around 20px space. This does not happen if Overflow: Auto is replaced with Overflow: scroll however.
ATM changing the layout (specifically the Container with Position: fixed) is not an option.
Don't mind the space between the green and the blue box. Seems to be a whitespace problem.
Since it seems like you are unable to change your 'wrapper' code much, I tried to change your original code as little as possible. In fact, the only thing I did was to add some jQuery.
Check out this updated jsfiddle. I have included jQuery and the javascript I added was this:
$(window).bind("load resize", function(){
//this runs as soon as the page is 'ready'
if($(window).height() < 400){
$("#slider").css("overflow-y","scroll");
}else{
$("#slider").css("overflow-y","hidden");
}
});
Basically, 'onload' and 'onrezise', the jQuery figures out if you should show the scrollbars or not.
The reason that your "auto" isn't working is because of the "fixed" position of the slider element. The browser cannot perfectly figure out the heights.