I am looking for a way to align a nested div to the bottom of the parent div.
I do not want to use position: absolut:
#child {
position: absolute;
bottom: 0px;
}
This breaks my responsive design as content will start to overlap if the screen is resized. The paren container looks like this:
CSS
#parent {
position: relative;
}
HTML
<header id="parent" class="container-fluid">
<div id="overlapped-content" class="row">
... some regular content ...
</div>
<div id="child" class="row">
<div id="lower-intro" class="container-fluid">
... to lower content
</div>
</div>
</header>
If the screen is resized the overlapped-content will be overlaped by the child content.
Is there any alternative?
You can use min-height on overlapped-content or You can set it's height.
Related
How to create a layout that allows having a logo image(yellow) that spans 3 vertical div elements and does not change its location(center) when the page gets minimized. I'm using Bootstrap 4. Initially, I have found 2 solutions but they do not work when the page is resized by minimizing its size.
Using CSS style position: absolute and topY/offset - does not work because logo image(yellow) change its position..gray div goes under the pink div as a result the logo image overlaps the gray's div text content
Splitting the logo image horizontally into 3 images, the problem is that between the second(middle) image and the bottom image appears a lot of space when minimizing the page
NOTE: when the page gets minimized, the gray div goes under the pink div, and the green div goes under the gray div, as a result, the second row becomes twice taller. No problem that it is twice taller, but I want that the logo(yellow) to stay vertically centered in its original pink div
Place the 3 divs inside a wrapper
<style>
.wrapper{
background-image:url("image.jpg");
background-size:cover;
}
</style>
<div class="wrapper">
// three divs go here
</div>
This is possible through margin: negativevalue 0 -- but without actual code I can't give exact values. If standard Bootstrap 4, adding the class my-n5 (taking advantage of Bootstrap 4's spacing utility) to the logo element will make its box-model overlap others.
You need to use position: absolute, top: 50% and transform: translateY(-50%) to the logo to make it work
First, the position: absolute and top: 50% will make the logo position fixed in it's relative parent and make the top of the logo itself positioned in the center it's parent
Then the transform: translateY(-50%) will move the logo from the current position negatively for half of the logo height
Here's the working example
.c1 {
background: pink;
overflow: visible;
}
.c2 {
background: gray;
}
.c3 {
background: lightblue;
}
.logo {
width: 48px;
height: 48px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
1 DIV
</div>
</div>
<div class='row'>
<div class='col-md-4 c1'>
Left Content Logo
<img class='logo' src='https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png' />
</div>
<div class='col-md-3 c2'>
Mid Content
</div>
<div class='col-md-5 c3'>
Right Content
</div>
</div>
<div class='row'>
<div class='col-md-3' style='background: blue;'>
LEFT
</div>
<div class='col-md-6'>
MID
</div>
<div class='col-md-3'>
RIGHT
</div>
</div>
</div>
Note: You can try to resize either the div or the logo to see that it will still centered in it's relative parent container
I need to animate my ng-view with a slide effect. Therefore I got 3 divs
<div style="overflow:hidden">
<div ng-view style="position:absolute">
<div style="position:relative"> LONG CONTENT </div>
</div>
</div>
I´m testing these effect. The outer div needs to be overflow:hidden to let my slide effekt work.The inner div needs to be absolute. If the inner div contains some text, the other 2 divs should expand the height according to the very inner div. Same like when all divs would be relative. How to achieve this?
Like in my example link but with variable height.
EDIT: This is a complete other question then the "possible" duplicate.
The problem is the size of your contents, you`re making your inner div absolute, so the parents it won’t
have any height. First thing you have to do is define size to your elements and than you can use absolute elements to make your layout.
see the example below, i define a div named .page with min-height:200px, that will be enough to appear your element (.slide), because if you don’t do this, your element(.page) height will be 0, and it will be cut by overflow:hidden.
<style>
.page {
background-color: #DDD;
overflow: hidden;
position: relative;
min-height: 200px;
}
.slider{
position: absolute;
}
.slide{
position: relative;
}
</style>
<div class="page">
<div class="slider" ng-view>
<div class="slide"> LONG CONTENT </div>
</div>
</div>
To start off I'm relatively new to CSS, Bootstrap and HTML. I want to position a responsive element at the bottom of the screen.
So I have this code which makes it behave responsively:
<div class="col-sm-12">
test
</div>
But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.
One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:
<div class="fixed-container">
<div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->
And you styles could look like:
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This would affix the .fixed-container element to the bottom left of the viewport, and would set the width to 100% of the viewport. The layout-specific rules applied to .col-sm-12 would remain intact.
<div id="my-element" class="col-sm-12">
test
</div>
#my-element {
position: fixed;
bottom: 0;
}
Here is a simple solution to your problem.
Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:
<div class="container-fluid">
Inside this container place your elements/sections including your footer:
<footer class="col-md-12">
Your footer should have the following CSS.
footer {
position: absolute;
bottom: 0;
height: 100px /* Height of your footer */
width: 100%;
}
Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.
http://jsfiddle.net/gward90/ehf2wm83/
I am trying to build a module of span8 width and varying height. There is an image which will define the height of the div, and text that is positioned on top of the image. I am having trouble trying to figure out how prevent part of my image from being cropped when Bootstrap resizes the div.
In addition, I'm having trouble figuring out how to position my text boxes. I am trying to have two text boxes - one positioned at 0% vertical, and the second at 50% vertical.
<div class="row">
<div class="span12 promo">
<div class="content">
<div class="row-fluid">
<div class="topText span24">
Text positioned on the top half
</div>
</div>
<div class="row-fluid">
<div class="botText span24">
Text positioned on the bottom half
</div>
</div>
</div>
</div>
</div>
.promo { height: 100%; }
.promo .content { width: 100%; height: 100%; background:url(http://www.placehold.it/470x188) no-repeat; }
.promo .content .row-fluid { height: 50px; }
Have you tried setting a min-height property? This will set a minimum height so your image won't be cut off.
I would try setting both divs to height:50%;, this should give you the right effect.
I'm working on a centered layout with 960px of width. Within the wrapper I want a Slideshow, that is 100% of width (the browsers width).
How can I achieve this?
<div id="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
<div class="slider"> //100%
Slider-content
</div>
<div class="text"></div>
</div>
Thank you in advance... :-)
div.slider will already be 100% width, since block-level elements like div already expand horizontally to fill all their parent's space unless otherwise specified. This is going to be true for div.text as well.
If you are asking how to create the 960px centered wrapper, the techniques are pretty standard. Either:
div#wrapper
{
margin: 0 auto; /* horizontal margin set to "auto" pushes <div /> to center
width: 960px;
}
or
div#wrapper
{
left: 50%; /* put left edge at 50% */
margin-left: -480px; /* move left edge back by 480px = half width.
this makes the center of #wrapper match center of page */
position: absolute; /* position: absolute makes the left: 50% line work */
width: 960px;
}
You may want to look at ways of including the slideshow div outside of the wrapper div if the wrapper is to be 960px and the slideshow is 100% of browser width.
Typically, absolute positioning of the slideshow div inside the wrapper div won't affect the dimensions of its container (wrapper) div but you lose some control in centering the contained (slideshow) div.
I would suggest changing #wrapper to .wrapper so that you can reuse your wrapper class later down the page. Then, I recommend the following markup:
<div class="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
</div><!-- end .wrapper -->
<div class="slider"> //100% of browser viewport
Slider-content
</div><!-- end .slider -->
<div class="wrapper"> //960px
<div class="text"></div>
</div><!-- end .wrapper -->
The solution was very simple.
How to make a DIV, that is within a fixed width DIV, to be the width of the browser.
HTML:
<div id="wrapper"> //960px
<div class="slider"></div> //100% of browser width
</div>
CSS:
.slider {
position: absolute;
width: 100%;
left: 0px;
}