I have a div with an absolute positioning which is again a child of absolute positioned element. setting width:100%;left:1px;right:1px to the child not working. Problem i face is, its getting beyond the parent the element.
<div class="outer">
<div class="inner">
</div>
</div>
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
width:100%;
height:100%;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
Refer here
Just take away the 100% on the child element and the inner div will fit the parent.
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
This is because you have the width and height to be 100%, meaning it'll be also 80px PLUS the top left right and bottom properties so the box lays over the other. Now if you want it to go inside the box and be perfectly proportioned remove height and width:
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
You can also make this:
.outer{
margin-top: 10px;
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
padding: 1px;
}
.inner{
position:relative;
width:100%;
height:100%;
background:red;
}
Related
I want to make div side by side , I can achieve this but when I add som margin or padding they can disturb the lay out, I just want that two div display side by side with padding and margin property.
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:50%;
background-color:gray;
float:left;
margin:2px;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
margin:2px;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
To use padding on the <div>s you can set the box-sizing property to border-box so the padding is included in the width of the <div>. But the margin is more difficult to include in the width because it is on the outside of the box. So you have to calculate the margin on the width (see example on #leftdiv):
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:calc(50% - 20px); /** 20px = sum of margin left and right */
background-color:gray;
float:left;
padding:10px;
margin-right:20px;
box-sizing:border-box;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
padding:10px;
box-sizing:border-box;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
border-box: The width and height properties include the content, the padding and border, but not the margin.
content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Values
You can see the box model on the Chrome Developer Tools:
There you can see the margin surrounding the border. The width and height is calculated until the border and doesn't include the margin.
just add
#rightdiv,#leftdiv{
box-sizing:border-box;
}
You are going to have to change their display type from block
and css is:
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:50%;
background-color:gray;
float:left;
margin:2px;
display: inline-block;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
display: inline-block;
margin:2px;
}
This should allow them to respond and align side by side.
margin will apply (space) to the outside of the boxmodel.
padding will apply (space) to the inside of the boxmodel - use in conjuction with box-sizing: border-box; to negate additional padding affecting the inherit height and width of the element.
Where alignment is concerned, in this case, you have a few options to explore:
#center {
width: 100%;
border: 1px solid gray;
overflow: hidden;
}
.inline-div {
height: 200px;
width: 48%;
display: inline-block;
margin: 2px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.flex-wrapper {
display: flex;
justify-content: space-between;
}
.flex-wrapper .inline-div {
flex: 1;
}
#leftdiv {
background-color: gray;
}
#rightdiv {
background-color: yellow;
}
<h1>Inline</h1>
<div id="center">
<div id="leftdiv" class="inline-div"></div>
<div id="rightdiv" class="inline-div"></div>
</div>
<h1>Float</h1>
<div id="center">
<div id="leftdiv" class="inline-div float-left"></div>
<div id="rightdiv" class="inline-div float-right"></div>
</div>
<h1>Flex</h1>
<div id="center" class="flex-wrapper">
<div id="leftdiv" class="inline-div"></div>
<div id="rightdiv" class="inline-div"></div>
</div>
Let's first examine #center's css. You are set width to 100% and 1px for border(1px on the left and 1px on the right) which mean that actual width will be 100% + 2px, which might be not exactly what you want. To solve this you can use either box-sizing:border-box; or width:calc(100% - 2px). Also you might not need "overflow:hidden" and "display:inline-block"
Box-sizing is really useful property. You can read more here: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
#center { #center {
width:100%; width:calc(100% - 2px);
box-sizing:border-box; or border:1px solid gray;
border:1px solid gray; }
}
Then in order to have 2 children side by side you can use either flex layout or float layout as you did, but again you have assume that "width:50%" is actually without the margin so real width will be 50% + 4px (2px left + 2px right) margin. In order to solve this you can use again calc();
#leftdiv { #rightdiv {
height:200px; height:200px;
width:calc(50% - 4px); width:calc(50% - 4px);
background-color:gray; background-color:gray;
float:left; float:right;
margin:2px; margin:2px;
}
Also have in mind that because the children elements are floated, the parent element will have a height of 0. In order to make parent element to wrap its children you must either set some height of #center element (in your case 204px, 200px for children and 4px for its margin) or to use the following css which does the trick. The css will add empty block element right after both children(because it has propeerty "clear") and because it is block element, the parent will extend.
#center:after {
content:"";
display:block;
clear:both;
}
First of all you have to divide this within 100% width with margin as i have done!
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:48.5%;
background-color:gray;
float:left;
margin:1%;
margin-right:0px;
}
#rightdiv{
height:200px;
width:48.5%;
background-color:yellow;
float:left;
margin:1%;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
I'm currently playing around with HTML and using position to align my div content.
At the moment, I have 3 divs. 2 divs using position:fixed and the other using position:relative.
My two fixed divs span the width of the page at 100% and are aligned at the top of the webpage. Like a top bar.
My third div is placed underneath the top bar with position:relative. The problem i'm having is that the third div is not being positioned underneath the two fixed divs (see picture)
Here is my code:
.topbar-container {
position:fixed;
width:100%;
height:72px;
background-color:#ffffff;
border-bottom:1px solid #e0e0e0;
z-index:2;
top:0;
}
.topbar {
position:fixed;
width:1200px;
height:72px;
left:50%;
margin-left:-600px;
top:0;
}
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
}
My HTML:
<div class="topbar-container">
<div class="topbar">
</div>
</div>
<div class="body-container">
</div>
As you can tell by the picture, the div with the red border is being pushed up to the top of the page, where i thought by using position:relative would have fixed the problem.
Could someone please take a look for me?
Thanks in advance
http://www.dumpt.com/img/viewer.php?file=d96p2ywgzqs5bmnkac7q.png
Setting position: fixed or position: absolute will remove the element from the page flow. You now need to explicitly set the top property for .body-container to make it appear under the .topbar-container:
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
top: 72px; /* must be >= the height of .topbar-container */
}
I am facing problem while centering a div of fixed width & height and placing two divs side by side inside it. What i want to achieve, at later point of time, is the slide to left effect on the second div (on top of first div) based on some event. Below is what i tried:
HTML:
<div id="center">
<div id="firstel"></div>
<div id="secondel"></div>
</div>
CSS:
#center{
position:absolute;
border:1px solid black;
width:200px;
height:100px;
overflow:hidden;
top:50%;
left:50%;
}
#firstel{
background-color:red;
}
#secondel{
background-color:blue;
}
#firstel,#secondel{
position:relative;
width:200px;
height:100px;
display:inline-block;
float:left;
}
JSFIDDLE: link
Any help is appreciated!
#center{
position:absolute;
border:1px solid black;
width:100%; //change this
overflow:hidden;
top:50%;
left:50%;
}
Demo here
#center and #firstel,#secondel ID's were of same width(200px), If you need to show side by side eitherof the ids values have to be changed
You can try like this: Demo
#firstel,#secondel{
width:50%; /* changed value in % or you can use 100px too as per your need */
height:100px;
display:inline-block;
float:left;
}
if u want the two divs side by side
change the widths of the divs
change the divs width that shoild be less than the parent div width
#firstel,#secondel{
position:relative;
width:100px;
height:100px;
display:inline-block;
float:left;
}
I have two divs, .div1 & .div2, each with a width of 20%. I also have a another div .bar inside of .div1. This .bar div has a positioning of absolute left 100%.
I want .bar (blue div) to remain at same point at different screen sizes.
What would be the procedure to keep the blue bar and gray div in same point with different screen size?
HTML
<div class="div1">
<div class="bar">
This is a Bar
</div>
</div>
<div class="div2">
this is Div 2
</div>
CSS
.div1{
background:red;
}
.div2{
background:#ccc;
margin-top:25px !important;
}
.div1,.div2{
position:relative;
width:20%;
float:left;
margin:0px 10px;
height:180px;
}
.bar{
background:blue;
position:absolute;
left:100%;
top:0px;
width:130px;
z-index:10;
}
Fiddle
here you go
http://jsfiddle.net/97s283he/2/
.div2{
background:#ccc;
left: 100px;
margin-left: 0px;
}
.div1,.div2{
position:relative;
width:20%;
float:left;
height:180px;
}
I can't seem to centre align my div(title) which sits inside another div.
HTML
<div class="wrapper">
<div id="header">
<div class="title">Home</div>
</div>
</div>
CSS
#header {
position:relative;
width:1200px;
height:400px;
margin:auto;
border:1px solid red;
}
.title {
position:absolute;
width:1000px;
height:140px;
background-color:red;
margin:auto;
}
Remove position: absolute and it works perfectly.
Position: absolute is only necessary when you need very specific placement outside of the normal document flow. In this case, nothing special is needed apart from automatic left and right margins, which you already have.
you are mixing stuff.
Remove position absolute.
or if you want it to be absolute you can do this
.title {
position:absolute;
width:1000px;
height:140px;
left: 50%;
background-color:red;
margin-left:-500px;
}