I just stuck in position, I used position:relative for parent and position:absolute for child now parent div did't get height and i don't want to use min-height or height. You can see the red border on top which is the parent div border.
fiddle code
.box {
text-align: center;
border: 1px solid red;
width: 500px;
margin: 0 auto;
position: relative;
}
.content {
width: 50%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
</div>
</div>
Help me please ?
Thanks
You could just make the outer box absolute, if your textbos has to be positioned absolute.
EDIT: Without being able to edit the HTML structure, you need specific heights or some JavaScript. More Information about position
.box {
text-align: center;
border: 1px solid red;
width: 500px;
margin: 0 auto;
position: absolute;
}
.content {
width: 50%;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
</div>
</div>
Its not possible without javascript but you can get this if add a child element inside the '.content'...
.box {
text-align: center;
width: 500px;
margin: 0 auto;
position:relative;
}
.content {
border: 1px solid red;
width: 100%;
position:absolute;
left:0;
right:0;
}
.inner{
margin: 0 auto;
width: 50%;
}
<div class="box">
<div class="content">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
</div>
</div>
</div>
Absolute positioning takes an element out of normal flow, so it can not change the measures of its parent any more. Try this, it works fine:
.box {
text-align: center;
border: 1px solid red;
width: 500px;
height:100%;
margin: 0 auto;
}
.content {
width: 50%;
margin: 0 auto;
}
Related
I need to create an empty topbar and an empty sidebar as below. I want to stack them neatly so that the top of the sidebar touches the bottom of the topbar. For that, I am using percentage. However, I just can't get them to do that.
I saw some other threads suggesting to set html and body with height: 100%; and width : 100%. But in my app, the layout below is not in the main html document.
#nav-bar {
position: absolute;
top: 0;
left: 0;
background-color: blue;
height: 10%;
width: 100%;
}
#side-bar {
position: absolute;
top: 0;
left: 0;
background-color: #011a21;
height: 90%;
width: 7.5%;
/*margin-top: 10%;*/
}
<div id="nav-bar"> </div>
<div id="side-bar"></div>
Your #nav-bar has a height: 10%, and you can set the same value for the top rule, selector #side-bar.
#nav-bar {
position: absolute;
top: 0;
left: 0;
background-color: blue;
height: 10%;
width: 100%;
}
#side-bar {
position: absolute;
top: 10%;
left: 0;
background-color: #011a21;
height: 90%;
width: 7.5%;
/*margin-top: 10%;*/
}
<div id="nav-bar"> </div>
<div id="side-bar"></div>
I tend to use flex box for this, Maybe grid would be smarter though. I took also care of some scrolling things. Using min with and height 0 on flex parents is key for that.
body,
section {
min-height: 0;
min-width: 0;
}
body {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
nav {
height: 2rem;
background: green;
}
section {
flex: 1 1 0%;
display: flex;
}
aside {
width: 4rem;
background: blue;
height: 100%;
}
main {
background: pink;
flex: 1 1 0%;
overflow: auto;
padding: 1rem;
}
div {
border: 1px black dashed;
height: 300%;
}
<nav></nav>
<section>
<aside></aside>
<main>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br>
</div>
</main>
</section>
If I remove the space between the block code it only removes a small gap horizontally,
but vertically it's still has a small gap i know i can use flexbox instead but, I'm trying to understand why it behaves like this, any idea why it still has a small gap? vertically it can be removed with font size set to 0 but there is no text or letter below the image
/* Video Wrapper */
.video-wrapper {
background-color: royalblue;
width: 60%;
margin: 15px auto 15px auto;
box-sizing: border-box;
}
.video-wrapper > h2 {
text-indent: 150px;
background-color: lightblue;
margin: 0px;
height: 50px;
line-height: 50px;
}
.video-content {
display: inline-block;
background-color: red;
width: 40%;
position: relative;
height: 400px;
box-sizing: border-box;
}
iframe {
width: 100%;
outline: 0;
position: absolute;
height: 100%;
box-sizing: border-box;
}
.video-wrapper > p {
display: inline-block;
width: 50%;
box-sizing: border-box;
vertical-align: top;
}
No Space Removed:
<section class="video-wrapper" id="video-section">
<h2>Video</h2>
<div class="video-content"></div>
<p>Carefully Haa Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non perspiciatis veritatis veniam hic dignissimos! Et quas magnam doloremque, sapiente quae error ut repellendus esse aspernatur doloribus mollitia sunt iste cupiditate quisquam, aliquam dolorem labore dolore nobis repellat consectetur vel, nulla harum alias incidunt. Odit, dolorem. Maiores maxime quidem quis odit?</p>
</section>
Space Removed :
<section class="video-wrapper" id="video-section"><h2>Video</h2><div class="video-content"></div><p>Carefully Haa Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non perspiciatis veritatis veniam hic dignissimos! Et quas magnam doloremque, sapiente quae error ut repellendus esse aspernatur doloribus mollitia sunt iste cupiditate quisquam, aliquam dolorem labore dolore nobis repellat consectetur vel, nulla harum alias incidunt. Odit, dolorem. Maiores maxime quidem quis odit?</p></section>
By reducing the margin-Bottom you can hide or remove the gap
to do that CSS will be
.video-content {
display: inline-block;
background-color: red;
width: 40%;
position: relative;
margin-bottom: -4px;
height: 400px;
box-sizing: border-box;
}
Yes, as answered #Jvs there is a way like to reduce margin-botttom and
there is more one way is reducing height of parent tag/class
in your case CSS :
.video-wrapper {
background-color: royalblue;
width: 60%;
margin: 15px auto 15px auto;
box-sizing: border-box;
height: 450px;
}
Try this one also :p
I've been trying different ways but couldn't achieve what I want.
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
<div id="child-3"></div>
</div>
So I have the #parent at height: 100vh.
#child-1 should have height: 100% of parent.
#child-2 and #child-3 should have width: 100% and height: auto and they should be stacked on top of each other at position bottom: 0.
I've been trying to set parent relative and two childs absolute but the first child's height gets ignored.. I tried with display flex but first child's height is not 100% of parent.. I'm very confused how to do this.
Can someone help?
Here is what I'm trying to achieve: jsfiddle.net
You have to first get the bottom value of #child-2 dynamically as you said it should be on the top of #child-3.
You need to apply jQuery to get the height of #child-3 dynamically and then applying the height value of #child-3 to the bottom value of child-2, just like
#child-2 {
bottom: height-of-child-3;
}
Look at this Codepen
Or look at the snippet below:
height_child_three = $('#child-3').height();
$('#child-2').css({
position: 'absolute',
bottom: height_child_three
});
#parent {
width: 100vw;
height: 100vh;
background: #000;
position: relative;
}
#child-1 {
width: 100%;
height: 100%;
background: #eee;
}
#child-2 {
width: 100%;
background: #a0ea0e;
}
#child-3 {
position: absolute;
bottom: 0;
width: 100%;
background: #30e30e;
}
body { margin: 0; } /* A small reset */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child-1">
<strong>I'm child 1</strong>
</div>
<div id="child-2">
<strong>I'm child 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione deleniti voluptate commodi distinctio, repellendus qui, placeat laboriosam eligendi! Ducimus reiciendis officiis debitis placeat adipisci quae hic tempore vitae suscipit nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed aliquid, laborum nisi quos excepturi hic! Molestias hic consectetur dolor! Perferendis iste, quisquam quaerat ab, odio ducimus! Odio, minima error?</p>
</div>
<div id="child-3">
<strong>I'm child 3</strong>
</div>
</div>
Hope this helps!
Is this what you need?
HTML:
<div id="parent">
<div class="child-1"></div>
<div class="child-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum necessitatibus dolorem soluta laudantium cupiditate maiores neque, aliquid accusamus autem saepe tempora, itaque possimus, eaque deleniti odio atque enim omnis.</div>
<div class="child-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, illo est dolor dolores placeat deleniti quae consequuntur eum ipsum blanditiis laboriosam quod repellendus fugit! Odio quis rem vel a dolores.</div>
</div>
CSS:
html,
body,
div {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
#parent {
position: relative;
width: 100vw;
height: 100vh;
background: #ccc;
}
.child-1 {
width: 100%;
height: 100%;
background: red;
}
.child-2 {
width: 100%;
height: auto;
padding: 30px;
background: blue;
}
.child-3 {
width: 100%;
height: auto;
padding: 30px;
background: green;
}
Here you can see a solution just using plain CSS. CODEPEN
Example HTML/CSS:
.wrapper {
width: 100%;
}
.container {
width: 400px;
margin: 0 auto;
border: 1px solid;
}
<div class="wrapper">
<div class="container">
<div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div>
</div>
</div>
If there any chance to move left edge of .element to left edge of .wrapper, while its right edge stays snapped to right edge of .container. In other words, I want to override left margin of .container by adding some rules to .element. I've tried something like:
.element {
margin-left: -100%
}
But it moved the whole element, as I expected.
You could position the element absolutely relative to the .wrapper, and then use calc() to determine what 50% - 200px is:
Example Here - borders added for demonstration purposes..
.wrapper {
width: 100%;
position: relative;
}
.container {
width: 400px;
height: 60px;
margin: 0 auto;
border: 2px solid;
}
.element {
position: absolute;
left: 0;
right: calc(50% - 200px);
border: 2px solid #f00;
}
<div class="wrapper">
<div class="container">
<div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div>
</div>
</div>
You can set a position, but you will need javascript to calc the correct width.
.element {
position:absolute;
left:0;
}
JQuery
$( document ).ready(function() {
var w = ($(".container").outerWidth()/2) + $(".container").width();
$(".element").width(w);
});
I need to position several div rows to the bottom of a container, similar to the image here:
My problem lies in that almost every solution on SO requires either absolute positioning or some method which requires modification every time a new element is added. I tried using a display:table-cell and vertical-align:middle, but this broke my row layout (all rows had display:block;). Is there a way to get this done in a way I can keep adding html rows to the layout and it will grow from the bottom to the top without modifying the CSS?
Edit: The answer NEEDS to still work after adding a new row without modifying any CSS. IE9+ support is highly preferable. CSS ONLY solution is also highly preferred. If no answers with such criteria appear by tomorrow I'll tag the next most useful one as right.
(I'm using foundation in case that helps)
JSFiddle to play with:
https://jsfiddle.net/o47xeze7/
<div class="parent">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: table;
}
.child {
border: 1px solid red;
display: block;
vertical-align: bottom;
}
UPDATE: I'm an idiot... All I had to do was create a container with absolute bottom positioning and let it grow updwards. When I said no absolute positioned elements I said it because I don't want anything with the likes margin-top: x-pixels, because it requires updating that value every time I add a new row, but doing an absolute bottom placed container doesn't. Sorry guys. Here is the working solution in case anyone wants it.
https://jsfiddle.net/b6akcdso/
<div class="parent">
<div class="bottom-aligned-contanier">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus expedita praesentium aperiam, eveniet in, dolore iusto excepturi quibusdam accusantium delectus aut atque assumenda quaerat recusandae perferendis repellat labore, explicabo maiores.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti minima nostrum, tenetur autem, debitis magni vel facere laudantium incidunt asperiores aliquam cupiditate cum perferendis cumque inventore, dignissimos ad in.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum impedit deleniti, id voluptatum est! Quibusdam ea fugit obcaecati minima soluta, quis voluptate aspernatur corrupti, minus tempore ipsa adipisci porro. Ab.</div>
</div>
</div>
.parent {
width: 100%;
height: 20rem;
background-color: lightgray;
position: relative;
}
.bottom-aligned-contanier {
position: absolute;
bottom: 0;
}
.child {
display: block;
width: 100%;
background-color: darkgray;
color: white;
}
.child:nth-child(2n) {
background-color: gray;
}
Awarding right answer to the guy that gave me the idea to do this.
If you can use jQuery, then this solution works. Here is a fiddle: https://jsfiddle.net/o47xeze7/3/
HTML
<div class="parent">
<div class="bottom">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>
</div>
CSS
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: block;
}
.child {
border: 1px solid red;
display: block;
}
.bottom {
display: block;
position: relative;
}
jQuery
$(function() {
var parentHeight = $(".parent").height();
var bottomHeight = $(".bottom").height();
var difference = parentHeight - bottomHeight;
$(".bottom").css("margin-top", difference);
});
flexbox can do that.
.parent {
width: 100%;
height: 10rem;
border: 1px solid black;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 1em;
}
.content {
align-self: flex-start;
margin-bottom: auto;
}
.child {
width: 100%;
border: 1px solid red;
margin: 0;
}
<div class="parent">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ipsam nihil vel doloribus maxime sed animi repellat consequatur, earum, eum sit. Repellendus fugit dolorem dolorum facere quo odit numquam autem, qui commodi accusantium hic. Omnis.</p>
</div>
<div class="child">top</div>
<div class="child">bottom</div>
</div>
<div class="parent">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ipsam nihil vel doloribus maxime sed animi repellat consequatur, earum, eum sit. Repellendus fugit dolorem dolorum facere quo odit numquam autem, qui commodi accusantium hic. Omnis.</p>
</div>
<div class="child">top</div>
<div class="middle">middle</div>
<div class="child">bottom</div>
</div>
JSfiddle Demo
If you're ready to ditch support for IE8 and IE9 then this might be the best solution for you since you don't want to use absolute/table-cell positioning.
You can achieve what you're trying to do using flexbox. Here's how it's done in your case:
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: flex;
flex-direction: column-reverse;
}
.child {
border: 1px solid red;
}
<div class="parent">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>