I'm trying to achieve an image flowing out of a div. Basically, in my heading I have a fixed width of 960px, the logo image has something coming off of it, which I would like to sit outside that 960px.
Is there a nice clean method of achieving this?
The simple method of doing it (that works in most browsers), is that you make your main wrapper have position:relative, and the make the div (that you want to flow outside) have position: absolute; left: -25px; top: -25px;.
Having position:relative as the wrapper makes the position:absolute relative inside the parent container.
put your logo in fixed div and give that div a style overflow:hidden
You could also absolute positioning to achieve this. Quick example below:
http://jsfiddle.net/spacebeers/9QJ4w/1/
You can use the position property of CSS to accomplish this:
HTML:
<div><p>Some content<img src="http://placehold.it/50x50"></p></div>
CSS:
div
{
width: 100%;
height: 175px;
}
div p
{
width: 960px;
margin: 0 auto;
background-color: #333;
height: 175px;
text-indent: 20px;
}
div img
{
position: relative;
right: 140px;
}
http://jsfiddle.net/FpTDc/
Your friend will be overflow:visible.
Your containing div will have the 960px width with overflow:visible. Inside, you will have a relatively or absolutely positioned image (you will need to offset 'left' to center it)
<div>
<img src="" />
</div>
div { width:300px; height:100px; background:red; margin:100px; }
img { width:100px; height:100px; background:green; margin:-20px 0 0 -20px; }
code: http://jsfiddle.net/cSQrR/
Related
This is my HTML:
<div id="mitte"><img id="img_mittig" src="tienda.png" /></div>
And this my css:
#img_mittig{ display: block; margin-left: auto;margin-right: auto;}
The img is center right, but when I try, for example, to move down the image with top: 200px;, it doesn't work. Why ?
You need to add position on your element to be able to use top.
So for example:
#img_mittig { position: relative; top: 200px; }
top:200px will only work with position:absolute or position:relative; or position:fixed
what you are trying to achieve can be achieved using margin-top:200px;
You cant move block element with no positioning with "top, left, right, bottom". Use margins and paddings. For example margin-top: 200px;
If you want move img by setting top: 200px then set position: relative for img.
I'm new to this world, but loving it so. Please excuse my newbie status if I ask ridiculous questions or if things are not posting quite right. Please advise as you see fit.
I am trying to get a button to float over an image. I've brought the image in as an in-line element so that I can preserve the PSD link in Dreamweaver, rather than bringing it in as a background image and for the alt attribute applications. I'm guessing the problem is that I want the inline image to act as a block? Is that right? I've been able to get the button to float over the image using relative positioning for the button and absolute positioning for the image, but then am unable to center the whole thing on the page. Any advice you have is greatly appreciated!
CSS
#container {
margin: auto;
display: block;
}
#button {
width: 100px;
height: 100px;
background-color: blue;
float: left;
position: relative;
}
HTML
<body>
<div id="container"><img src="index.jpg" width="1200" height="900" /></div>
<div id="button"></div>
</body>
Move your button div inside your content div:
<div id="container"><img src="index.jpg" width="1000" height="900" /><div id="button"></div></div>
And then change your container to be the width of your content. Position set to relative. Then, position the button inside the container div with absolute, top, and left.
#container {
margin: auto;
display: block;
width:1200px;
position:relative;
}
#button {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top:0px; left:20px;
}
with css, can I put a div under another div without using absolute positioning?
I have these two divs, and I would like the solid white one to appear directly under the one with the yellow opacity (but not direct in the corner, at the corner of the outline).
How can this be accomplished. I've been experimenting with z-index and relative positioning, but to no avail.
Thanks
http://jsfiddle.net/loren_hibbard/WtGsv/
Without using positioning, I added a style to your content div using negative margins:
.content {
margin-top:-100px;
}
Working demo here: http://jsfiddle.net/WtGsv/3/
I suggest adding an id to your .fixed_width div which houses the .content div though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.
However if you want to use absolute positioning, I have updated your jsfiddle here:
http://jsfiddle.net/WtGsv/12/
Basically, you add a parent div with position:relative; around your other two divs that you want to use position:absolute;
I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relative positioned container, than you wont need negative margins
Demo
HTML
<div class="wrap">
Add a line item
<div class="inner_wrap"><textarea></textarea></div>
</div>
CSS
body {
background-color: #aaaaaa;
}
.wrap {
border: 4px dashed #ff0000;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: Arial;
position: relative;
}
.inner_wrap {
position: absolute;
width: 100%;
height: 100%;
background-color: #919191;
top: 0;
}
Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/
or you can use negative margins margin-top: -100px http://jsfiddle.net/WtGsv/5/
With both solutions, the div at the bottom still takes space where it would be originally
Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/
You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.
Example HTML:
<div id="bottom">
lorem ipsum
<div id="top">
hello world
</div>
</div>
CSS:
#bottom {
background:red; /* to see dimensions */
position:relative;
}
#top {
background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Here is a JSfiddle.
If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.
I did this way
.mainUnderline{
height:8px;
background-color:yellow;
margin-top:-15px;
}
.header{
width:400px;
text-align:center;
font-weight:900;
font-size:30px;
color:black;
padding-bottom: 2%;
margin-left: auto;
margin-right: auto;
}
<div class="header">
“See line under me”
<div class="mainUnderline"></div>
</div>
The final ancestor div in my page needs a margin on all four sides, to give it a panel effect. Here is my code:
CSS:
html, body {
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#bibletree {
width: 20%;
float: left;
height: 100%;
}
.inner { /*this is the div that I need a margin around, so it is by 10px of the #bibletree div on all sides, including the bottom.*/
overflow: auto;
}
HTML:
<div id="wrapper">
<div id="bibletree">
<div class="inner">my content here, both short and long</div>
</div>
</div>
As you probably guessed, there is a lot more going on here than what is written. I have several columns with divs that all need this margin for the panel effect on the .inner div. Thanks for any help.
BTW, I have tried absolute positioning and it only positions based on the window, not on the parent element, even if I set the parent to position: relative.
If you set .inner to width 100% and add a margin, it will be wider than its container. You can set a padding or a border instead. For example, you can add a white or transparent border of 10px.
Another option is to make #bibletree position relative, then make .inner position absolute and specify top, bottom, right and left:
.inner {
bottom: 10px;
top: 10px;
left: 10px;
right: 10px;
position: absolute;
}
This will make it the same size as #bibletree, minus 10px on every side.
Margin:10px is working right?? you need not no specify the width for inner div, as div is already has block option. check here updated demo http://jsfiddle.net/QShRZ/5/
Is it possible to position a DIV relative to another DIV? I imagine this can be done by first placing it inside of the reference DIV, and then using position: relative. However, I can't figure out how to do this without affecting the contents of the reference DIV. How can I do this properly?
See: http://jsfiddle.net/CDmGQ
First set position of the parent DIV to relative (specifying the offset, i.e. left, top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want.
It's simple and should do the trick well.
You need to set postion:relative of outer DIV and position:absolute of inner div.
Try this. Here is the Demo
#one
{
background-color: #EEE;
margin: 62px 258px;
padding: 5px;
width: 200px;
position: relative;
}
#two
{
background-color: #F00;
display: inline-block;
height: 30px;
position: absolute;
width: 100px;
top:10px;
}
You want to use position: absolute while inside the other div.
DEMO
you can use position:relative; inside #one div and position:absolute inside #two div.
you can see it