I am trying to set the margin for multiple div elements inside a container div. Here is the HTML:
<div id="container">
<div id="square"></div>
<div id="square1"></div>
<div id="square2"></div>
</div>
Here is the CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
Now, say I want to edit the margin of square 1. Here is the updated CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
#square1 {
margin-top: 55px;
height: 50px;
background: red;
}
The margin of square 1 is correct. However, it messes up the margin of square2 because now the top margin is measured from square1 instead of the container div. How do I set the margins of all the sibling divs to where they are measured from the container, regardless of what the other sibling divs are added/removed? Any help would be greatly appreciated.
your will need to give position absolute and width 100%; you can check the js fiddle
Js fiddle
like this for every square
#square {
margin-top: 10px;
height: 50px;
background: green;
position:absolute;
width:100%;
}
You're better off dumping these square divs into a relative div and have an absolute position for each square div. You kind of lucked out because you know the height of each of your square divs.
So your HTML stays the same. The reason you put absolute within the relative is so that the absolute value plays into the #container field instead of body.
Your CSS changes however:
#container {
background: #eee;
width: 200px;
height: 500px;
position: relative;
border: 10px solid green;
}
#square {
margin-top: 10px;
position: absolute;
height: 50px;
left: 0;
right: 0;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
position: absolute;
background: black;
left: 0;
right: 0;
}
#square1 {
margin-top: 55px;
position: absolute;
left: 0;
right: 0;
height: 50px;
background: red;
}
Related
I have an outer and inner box with position set to relative. What i want should look like this:
The code is:
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left:100px;
margin-top:100px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
With this style the outer div no more wraps the inner box:
CSS
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 0;
left: 100px;
top: 100px;
background: green;
border: 2px solid red;
}
Thank you.
* Update *
I would like to add that i don't want to fix the height of the outer box. Thanks.
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
Not really.
Relative positioning moves an element from it’s “default” position that it would normally have - but it keeps the original space it would have required reserved, it does not make it “take” the space at the position it was moved to. So while you can move the inner element to the place you want it, it will not make the outer element “grow” accordingly.
I don't want ("mis")use margin for positioning the inner div
Don’t worry about the “semantics of CSS” too much here … There is often more than one way to achieve a desired optical result, and seldom one way is “wrong” and the other one “right”.
As long as the solution you have achieves what you want, and is not hindered by other restrictions - use it!
When the outerbox has position: relative you can use position: absolute for the .innerbox so you can give dimensions to the .outerbox (width and height) and you can use top and left to position the inner rectangle on every position you want...
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
width:200px;
height:100px;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: absolute;
width: 100px;
height: 50px;
left:98px;
top:48px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Hope this will help you.
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
height:200px;
width:300px;
}
.innerbox {
position: absolute;
float: left;
width: 100px;
height: 50px;
margin: 0;
/*left: 100px;
top: 100px; */
bottom:0;
right:0;
background: green;
border: 2px solid red;
}
<div class="outerbox">
<div class="innerbox">
</div>
</div>
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I've three child div and wanted that middle div to ignore width of parent div and take full screen width (yet it needs to maintain its position below first div)
You can define the middle child width a width defined in vw:
.parent {
width: 100px;
height: 40px;
background: blue;
}
.child {
width: 100%;
background: yellow;
}
.overflower {
width: 100vw;
background: red;
}
<div class=parent>
<div class=child>child</div>
<div class=overflower>overflows</div>
<div class=child>child</div>
</div>
Solved this issue by using position: absolute tag. See JSfiddle at: https://jsfiddle.net/sachingpta/3qu3m466/. Sample code
`
html,body{
height: 100%;
padding: 0px;
margin: 0px;
}
.parent{
width: 300px;
height: 100%;
background-color: grey;
margin: 0 auto;
}
.child1{
background-color: red;
}
.child2{
background-color: green;
position: absolute;
left: 0px;
right: 0px;
}
.child3{
background-color: blue;
}
`
I have read here in stackover flow and elsewhere that if we have a parent div with relative position, the child tags with absolute position will not relocate when zooming. But in my following example, it does not obey this rule.
In the main file, I have <img> tags instead of div with ids img1 to
img3
Any advice will be appreciated.
#container {
position: relative;
width: 200px;
height: 200px;
border: 3px solid green;
}
#img1 {
position: absolute;
width: 100px;
height: 100px;
background: red;
left: 25%;
}
#img2 {
position: absolute;
width: 20px;
height: 100px;
background: blue;
left: 30%;
}
#img3 {
position: absolute;
width: 20px;
height: 100px;
background: yellow;
left: 60%;
}
<div id="container">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
This is my code:
.divUserRepCont
{
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
}
.divUserContCon
{
width: auto;
height: 100%;
background-color: red;
}
.divUserCon
{
width: 50px;
height: 20px;
}
HTML:
<div class="divUserRepCont">
<div class="divUserContCon">
<div class="divUserCon">
</div>
</div>
</div>
I am expecting a red bar of width 50px, but instead the auto width "divUserContCon" is filling up the entire 195px of it's parent div. Why is this?
EDIT:
The purpose of divUserContCon having an auto width is because of this:
divUserCon's size will be changing dynamically, and it will have a background colour itself.
divUserContCon, will be the container for divUserCon, which itself will have a background colour AND padding.
So if divUserCon is 50px wide, with a green background, divUserContCon will be 50px wide (auto) + some padding and it's background colour.
width:50px;
Needs to be put in divUserContCon. You can't rely on auto to only take up the width of any child divs.
Try this
<style type="text/css">
.divUserRepCont {
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
}
.divUserContCon {
width: auto;
height: 25px;
}
.divUserCon {
width: 50px;
height: 25px;
background-color: red;
}
</style>
If you want your .divUserCon in the center then just add margin: 0 auto; in the css.
This is how I solved it:
.divUserRepCont
{
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
background-color: orange;
}
.divUserContCon
{
display: inline-block;
height: 100%;
padding-right: 20px;
background-color: yellow;
}
.divUserCon
{
display: inline-block;
height: 20px;
border-top: 5px solid rgb(62, 62, 62);
background-color: red;
}
I replaced the width: auto with display: inline-block;