I need to get the child div to fill the padding of parent div without removing the padding of parent div.
<body>
<div class="parent">
<div class="child">
my image
</div>
</div>
.parent {
padding: 0px 20px 0px 20px;
background-color: yellow;
height: 300px;
width: 300px;
}
.child {
height: 300px;
width: 300px;
background-color: green;
width: 100%;
}
JSFIDDLE here
Preferred solutions are either css or html changes, no js.
Thank you all!
I'm not sure if this is the best way to do it, but perhaps add some negative margin to the child and then fix it with padding?
.child {
height: 300px;
width: 300px;
background-color: green;
width: 100%;
margin: 0 -20px;
padding: 0 20px;
}
fiddle
Related
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;
}
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
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>
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%;
}
Not sure how to title the question. I have an html structure like this:
<div id="nav"></div>
<div id="wrapper">
<div id="content">
</div>
</div>
With some css like this:
#nav {
width: 200px;
height: 50px;
margin: 0 0 0 -100px;
position: fixed;
left: 50%;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
The wrapper is wider than the content, and the content is centered in the wrapper. My problem is keeping the nav div, which is fixed to the top of the page, centered/aligned with the content div when the window is smaller than the wrapper div. Issues arise when you scroll left and right, the fixed div stays centered in the window and the content div scrolls left and right. I'm trying to accomplish this without javascript.
Here's a jsfiddle of what I'm running into, resize the results window to see how the nav div won't stay centered/aligned with the content div when the window is smaller than the wrapper div.
http://jsfiddle.net/p2Mzx/1/
Thanks in advance!
The easiest solution would be to put #nav in your #wrapper and give it a horizontal margin of 25px:
html:
<div id="wrapper">
<div id="nav"></div>
<div id="content">
</div>
</div>
css:
#nav {
width: 200px;
height: 50px;
margin: 0 25px;
position: fixed;
top: 0;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Also see the fiddle.
It would be more appropriate to put the nav inside the wrapper, just above the content.
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
</div>
The CSS of the nav can have left and right margins of 25px. Also absolute positioning and the width is not needed.
#nav {
height: 50px;
margin: 0px 25px 0px 25px;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Please see this fiddle: http://jsfiddle.net/p2Mzx/20/
You can fixed the nav and content to give padding-top.
Consider this link jsfiddle
I think you can add margin: 0 auto for nav too.
Then nav will be positoned to parent element just like wrapper,centered.
but removed fixed form nav. position:fixed makes it positioned to the browser window and out of narmal flow. Is that you want?