I have three child divs sitting side-by-side inside the parent. The left and right are of a fixed width, whilst the middle is a variable width and needs to resize with the browser. As they are of different heights, I need to vertically align them inside the parent, but I cannot get them to, and they stick to the top. Is there any way I can do this? The height of the child divs are fixed, but the height of the parent should be variable.
CSS:
#divMain { width: 100%; min-width:320px; height:400px}
#div1 { width: 100px; height: 200px; float: left; red;vertical-align:middle;display:inline-block; }
#div2 { margin-left: 110px; height: 400px; margin-right: 110px; vertical-align:middle;}
#div3 { width: 100px; height:300px; float: right; vertical-align:middle;display:inline-block;}
HTML
<div id="divMain">
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
</div>
Here's a JS-free way of achieving this using position: absolute on the side divs:
Fiddle: http://jsfiddle.net/Xa8TW/2/
CSS
#divMain {
width: 100%;
min-width:320px;
position: relative;
}
#div1 {
width: 100px;
height: 200px;
background-color: red;
position: absolute;
top: 50%;
margin-top: -100px;
}
#div2 {
height: 600px;
margin: 0 110px;
background-color: green;
}
#div3 {
width: 100px;
height:300px;
background-color: blue;
position: absolute;
top: 50%;
right: 0;
margin-top: -150px;
}
HTML can be left unchanged, but it is now also possible to swap the places of #div2 and #div3, since there are no floated elements that require a certain order.
Is the height of DIVs fixed? As it seems from your code the heights are fixed to 400px. If that's true then the solution is very simple - just provide a margin-top to div1 and div3.
I've created the fiddle for this and removed some of useless CSS snippets (which do not make nay difference) as well. Have a look
http://jsfiddle.net/8kv2K/
Related
I'm trying to center a text div on top of box div that has inline block. I tried using position: absolute on the text div. But when the browser screen is shrunk or expanded, the positioning of the text div gets messed up. How to fix this?
.mainDiv {
margin: auto;
width: 100%;
padding: 10px;
left: 300px;
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
}
.text {
background-color: blue;
position: absolute;
top: 70%;
left: 45%;
}
<div class="mainDiv">
<div class="box"></div>
<div class="text">text</div>
</div>
I assume you are using inline-block to center the .box inside the .main-div. Technically, with your current html structure you can't center the .text element on the .box one, but you can center it on .main-div, which is essentially the same thing in your example.
I would start by adding position: relative to .main-div. An absolutely positioned element is positioned based on it's nearest ancestor that has a positioning context. The easiest way to set this is to add position: relative.
Then with your .text element you can adjust to:
.text {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50% );
}
This works because top and left position the top and left element from the top and left of its parent. So the top of .text would start 50% of the way down .main-div, and likewise with left. This would leave your text too far down and to the left.
transform: translate values work differently - they are based on the size of the element itself. So -50% will move an element back half of its width or height. By setting it on both width and height we are moving the .text so that instead of its top and left edges being at 50%, it's center is at 50%.
.mainDiv {
position: relative; /* added to make .text align relative to this, not the document */
margin: auto;
width: 100%;
padding: 10px;
/* left: 300px; (I removed this for demo purposes, but if you need it you can add it back in) */
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
}
.text {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50% ); /*pull the text left and up 50% of the text's size*/
}
<div class="mainDiv">
<div class="box"></div>
<div class="text">text</div>
</div>
The markup for text should be written first then the box. Then you may try using block instead of inline-block, then set the width of the text to 100 percent, display block and 'margin: 0 auto'. Also, maybe consider using the appropriate semantic tags as opposed to divs if you can. Also, I suspect the top and left rules to be causing the text to not align properly. You should no longer need position:absolute either.
If you want, you can make the blue div a child of the red div so that the blue div will always be relative to the red div. I also added position:relative to the red div, and used transform:translate to the blue div.
If I'm not mistaken, this is also responsive, so try shrinking your browser.
.mainDiv {
margin: auto;
width: 100%;
padding: 10px;
left: 300px;
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
position:relative;
}
.text {
background-color: blue;
position: absolute;
left: 50%;
transform:translate(-50%, -100%);
}
<div class="mainDiv">
<div class="box">
<div class="text">text</div>
</div>
</div>
.mainDiv {
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 19px;
}
.text {
background-color: blue;
position: absolute;
margin: -19px 0 0 36px;
}
<div class="mainDiv">
<div class="box">
<div class="text">text</div>
</div>
</div>
I would like to position some elements at different distances from the left border of a parent div. Each element holds its own distance (in percentage of the width of the parent div).
Since position does not seem to be the right approach, I tried to do that by floating the element to the right
div {
display: flex;
flex-direction: row;
}
#root {
width: 50%;
border: solid;
}
#one {
float: right;
margin-left: 20%;
}
#two {
float: right;
margin-left: 80%;
}
<div id="root">
<div id="one">1</div>
<div id="two">2</div>
</div>
My expectation was that the first element would be at 10% of the div width (so 5% of the page width, since the parent div is 50% width relative to the page) and the second one at 80%. This is not the case, the docs mention that
Elements after a floating element will flow around it.
They also mention that clear can be used to avoid this but I did not manage to make it happen (that is to make it so that each float is recalculated from the left border of the parent div).
Is this something which is possible?
As a workaround I thought about calculating the float of the second element reltive to the first one, but that would horrendously(*) complicate my code so maybe there is a cleaner solution.
(*) For the case above that would be 80% - 20% (the ones which are already floated) = 60%. But even here the positionning is not correct (the 2 is too much to the right; there should be 20% blank, 1, 40% blank, 2, 20% blank - but the widths of the numbers themselves should be taken into account as well)
div {
display: flex;
flex-direction: row;
}
#root {
width: 50%;
border: solid;
}
#one {
float: right;
margin-left: 20%;
}
#two {
float: right;
margin-left: 60%;
}
<div id="root">
<div id="one">1</div>
<div id="two">2</div>
</div>
You can position element the way you want with position: absolute on the child elements. But keep in mind that the child elements don't control the height of the outer element.
#root {
position: relative;
border: solid;
width: 50%;
overflow:hidden;
height: 20px;
}
#one {
border: solid red;
position: absolute;
top: 0px;
left: 20%;
}
#two {
border: solid blue;
position: absolute;
top: 0px;
left: 60%;
}
<div id="root">
<div id="one">1</div>
<div id="two">2</div>
</div>
Demo: https://jsfiddle.net/uu0oftyr/
Use
clear: left;
float: left;
margin-left: [the percentage value for your distance];
Erase the flex settings from the container and add overflow: hidden to make sure the floats are considered part of the containers height.
Here is an example:
#root {
width: 50%;
border: solid;
overflow: hidden;
}
#one {
clear: left;
float: left;
margin-left: 20%;
border: 1px solid red;
}
#two {
clear: left;
float: left;
margin-left: 60%;
border: 1px solid green;
}
<div id="root">
<div id="one">1</div>
<div id="two">2</div>
</div>
P.S.: You could do something similar with all right settings:
clear: right;
float: right;
margin-right: [...];
I have problem setting layout because one of my child divs makes goes out of it's parent div.
I have: header with 10% height, container with height 90%, and inside one 'div1' with height set to 90% and margin-top set to 10%. If I remove margin-top everything is ok, if not it goes out of parent size creating scrolls etc. (I want div1 height set, I dont need height set to auto etc.)
JsFiddle: https://jsfiddle.net/5q9vh93n/
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
CSS:
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%;
}
#header
{
background-color: blue;
height: 10%;
}
#container
{
width: 100%;
height: 90%;
background-color: gray;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-top: 10%;
margin-left: 1.5%;
height: 90%;
}
#div2 {
background-color: green;
float: right;
width: 100px;
width: 43.17%;
margin-right: 3.6%;
}
Use Transform here is a demo
#div1 {
background-color: red;
float: left;
width: 15.67%;
transform: translateY(10%);
margin-left: 1.5%;
height: 90%;
}
you should use position: absolute; and change margin-top to top , margin-left to left. So css of #div as follow:
#div1 {
position: absolute;
background-color: red;
float: left;
width: 15.67%;
top: 10%;
left: 1.5%;
height: 90%;
}
I was really surprised when I've discovered this, but vertical padding and margin are relative to the parent's width, not height.
To solve your problem, you can use the top property instead, which is relative to the parent's height, as you expect.
So, just change your code to this, and it'll work.
#div1 {
top: 10%;
position: relative;
}
JSFiddle: https://jsfiddle.net/5q9vh93n/2/
Hope it helps!
I have a div with content and an outter div that's just a wrapper. I'm trying to combine the css from the outter div to the inner div so i can remove the outter div. When I do that, the div is no longer visible(assuming because of zero height). I thought maybe it was the order so I tried rearranging the css but still no luck.
#div1 {
min-height: 200px;
width: 100vw;
}
#div2 {
/* min-height: 200px;
width: 100vw; */
position: fixed;
height: 100%;
width: 100%;
background-color: #74CFAE;
font-size: 25px;
line-height: 40px;
z-index: -1;
}
#div3 {
position: relative;
height: 600px;
width: 100vw;
background-color: #333;
}
<div id="div1">
<div id="div2">
<p> I want the following div to scroll over this content.</p>
</div>
</div>
<div id="div3"></div>
If you comment out the css for 'div1' and combine it with 'div2' you will see what I am talking about.
Is this a case that requires a wrapper? or is there something inherently wrong with my css?
My take on it: if you know height of div2, you can drop div1, but you'll have to place div3 at a definite top.
If you don't know div1/2 height and don't want to reposition dynamically div3, it seems like div1 as a wrapper is a good solution.
A suggestion with known div2 height:
#div2 {
height: 100px
width: 100vw;
position: fixed;
background-color: #74CFAE;
font-size: 25px;
line-height: 40px;
z-index: -1;
}
#div3 {
position: relative;
height: 600px;
width: 100vw;
background-color: #333;
top: 100px;
}
https://jsfiddle.net/oahurc53/1/
html:
<div class="outside">
<div class="inside">
</div>
</div>
I have two CSS : #1 and #2
/*CSS#1 does not work*/
.outside{
background: blue;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 50%;
margin: 0 auto;
margin-top: -100px; /*half height of this div*/
}
/*CSS#2 works well */
.outside{
border: 1px solid black;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 50%;
margin: 0 auto;
margin-top: -100px; /*half height of this div*/
}
My aim is to place the 'inside' div at the center of the 'outside' div (both vertical and horizontal). I have a lot of ways to achieve this aim, however I found something strange during the process.
I found that CSS#2 works quite well, but CSS#1 does not work: when setting the 'inside' div 'margin-top: -100px', the 'outside' also moves up..
Here is the demo
So I am wondering why 'border' works well here and why 'background' does not work?
You need to add overflow: auto; to the parent element there, but however your approach is incorrect, you need to position your child element absolute to the parent element and not relative
Demo
Using overflow: auto; or border will fix your issue as it prevents collapsing of the parent margin.
Try this. You need to set top and left as 25 %. I have tested it on ie 11 and crome.It is working fine.
.outside{
background: blue;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 25%;
left:25%;
}