I have a 800 x 600 rotatable image with forward and back buttons repositioned to the sides. The height of the div is suppose to be 600px, but the actual height of the div was pushed to 690, including the height of the button image. And the div was blocking a row of clickable menu on top. So I made the div height to 518px and moved top -75px to get the real dimension I want. But I feel dirty doing this... Is there a correct way to do this? Or is this workaround more or less correct? Below is the code. Thanks!
<div class="Content Wide" id="LayoutColumn1">
<div style=" width: 980px; height: 518px; display: block; position: relative; float: left;">
<img src="/template/img/next_button.png" style="position: relative; top: 200px; left: 5px; z-index: 2;">
<img src="/template/img/chef_special_large.png" id="main" style="margin: 0 0 0 50px; position: relative; float: left; top: -75px; z-index: 1;">
<img src="/template/img/next_button.png" style="position: relative; top: 200px; left: 787px; z-index: 2;">
</div>
</div>
If you do not want your next/previous buttons to affect the flow of other content, you should use position:absolute inside a container with position:relative.
Related
I have 2 main divs, one will be displayed while the other is hidden. When the hidden div appears, the previous one disappears. I know how to do that, using display block and none.
Divs A and B cover the whole screen. There should be no scroll bars showing, everything should be contained fully in what is visible in the browser window.
However, when div A is showing, the div C is also showing, even though div B (its parent) is hidden. Why?
<div id="A" style="display: block; width: 100vw; height: 100vh;">
Stuff
</div>
<div id="B" style="display: none; width: 100vw; height: 100vh;">
<div id="C" style="position: absolute; width: 25px; height: 100vh; left: 0px; top: 0px;">
<div id="D" style="position: absolute; width: calc(100vw - 25px); height: 100vh; left: 25px; top: 0px;">
</div>
Add position relative to B tag to avoid C tag from jumping to A as new parent.
Stuff
I'd like to align a child div inside a parent div (header-image as background image) centered vertical and horizontally to the bottom.
<div id="header-image">
<div class="row">
... Content
</div>
</div>
I found a solution for horizontal centering:
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%;">
... content
</div>
</div>
But no idea how to get the content to the bottom (works only with position:absolute)
For better understanding on http://webstopp.de/ you can see a header-image and some text in it but the text has to be on bottom of the header-image div.
#header-image {
background: url("http://placehold.it/200x200&text=[banner img]") no-repeat;
height: 200px;
width: 200px;
position: relative;
left: 0;
bottom:0;
}
.row {
position: absolute;
left: 50%;
bottom:0;
}
.inner {
position: relative;
left: -50%
}
Fiddle
Try this for your child div: margin-top: 99%;
I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div.
What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other.
My idea was to give each div the same top position, an increasing z-index and an increasing left position (according to the time of the event). Later I would pop individual divs out by mouse-over events to visualise the overlap.
What I do is to make it so each div gets placed under the next one. With fiddling of the top attribute I can get them to align horizontally, but I don't see the pattern.
<div class="day">
<div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
<div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
<div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
</div>
If I use absolute positions, the elements fly out of the surrounding div and are positioned absolutely at some place in the page.
It's simple. Make an inner div using absolute positioning but wrapped with a div that uses relative positioning:
<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
<div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
<div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>
You can use another method like negative margin, but it's not recommended if you want to dynamically change HTML. For example, if you want to move the position of the inner div(s), just set the top/left/right/bottom CSS properties of the container or modify the properties using JavaScript (jQuery or otherwise).
It will keep your code clean and readable.
Use Negative Margins!
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>
Fiddle: http://jsfiddle.net/vZv5k/
Another Solution:
Give the .day class a width, height, and position it relatively, keeping the inner divs absolutely positioned.
Check out the below CSS:
.day {position: relative; width: 500px; height: 500px;}
And the HTML:
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>
I found the solution. It's probably blindingly obvious to anyone who knows css.
I thought I could not use absolute positioning because my elements would fly out of the surrounding div.
Turns out, I misunderstood absolute positioning. It's not the same as fixed, but to me it looked like that.
https://developer.mozilla.org/en-US/docs/CSS/position explains it well.
Absolute positioning positions absolutely to the next surrounding anchor. That defaults to the whole page, if no other anchor is defined.
To make something a anchor it needs to be position: relative;
Quick solution
add position: relative; to the day class and using absolute positioning in the inner div.
With the top attribute, you can also move relatively positioned objects. In my code sample the red box overlaps the green box due to it's z-index. If you remove the z-index, then the green box is on top.
HTML:
<div class="wrapper">
<div class="box one"></div>
<div class="box two"></div>
</div>
CSS:
.wrapper {
width: 50px;
height: 50px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
position: relative;
}
.box.one {
background-color: red;
z-index: 2;
top: 0px;
}
.box.two {
background-color: green;
z-index: 1;
top: -50px;
}
I have some divs which contain an image that fills the whole div:
<div class="callout">
<img src="images/callout_image.gif" alt=""/>
</div>
.callout { float: left; width: 267px; height: 114px; }
Now I want to put another image in this DIV which overlaps part of the original image AND will also "pop out" of the DIV, i.e. it will extend beyond the dimensions of the DIV but the DIV itself does not extend.
I am having trouble doing this, can anyone help?
Something like this:
<div class="callout">
<img src="images/callout_image.gif" alt=""/>
<img src="images/callout_image.gif" alt="" class="pop" />
</div>
.callout { float: left; width: 267px; height: 114px; position: relative;}
.pop {position: absolute; top: 50%; left: 50%; z-index: 1;}
You might need to set overflow: visible on the div depending on the circumstances.
Ok so I have a website and the entire thing is wrapped in a container. This container is centered with margin:auto. I would like to float a piece of content to the right of this centered container and have it sort of stick to the side of it no matter if the user resizes the browser window, etc. I'm wondering if there's a real simple way to do this rather than adding another huge div, giving it width and floating the centered portion to the left and the piece of content to the right. Thanks!
Piggybacking on #NickAllen, you want to use absolute positioning so that the width of the sidebar isn't included in the centering on the primary container.
#container {
position: relative;
width: 500px;
border: 1px solid #f00;
margin: 0px auto;
}
#sidebar {
position: absolute;
width: 200px;
right: -200px;
border: 1px solid #0f0;
}
<div id="container">
<div id="sidebar">
[ sidebar content ]<br>
[ sidebar content ]<br>
</div>
[content]<br>
[content]<br>
[content]<br>
</div>
Maybe I'm misunderstanding your question, but isn't this what you want:
#container {
width: 960px;
margin: 0px auto;
}
#sidebar {
float: right;
}
<div id="container">
<div id="sidebar">
some content
</div>
</div>
Give the container div the property position: relative; place your floating div as the first child of the container div and give it
#floatingDiv
{
position: absolute;
top: 0;
right: -{widthOfFloatedDiv};
}
I think that will work, but untested
Okay so tested it and it works
<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;">
<div style="position: absolute; top: 0; right: -200px; width: 200px;">
<p>Floated DIV</p>
</div>
<p>container div</p>
</div>
Old question, but contributing since other answers were kinda lacking that "something" and it's still on top of Google. The simplest, cleanest way to achieve this is with two wrappers.
<div class="bigWrapper">
<div class="sidebar">Hello, I'm your sidebar</div>
<div class="smallWrapper">
Put the thing you want to center here.
</div>
</div>
With the following css:
.bigWrapper {
width: 1000px;
height: auto;
margin: auto;
}
.smallWrapper {
width: 500px;
height: auto;
margin: auto;
}
.sidebar {
width: 250px;
float: left;
height: auto;
}
Floating is the way to go for this. They will always stick together, unless the container is smaller than the sum of their widths.
Tip: make sure your container is wide enough to hold both inner divs; if not, and the user has a narrower window, they will show one below the other.