I've implemented a template with static heights. I've changed it's content height to fit to child heights, but parent <main> and parent <section> aren't getting the autocalculated height.
Why?
I'm getting insane with this issue.
HTML:
<section class="seccion-productos">
<div id="sidebar">...</div>
<div id="grid-selector">...</div>
<div id="grid">...</div>
</section>
</main>
<footer>...</footer>
CSS:
#sidebar{
float: none;
height: auto;
width: 22%;
padding: 1% 0 0 2%;
}
.seccion-productos {
position: relative;
width: 100%;
}
#grid-selector {
width: 78%;
position: absolute;
top: 0;
left: 22%;
right: 0;
display: flex;
vertical-align: middle;
}
#grid {
width: 78%;
height: auto;
top: 90px;
left: 22%;
}
Undesired Result, parent content doesn't fit child content
I am just asking what things can make this happen and what should I do to solve it. Or if i'm missing something. Or where I have to look.
You also can see full code in here:
https://randal-es.000webhostapp.com/php/paginas/productos.php
#Arngue, as #Johannes says, if you put a child element with absolute positioning it won't affect the parent element even if the parent element has position relative. The only thing that the parent's relative position affects is the origin of coordinates for absolute positioning. You need to change the position definition for #grid-selector otherwise it will always break your layout.
The position: absolute; of the #grid-selector element takes it out of the size calculation context for the parent. Change that to relative
Related
I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
I do not understand whats wrong with my code. I mean, section element has the height, display value of my DIV element is definitly block and i really dont know how it works and how to combine these two elements differently positioned. Please give me your solutions and advices to learn something new today.
div {
position: relative;
margin: 0 30%;
}
div section {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
You want your hr on the bottom of the first div, right ?
However, this is not working because the parent div have an default height: auto property.
This mean that the parent div will have the height of his children.
When you set a position: absolute on a child, you are breaking this system.
The parent will no longer take care of his child.
So, if you want to make it works, you have two solutions:
- set a custom height (height: 100px) on the parent div (not good)
- remove the absolute position on the child section (default :position: relative)
div {
position: relative;
margin: 0 30%;
}
div section {
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
Your element has height set to AUTO. If you want to change your div height you need to write this in css.
div {
position: relative;
margin: 0 30%;
height: 200px;
background-color: red;
}
I think This is because your div has no height itself that's why it is not visible and it is increasing according to its child element which is section and is in absoulute position. I am not sure what you are up to but If you want to show the section inside the div along with the div's height the you must include the css for your div .
I provided an assumption solution for you hope it helps you
div {
position: relative;
margin: 0 30%;
background-color: green;
height: 150px;
}
section {
position: absolute;
top: 50px;
right: 0;
left: 0;
height: 50px;
background-color: yellow;
}
div hr {
height: 10px;
background-color: red;
}
<html>
<head>
</head>
<body>
<div>
<p>your div</p>
<hr>
<section>your section</section>
</div>
</body>
</html>
I have two images inside a div. I'd like to position these images using percent relatively to the parent div.
Here's a fiddle to understand: http://jsfiddle.net/b9ce626s/
I tried to set position: absolute; on the image but it uses window width.
I need the image on the very right be positioned at 95% of the red div, and not the window. I also don't want the left image impacts the positionning of the right one.
Add position: relative on #main so the position of the images are both based on that element (and not on the root element).
Example: http://jsfiddle.net/b9ce626s/1/
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
As a side note, if you assign a width with a percentage value to the images, it will be now based on the parent element width.
Try this..
Html
<div id="main">
<img id="card1" src="http://dynamic-projets.fr/wp-content/uploads/2012/08/attach_image.png" alt="KH" />
<img id="card2" src="http://www.rotaryd1650.org/images/main/IconesCollectionPro/128x128/image_gimp.png" alt="9H" />
</div>
Css
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
img {
position: absolute;
width: 5%;
}
#card1 {
left:5%;
}
#card2 {
right: 5%;
}
Fiddle Sample
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position: relative;
}
Give main position: relative; like so:
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
JSFiddle Demo
it's a known 'bug' that elements with fixed position loose their position if the container is translated. For example, if i've got a structure like this:
<div class="container">
<div class="fixed"></div>
</div>
and, say, the container is scrolled, when the conteiner gets transformed (say, translate(x,y), rotate(), or so..), then the fixed element behaves like it was positioned relative and it scrolls with the container. I can see it on the latest firefox, for example.
How can one fix this kind of problem? Is there any way?
This behaviour is not a bug. It's actually the specs recommended behaviour.
(See this post by Eric Meyer, or this question here on SO which accepted solution only provides a link to the same meyer's post)
For those who don't know this issue, and because you didn't provide a snippet into your question, here's one.
document.addEventListener('click', function() {
document.getElementById('container').classList.toggle('transformed')
}, false);
#bg {
border: 1px solid #AFA;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
border: 1px solid #FAF;
height: 50%;
width: 75%;
position: relative;
margin: 0 auto;
overflow: auto;
}
#content {
background: rgba(125, 175, 0, .7);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.transformed {
transform: translate(0, 5em);
}
<div id="bg">
<div id="container" class="transformed">
.<br>.<br>.<br>.<br>.<br>.<br>.
this is a scrollable paragraph
<br>.<br>the "fixed" content does scroll with the paragraph
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
you can click to toggle the transformation On/Off
<br>.<br>.<br>.<br>.<br>.
<span id="content">relatively fixed content</span>
</div>
</div>
However, I did find something that may help others facing the same issue.
It's not really a solution, since the "fixed" element will be only inside the container, (except for IE browsers where it will really be fixed to the document). But in my case, it's actually what I wanted and maybe it'll be fine for others too.
If you add a wrapper, set its height:100%; width:100%; and overflow:auto, then your "fixed" content won't scroll with the container.
Actually it's not you container which scrolls anymore, but the wrapper. So you might want to set the container's overflow:visible or hidden to avoid unwanted scrolling of the not so well "fixed" element.
Also, note that you need your wrapper be a block or inline-block element.
#bg {
border: 1px solid #AFA;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
border: 1px solid #FAF;
height: 50%;
width: 75%;
position: relative;
margin: 0 auto;
overflow: visible;
}
#wrapper {
height: 100%;
width: 100%;
overflow: auto;
}
#content {
background: rgba(125, 175, 0, .7);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.transformed {
transform: translate(0, 50%);
}
<div id="bg">
<div id="container" class="transformed">
<div id="wrapper">
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<span id="content">relatively fixed content</span>
</div>
</div>
</div>
I am not familiar with this bug, but when you use positioned: fixed; the element is positioned relative to the browser window, so it doesn't really make any sense to put it inside a container.
This markup would be my recommendation:
<div class="fixed"></div>
<div class="container"></div>
Once you use position: fixed; on any element it is positioned relative to the view-port. Directly from page in MDN about position property.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So what you are experiencing is a what it is actually supposed to work like and not a 'bug'.
Now if what you want is something that is positioned with relation to the .container div and translate with it than you will have to use absolute positioning here. Take a look at this fiddle. The important CSS is-
.container {
width: 200px;
height: 100px;
position: relative;
}
.absolute {
position: absolute;
width: 20px;
height: 10px;
top: 50px;
left: 50px;
}
Notice that with positioning the inner div as absolute I have also positioned the outer div as relative as the inner div takes its position in reference to the closest parent div positioned as anything different from static.
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}