I have a centered div and was wondering how can i attach a div on its right,
there is a title DIV on top, then the yellow centered DIV and this SOCIAL SHARING DIV I'd like to attach on the right.
Thank you!!!
Add it inside the yellow div, and position it as follows:
#yellowdiv { position: relative; }
#sidebar { position: absolute; left: 790px; top: 10px; }
It would be perfectly feasible to use the yellow div as the parent element for the brown div; the social data is all relevant info to the video. In that case, if you want, use the following:
#video {
position: relative;
}
#brown {
position: absolute; top: 0; left: 100%; /* this guarantees that it'll line up at the very end of #video */
}
Demo
http://jsfiddle.net/KXvpV/1/
Code
HTML
<div id="one"></div>
<div id="two">
<div id="social"></div>
</div>
CSS
#social { position: relative; top: 20px; right: -201px; }
Try making the yellow div position:relative, put the sidebar div inside it and make it position:absolute with values of top:0 and right:-XXX where XXX is the width of the sidebar plus the margin you require.
Related
Using the CSS property 'position', how would it be possible to make a div inside another div always 100% height of the parent div, with a margin of 40px on the top and on the bottom? It needs to be adjusting, so that if the parent div is 700px in height, the child div will be 620px (700px - 80px from margins). Here is an example of what I mean:
Here the parent div (green) is tall, so the child (orange) must stretch to fit the space.
And here the parent (green) is squashed, so the child (orange) must compensate by squashing itself to fit.
Thank you in advance.
Edit:
Here is the html Im working with:
<div id="center-page">
<p id="center-page-title">Blog</h1>
<div id="content">
</div>
</div>
Try this:
#center-page {
position: relative;
background: green;
height: 700px;
}
#content {
position: absolute;
background: orange;
top: 40px;
bottom: 40px;
left: 0;
right: 0;
}
<div id="center-page">
<p id="center-page-title">Blog</h1>
<div id="content">
</div>
</div>
You can try absolute positioning with top and bottom values. Something like this:
#child{
position: absolute;
top: 40px;
bottom: 40px;
left: 0;
right: 0;
background: blue;
}
Here is an example:
https://jsfiddle.net/Lys72mgy/
I have a structure like this:
#article {
position: relative;
height: 100%;
}
#special {
position: absolute;
bottom: 0%!important;
top: 100%!important;
width: 100%;
}
<section>
<div id="article">
<div>...</div>
<div id="special">...</div>
<div>...</div>
</div>
</section>
<section>
<div></div>
</section>
I place article div as position:relative and special div as position:absolute and top:100%. It goes at the end of article div but it seems that it has no height at all and shows below the below section. I added height attribute to special div and height:100% to article div with no success.
How can I force section div to occupy actual space? I tried to place an after element to special div to clear:both but no success.
When using absolute positioning, you don't need to include both top and bottom usally.
#article {
position: relative;
height: 100px; // Example just to show you a bit clearer.
}
#special {
position: absolute;
bottom: 0;
/* top: 100%!important; */ // Don't need this line
width: 100%;
}
I finally did this with jquery like this:
jQuery("#jc").insertAfter(".openSocialShareHorizontalSharing");
where #jc the div that i move below div with class openSocialShareHorizontalSharing
Although, if anyone could post a valid answer using CSS, please check the link from the comment from first post
Here's my scenario: I have a few divs that must stack on top of each other. Each div will have a background color (or texture.) Each of the divs has another div nested inside of it. The parent div's color or texture extends the entire width of the screen.
Problem: When adding the second div, it appears above the first.
See what I'm talking about at: http://staging.ontempoideas.com/bvcil
It looks something like this...
HTML:
<div id="1P">
<div id="1C">
</div>
</div>
<div id="2P">
<div id="2C">
</div>
</div>
CSS:
#1P {
position: absolute;
left: 0;
right: 0;
background-color: blue;
}
#1C {
width: 920px;
margin-left: auto;
margin-right: auto;
}
#2P {
position: absolute;
left: 0;
right: 0;
background-color: green;
}
Any thoughts?
To be honest, I'm not sure exactly what you're after from your description, but I put some code here that may help: https://jsfiddle.net/JTBennett/hksxgncv/1/
These are the positions you want to be using here:
position:relative;
position:inherit;
Your two parent divs are set at the same exact absolute position. If you want to clarify anything, I can update it for you.
Here is the thing.. I have a web page split to 2 sections (intro and main)
The intro section stretches to 100 based on the browser height with CSS:
#intro {
height: 100vh;
}
I want to add an arrow with href that will be positioned at the bottom section of the intro div no matter which screen size is entering the page.
Do you have any idea how can it be done?
Thanks!
#intro {
...
position: relative; /* or absolute, as appropriate */
}
#down_arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -25px; /* half the element's width */
}
This assumes markup similar to the following. In the future, please provide your markup in your question.
<div id="intro">
<div id="down_arrow"> ... </div>
</div>
Set position:relative to the #intro element and position:absolute to the arrow.
Also give a bottom and left rule:
#arrow {
width:40px; /* sample width - set as you wish */
position:absolute;
bottom:10px;
left:50%;
margin-left:-20px; /* important: set half of the width (centers the div) */
}
margin-top:90vh
:D and I need to write some text so stackoverflow knows I'm not spamming.
Rich homie quan is a good rapper. I think the limit has been reached, now.
Did You mean something like this Fiddle
I use positioning of intro element as relative and set this viewportheight as you want.
So if i set arrow postion to absolute it will stay inside intro element.
.arrow{
width: 50px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25px;
}
Using flexbox (demo):
<div class="intro">
<div class="nav"></div>
<div class="link-container">
<a>Arrow</a>
</div>
</div>
<div class="main"></div>
CSS:
.intro {
height: 100vh;
display: flex;
flex-direction: column;
background: blue;
}
.intro > .link-container {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
...
Place the arrow inside of the intro container and use:
.arrow{
bottom: 0px;
}
you may also need to fiddle around with the POSITION property as well, but this should give you what you need. Hope this helps!
.section2 {
position:fixed;
bottom:0;
}
#intro {
position: relative;
}
Add appropriate styles to make it as center of the screen.
I have an image in a div that has the size of 300px and I want to next and previous arrow on either side of the the image. However with one added issue is that if the screen is 300px I want the arrows to be on top of the image. How can this be done?
my div code is below:
<!--this div is the container for the carousel -->
<div id='mySwipe' style='max-width:300px; margin:0 auto' class='swipe'>
<!--the images are in this div -->
<div class='swipe-wrap'id="featured">
</div>
</div>
.container { position: relative; }
.container .arrow { position: absolute; top: 150px; }
.container .arrow.left { left: 0; }
.container .arrow.right { right: 0; }
By setting relative positioning to the parent (default is static) and absolute positioning to the children, they will be absolute relative to their parent.