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; <---
Related
I am trying to get a full width background or image behind floated items within a max-width container. The page will be responsive so I can't fix the height of the .item objects nor be sure how many will be shown on each row.
I'd like to have a background or image running full length of the window aligned to a position in the .item div. I can use a very long div or image offset to the left without any issue but the right side makes the browser scroll which I don't want.
.bg {
background: red;
bottom: 0;
height: 30px;
left: -1000px;
position: absolute;
width: 2000px;
z-index: 0;
}
Fiddle here: http://jsfiddle.net/K8uAh/4/
The red banner is my background, see how it runs off to the right.
Ideally I would do this just using CSS, I know if I have to go the JavaScript route it all gets a bit clunky on the window resize.
You can use the .container. If you don't want the container to extend the entire width you need to remove overflow: hidden; and add it to an additional wrapper div.
body {
width: 100%;
margin: 0;
}
.container {
overflow: hidden;
}
Hi I tried on your fiddle and altered the width and the left attribute to have percentage instead of px as if we are dealing with px then it will be hard to make it responsive.
Code:
.bg {
background: red;
bottom: 0;
height: 30px;
position: absolute;
width: 125%;
left:-16%;
z-index: 0;
}
Fiddle: http://jsfiddle.net/K8uAh/1/
You can use a clear-fix div at the end of .item.
body {
width: 100%
}
.container{
background: red; /* Change your color here */
margin: 0 auto;
width: 100%
overflow: hidden;
}
.item{
background: #999;
float: left;
margin: 10px 5%;
position: relative;
width: 40%;
}
Fiddle
First : your fiddle css is incorrect :
body {
width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/
see what i mean
second : to have a full width bg use:
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
container class should be :
.container {
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
margin: 0 auto;
max-width: 300px;
overflow: hidden;
}
working demo
Examining this HTML:
<div class="wrapper">
<div class="content">
</div>
</div>
<div class="footer">
<hr />
<p>some text</p>
</div>
and CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
padding-bottom: 100px;
background-color: blue;
height: 100%;
}
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
html, body {
width: 100%;
height: 100%;
}
You can see that footer have position absolute and stay at the bottom of the page. wrapper will cover the remaining space and contain a content inside it. I want to vertical-align content without breaking the current layout. Do you have any suggestion?
Here is JSFiddle link. (Note: jsfiddle doesn't work as expected, there always a space beneath footer, this behavior doesn't occur when run the HTML file in browser).
Note: I don't want to use fixed height for wrapper, I want it covers all the remaining space, so please don't suggest me to use line-height
I tried the example here but it doesn't seem to work
NOTE I want the layout easy to modify (like add a header or content at the top) without breaking it therefore I want to avoid using absolute position on wrapper and content
NOTE 2 Sorry for not to clarify, actually, content doesn't have fixed size, its size depend on the content inside it, so the solution using negative margin doesn't work as I mentioned above
Here is one approach using the following CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
background-color: blue;
position: absolute;
top: 0;
bottom: 100px;
left: 0;
right: 0;
}
.content {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Use absolute positioning and then negative margins, since your content has well-defined
dimensions, this is relatively straightforward.
See demo at: http://jsfiddle.net/audetwebdesign/DgUV2/
For .wrapper, use the top, bottom, left and right offsets to stretch the div to the
full width and height, taking into account the 100px for the footer.
For .content, set top and left to 50%, the center point of the .wrapper and then adjust
for the center of the .content div using negative margins.
Remember to zero out the margin for the body or else you might see 10px whitespace
depending on your browser.
Add this to your .content
position: relative;
top: 50%;
transform: translateY(-50%);
Just 3 lines of code to vertical align
I was able to get it to work using Method 1 from the example you linked
I added the following:
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
/* THE BELOW WAS ADDED */
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
html, body {
width: 100%;
height: 100%;
/* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */
margin: 0;
}
jsFiddle of working example
I have the following html:
<body>
<h1>Something</h1>
<img id="myid" src='images/bigimage.png'/>
<div id="container">
<div id="fast-back">
<p class="big-font">SOMETHING</p>
<p class="small-font">SOMEThiNG ELSE</p>
</div>
</div>
</body>
And the CCS for it is:
html {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background: url(images/body-background.png) top no-repeat;
min-height: 860px;
height: 860px;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
color: white;
visibility: hidden;
}
#container {
margin: 0 auto;
padding: 0;
position: relative;
min-width: 1336px;
height: 860px;
width: 1336px;
}
#myid{
position: absolute;
left: 50%;
right: 50%;
margin-left: -1280px;
margin-right: -1280px;
z-index: 1004;
}
#fast-back {
position: relative;
margin-left: 15%; /*it moves even using pixel*/
top: 272px;
z-index: 99999;
text-align: center;
width: 126px;
}
However, when I resize the browser window, the "fast-back" div moves to the right.
How can I prevent this behaviour?
Thanks!
Looking at #fastback CSS rule, you are using percentage instead of pixels on margin-left. Change it to pixels as unit of measure.
If you are using percentage as unit of measure, the left margin of the element, in your case, will move in relation to the viewport.
And if you are using pixels, on the other hand, the margin stays on the same location, even if the browser is resized.
Update
The solution is remove the width of the #container. See the following link.
http://jsfiddle.net/jlratwil/LB8rf/1/
The reason why the first solution does not work because the width of the container is set to 1336 pixels and centered aligned via margin: 0 auto. If the browser viewport width reaches beyond 1336 pixels during resize, the #fastback element will move.
I'm working to center #child within #parent at 100% height and width. Why does setting the #child top position to 10% work, but using 10% as a margin-top does not?
http://jsfiddle.net/rbtstudio/SCmfG/
<style>
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
#parent {
width: 100%;
height: 100%;
background-color: #323232;
}
#child {
width: 80%;
height: 80%;
background-color: #eaeaea;
margin: 0 auto;
position: relative;
top: 10%;
}
/*
#child {
width: 80%;
height: 80%;
margin-top: 10%;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
*/
</style>
<div id="parent">
<div id="child"></div>
</div>
The issue here is called "collapsing margins". You can read more about them in the css spec.
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
It's not that the margin isn't working, it's that the margin is collapsing, causing the margin to apply to the top of the parent box.
You'll notice that when the margin is applied to the child, the parent is moved down.
http://jsfiddle.net/SCmfG/4
One workaround (of many) to avoid the collapsing of margins is to add overflow: hidden to the parent element:
http://jsfiddle.net/SCmfG/5/
EDIT: Another important point to keep in mind (which was in another answer which has since been deleted) is that all percentage margins are based on a percentage of the width of the element, even top and bottom.
I have a container # 900px width and then inside that I have an header at 100% width but it only takes 100% of the container, how can I make it take the whole entire page and ignore the container without taking it out of the container html tags?
#container {
width: 900px;
margin: auto;
padding: auto;
position: relative;
}
#header {
background-image: url(pat.png);
background-repeat: repeat;
padding: 0px;
margin: 0px;
height: 150px;
width: 100%;
}
Use absolute positioning. The header element would then be sized and positioned according to the nearest parent who has position: relative; defined (which by default is the <body> element). Like so:
#header {
position: absolute;
left: 0;
right: 0; /* it will span from the left to the right edges */
height: 100px; /* it helps to set a fixed-sized height too, but this isn't required */
}