I have got this HTML:
<div class="A">
<div class="B1">
<div class="C1"></div>
</div>
<div class="B2"></div>
</div>
.A is a container with padding, B1 contains a long list and scrolls. .B2 should be aligned in the list (vertically and horizontally centered like a loading image).
How do I achieve that? The horizontal alignment is not working for me:
https://jsfiddle.net/1phyb6y8/
The reason why it is not working: the absolute positioned element does not ignore the padding of its parent. I've added a div .inner with position: relative and put both, .B2 (loading animation) and .B1 (container with scrollbar) in it. This way .B2's position is calculated based on the width of .inner which has no padding.
<div class="A">
<div class="inner"> /* .inner { position: relative; } */
<div class="B2">
</div>
<div class="B1">
<div class="C1">
</div>
</div>
</div>
</div>
See the updated JSFiddle.
I added a container to your structure so the .B1 and .B2 divs are in it.
B1-container takes a relative position. B2, as you did takes an absolute position and proper positionning to be at the center (I added transform: translate(-50%, -50%) so the div in the center stays in the center whatever happens to the block width).
So B2 will always be centered above B1 and move independently from it.
Hope it will help !
<div class="A">
<div class="B1-container">
<div class="B2"></div>
<div class="B1">
<div class="C1"></div>
</div>
</div>
</div>
See on JSFiddle
Related
I have 3 main div's that should split the screen horizontally (45%,10%,and 45% of width of screen). The left-most div(blue) contains a number of smaller divs(aqua) that need to remain static. The middle (green) and right-most (red) div should float down the page as the user scrolls, but should remain in their horizontal positions. I have set fixed heights for all div's as they will be kept to a certain vertical size.
I tried assigning fixed positions for the green and red div's but they move out of position and block the blue div's.
CSS
.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}
HTML
<div class="MatchingDiv" style="width:100%">
<div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
Left-most Div
<!--generate programmatically?-->
<div class="PNMLB" id="rank1">Rank 1<br/></div>
<br/>
<div class="PNMLB" id="rank2">Rank 2<br/></div>
<br/>
<div class="PNMLB" id="rank3">Rank 3<br/></div>
<br/>
<div class="PNMLB" id="rank4">Rank 4<br/></div>
<br/>
</div>
<div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;">Center Div</div>
<div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;">Right-most Div</div>
Please use the style position:fixed;right:0%; for right most div and position:fixed;right:45%; for center div
The working code snippet is given below:
<style>.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}
</style>
<div class="MatchingDiv" style="width:100%">
<div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
Left-most Div
<!--generate programmatically?-->
<div class="PNMLB" id="rank1">Rank 1<br/></div>
<br/>
<div class="PNMLB" id="rank2">Rank 2<br/></div>
<br/>
<div class="PNMLB" id="rank3">Rank 3<br/></div>
<br/>
<div class="PNMLB" id="rank4">Rank 4<br/></div>
<br/>
</div>
<div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;position:fixed;right:45%;">Center Div</div>
<div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;position:fixed;right:0%">Right-most Div</div>
if you know the exact width of all divs, you can move them right after another by using CSS property left
.Middle, .right{
position: fixed;
}
.Middle{
left: 45%;
}
.right{
left: 55%;
}
I am personally using jQuery for this, you can get offset of element and position divs more precisely :)
So I made a JSFiddle for the code you provided above.
I removed all the float: left;'s from the two divs that we're supposed to be fixed and I added position: fixed; top: 0; to both of them.
Since that would overlap them all on the left, I move the red middle one left: 45% and the blue one right: 0;.
I figured that's the functionality you were looking for.
Let me know if you have any questions
https://jsfiddle.net/deubwma6/6/
In the example image, I have navigation. Example code below shows potential markup. If the image and the text below need to move together (slide side to side), how can I anchor the position the navigation using only CSS. I suspect that I'll have to rely on some JavaScript without knowing heights of elements, but I would rather not have to.
To be clear, the navigation here appears to be centered, but they are not. They need to be floated at the bottom of an arbitrary image height.
UPDATE
Example code (see CodePen):
<div class="carousel">
<div class="indices">
<div class="dot"><div class="ghost">Carousel slide 1</div></div>
<div class="dot"><div class="ghost">Carousel slide 2</div></div>
<div class="dot"><div class="ghost">Carousel slide 3</div></div>
</div>
<div class="gutter">
<div class="content">
<div class="img"><img src="https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889_1280.jpg" alt="Horses"></div>
<div class="text">This text content can really be any arbitrary height, so it wouldn’t work to just use negative margins on the navigation, unfortunately.</div>
</div>
<div class="content">
<div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Other Horses"></div>
<div class="text">Also, images can be arbitrary heights.</div>
</div>
<div class="content">
<div class="img"><img src="http://maxpixel.freegreatpicture.com/static/photo/640/Water-Turtle-Nature-Reptile-649667.jpg" alt="Turtles"></div>
<div class="text">Turtles</div>
</div>
</div>
<div class="nav">
<a class="item prev" href="#" aria-label="Previous carousel story"></a>
<a class="item next" href="#" aria-label="Next carousel story"></a>
</div>
</div>
My code is very flexible; I can move things around if need be.
Have you tried to use position: relative and position: absolute (like in this simple example)? You wrap your image slide and bullet navigation in a div where you set the position to relative. Then set the navigation wrapper to absolute position (bottom: 0 to place it at the bottom of the parent div). It will normally stay in place even if the image changes as the height of the parent div will depend on the img height.
.outer-div {
position: relative;
}
.bullet-nav {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* to center nav */
}
I have the following split among 3 main div to be side by side. The very left div I want it to take up 60% of the screen and the rest 2 (description and resource) to take each 20%. When I run this all 3 are overlapping on the left portion. Below is my codes.
<div id="left" style="position:absolute;top:0px;left:0px;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="position:absolute;top:0px;left:0px;width:60%;height:400px">Map goes here.</div>
<div id="details" style="position:absolute;top:400px;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
They are overlapping because you've given them all absolute position and left 0. Absolute position removes the element from the normal flow of the page and puts it exactly where you indicate using the top/left/right/bottom properties. They will overlap as long as they have the same parent and same position properties.
Absolute position and left being 0 is making them overlap.
Please use css
see solution : http://jsfiddle.net/thecbuilder/vZ77e/
html
<div id="left">
<div id="map">Map goes here.</div>
<div id="details">Details</div>
</div>
<div id="description">description</div>
<div id="resource">resource</div>
css
#left, #description, #resource{
display:inline;
float:left;
height:100%;
}
#left{
width:60%;
background:#e6e6e6;
}
#description, #resource{
width:20%;
}
They are overlapping because you are using position absolute. instead place the divs at the top of the html page and do this instead:
<div id="left" style="float:left;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="float:left;width:60%;height:400px">Map goes here.</div>
<div id="details" style="float:left;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
This will place the divs beside each other
I am trying to create a 'section' div with a header, this header has a centred title and may or may not have a jquery UI button on its right hand side. The width of the 'section' div is determined by its parent.
My trouble is that the title with button centre alignment is taking the button's width into account.
Html:
<div style="width: 600px;">
<div class="section purple">
<div class="sectionHeader">
<div>Normal Title</div>
</div>
<div class="sectionContent"></div>
</div>
<div class="section blue">
<div class="sectionButtonIcon"> <a id="btnExample">Jquery UI Button</a>
</div>
<div class="sectionHeader">
<div>Title With Button</div>
</div>
<div class="sectionContent"></div>
</div>
</div>
See jsFiddle for css: http://jsfiddle.net/agAgeas50/uL9Uc/8/
Note: this is not a duplicate of Center inline-block div in parent while ignoring floating elements . If you look at jsfiddle's in the accepted answer, wrap the parent in another div and give the top level div a fixed width, the right hand element appears outside the parent.
add/edit the following
.section.blue {
position:relative;
}
.sectionButtonIcon {
position:absolute;
right:0px;
}
http://jsfiddle.net/uL9Uc/9/
I have a row with content which should be in the center of the site and a footer at the bottom. The content are divided into two 6 column. i want it to center align vertically according to the screen size. so i tried to give some percentage of top with a position relative but it doesn't work out.
If i give margin-top it is working. In order to make the top we have to give the position, so i have given it relative I don't want position absolute then the footer will come at the top of the site. Other content also will come top i thnik.
How to center align the contents and footer should stay at bottom all time all display size.
HTML
<div class='row'>
<div class='col-md-6 vertical'> content</div>
<div class='col-md-6 vertical'>content right</div>
</div>
<footer>sit at bottom</footer>
CSS
.vertical{
position:relative;
/* margin-top:20%; */ /*works*/
top:20%; /*not works even providing position */
}
JSFIDDLE NOTE: Don't forgot to resize the window then only you can able to see the two column division
<div class='row'>
<div class='col-md-6 '>
<div class="vertical"> content</div>
</div>
<div class='col-md-6 '>
<div class="vertical"> content</div>
</div>
</div>
<footer>sit at bottom</footer>
.vertical{
display: table-cell;
vertical-align:middle;
height: 200px /* Accordingly */
}
Working Fiddle Fiddle.
Apart from using display: table-cell, there is one more way to do it but is not so cross-browser at this moment. Take a look at CSS3 Flexbox.