I have a div mainlogo inside another div for logo. Now, when I give it margin on top, it flows outside the outer divs. What I want is that when I give it margin-top, it should displace itself downward, instead of flowing its margin outside the parent.
.header {
width: inherit;
height: 100px;
background-color: #0080FF;
box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
}
.headerdiv img {
width: 80px;
}
.headerdiv {
width: 1020px;
margin: 0 auto;
height: inherit;
position: relative;
}
#mainlogo {
height: 80px;
width: 350px;
margin-top: 10px;
}
<div class="header">
<div class="headerdiv">
<a href="onlinequiz login.php">
<div id="mainlogo">
<img src="Images/logo.png"></img>
</div>
</a>
</div>
</div>
Why does it happen and how can I solve it?
Tricky margin spec. This page has a very good explanation of the behavior you are running into. If you don't want to change the #mainlogo whitespace to padding, you can work around the margin collapse by giving an overflow: hidden property to your .header.
.header {
width: inherit;
height: 100px;
background-color: #0080FF;
box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
overflow: hidden;
}
.headerdiv img {
width: 80px;
}
.headerdiv {
width: 1020px;
margin: 0 auto;
height: inherit;
position: relative;
}
#mainlogo {
height: 80px;
width: 350px;
margin-top: 10px;
}
<div class="header">
<div class="headerdiv">
<a href="onlinequiz login.php">
<div id="mainlogo">
<img src="Images/logo.png"></img>
</div>
</a>
</div>
</div>
Also, you might consider changing the #mainlogo div into a span and self-closing your img tag to avoid unexpected cross-browser quirks.
beacuse you are using a generalize DIV's as it is. Use floating property i.e. float:left there,
and it will work
like this,
#mainlogo {
float:left;
height: 80px;
width: 350px;
margin-top:20px;
}
Try this ... Set the position property of headerdiv to position: absolute;
.headerdiv {
width: 1020px;
margin: 0 auto;
height: inherit;
position: absolute;
}
Related
Why don't #img1 and #canvas1 fully overlap in the below code? I want them in exactly the same place. I'm layering images with JavaScript animation on canvas. Initial thoughts were that the padding or margin default settings were interfering somewhere. I've tried setting to zero for all elements - it doesn't work. I understand that position:relative positions an element relative to it's normal position. Clearly missing a default setting or something obvious.
<!DOCTYPE html>
<html>
<head>
<style>
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: relative;
left: -50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<img src="" id="img1" />
<canvas id="canvas1"></canvas>
</div>
</div>
</html>
Two things to do:
1.) Don't leave a linebreak or space between the two elements in the HTML code (see below)
2.) Set the left setting for canvas to -52px - you have to consider the 2 x 1px border of the image.
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: relative;
left: -52px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<img src="" id="img1" /><canvas id="canvas1"></canvas>
</div>
</div>
A couple of remarks:
use box-sizing: border-box for 'easier' sizing. With border-box the border width and padding are substracted from the elemenent istead of added on to it. An element with width: 100px, a border-width of 1px and a padding of 10px will be 100 + (2 * 1) + (2 * 10) = 122px wide without box-sizing: border-box but the element will be 100px wide even with the border-width and padding when the box-sizing is set to border-box. See here for a (better) more detailed explanation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
When trying to overlap element I find it easiest to keep the surrounding container element as empty as possible. Taking out the h1 element makes overlapping a lot more manageable.
Change the position of the canvas element to absolute. This way it no longer takes up place in the DOM and it is positioned in the upper left container of its positioning parent (in your example the div.chapter in my answer the div.container). This also helps when trying to have elements line up.
* {
box-sizing: border-box;
}
.container {
position: relative;
}
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: absolute;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<div class="container">
<img src="" id="img1" />
<canvas id="canvas1"></canvas>
</div>
</div>
</div>
#img1 {
border: 1px solid green;
position: relative;
left: 56px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
this worked...
There are certainly better ways to achieve the effect you're going for but to answer your question, I believe the spacing is being caused by the default font size on the parent element. Set the font size to 0px on the chapter div and you can see the elements now overlap each other.
i have two divs
first div : text-logo
.text-logo {
width: 250px;
height: 60px;
margin: auto;
border: 2px solid #07a2a0;
border-radius: 15px 50px 15px 50px;
margin-top: 100px;
}
<div class="text-logo"><h4>Just training/cit</h4></div>
second div : image-logo
.image-logo { overflow: hidden; height: 500px;}
.image-logo .left
{
float: left ;
width: 30%;
position: relative;
}
.image-logo .right
{
float: left;
width: 70%;
}
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
}
<div class="image-logo">
<div class="left">
<img src="images/logo.png">
</div>
<div class="right">
<h2>Being auomated much more easy than the manual things
</h2>
<hr>
</div>
i cant see the blue logo with the original size, the upper part of the logo is hidden ,
the picture will show you the problem
,
Try to add z-index
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:2;
}
That's because the div .text-logo is above your logo div. You should change the z-index of one of them. It defines which element should be above another element. Use for your z-index a realistic value, to keep your code a bit cleaner.
.image-logo .left img {
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:5;
}
Check that the element's color is not the same as the background color, as that will obviously make you not to see your element.
I have been a victim of this severally. Hope it helps someone.
I have a parent div that contains a child div. I want the parent div to resize automatically so the child is always inside the parent's borders. Right now the bottom of the child div is extending beyond the bottom of the parent because of relative positioning. How do I get the parent resize?
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
height: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
top: 20px;
left: 20px;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>
Relative positioning moves the element visually so if you want to contain it within the parent you'll need another method to move the child element.
Margin would seem to be the most obvious choice
#parentDiv {
background-color: #eae;
width: 500px;
margin: 40px;
overflow: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
margin-top: 20px;
margin-left: 20px;
<div id="parentDiv">
<div id="childDiv"></div>
</div>
Got rid of the positioning of the childDiv.
Outlined the elements so you can see them clearly.
Since there's min and max dimensions, I put 100% height and width for explicit measurements.
body {
height: 100vh;
width: 100vw;
}
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
outline: 2px dashed blue;
}
#childDiv {
max-width: 400px;
width: 100%;
min-height: 200px;
height: 100%;
background-color: #B9D7D9;
outline: 2px solid red;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>
building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the .flipcontainerelement that is causing this.
It's really weird behaviour and I can't figure out why its behaving in this way.
If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}
<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>
Add float: right; to .flipcontainer css like so:
.flipcontainer {
height: 230px;
width:150px;
float: right;
}
Here is the JSFiddle demo
The margin you saw was because you specified the width to '150px'.
Adding float: left removes this and you can add content next to it
.flipcontainer {
height: 230px;
width:150px;
float: left;
}
See Fiddle http://jsfiddle.net/epe3bfdw/
first of all is there a good tutorial about positioning elements which really explains what's going on? I've read multiple but can't get a grip on it.
the specific problem I have is as follows:
I have a header div-element (in red) with underneath 2 columns(white and green). Normally with float:left; i can position the elements next to each-other. But now I want one (the white one) to move a bit over the header als shown.
with relative positioning with a negative top value I can get the white one at the right position but how to position the second column. When adjusting the browser size it al gets messed up.
#Column1
{
float: left;
position: relative;
top: -140px;
background-color: #FFFFFF;
left: 70px;
width: 280px;
min-height: 500px;
padding: 10px;
}
#Column2
{
float: left;
width: 800px;
background-color: #00FF00;
}
Here is JSFiddle that demonstrates your layout without floats using position absolute.
In my experience position absolute is more flexible and made for this kind of layouts, especially when you want to dock elements using top, right, bottom and left.
There are circumstance where you need to fallback on using floats, but in this case it is not needed.
Use floats to float things around it and position absolute to dock things.
The HTML
<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>
The CSS
#Header {
background-color: red;
height: 200px;
}
#Column1 {
position: relative;
background-color: #FFFFFF;
top: -140px; left: 70px;
width: 280px;
min-height: 500px;
}
#Column2 {
position: absolute;
background-color: #00FF00;
left: 350px; top: 200px; right: 0;
min-height: 360px;
}
Update Remove display:none from the .more class in the JSFiddle and see that the containers are flexible as well.
I'm just gonna spitball here:
HTML
<div id="red"></div>
<div id="white"></div>
<div id="green"></div>
CSS
#red {
width: 100%;
float: left;
height: 100px;
position: relative;
background-color: #f00;
}
#white {
width: 20%;
float: left;
margin-left: 4%;
margin-top: -40px;
position: relative;
background-color: #fff;
height: 400px;
}
#green {
width: 76%;
float: left;
position: relative;
background-color: #0f0;
height: 400px;
}
Does it work?
You could just use a minus margin
http://jsfiddle.net/gAKAK/
This is kind of a complex request, so don't feel bad that you weren't able to figure it out. You shouldn't have to set the width of anything other than your sidebar for this solution; my solution relies on an uncommon use of overflow: hidden to achieve this.
http://jsfiddle.net/Wexcode/uBQEu/
HTML:
<div id="header"></div>
<div id="white"></div>
<div id="green"></div>
CSS:
#header {
background: red;
height: 70px;
border: 1px solid #000; }
#white {
background: #fff;
float: left;
margin: -30px 0 0 70px;
width: 100px;
height: 230px;
border: 1px solid #000; }
#green {
background: green;
overflow: hidden;
height: 201px;
border: 1px solid #000;
border-top: 0;
border-left: 0; }