I'm trying to achieve the below:
So the darker blue box will be the parent div and then the teal blue one will be the child div, see the above image.
I have the below code, but can't seem to work out how to achieve it!
body {
padding: 0;
margin: 0;
background-color: #6ca591;
}
.container {
margin: 50px auto;
width: 1000px;
background-color: red;
padding: 80px;
}
.portfolio_main_img {
background-color: #327acd;
display: block;
position: relative;
padding-bottom: 30px;
z-index: 1;
}
.portfolio_main_img img {
margin: -28px auto 0 auto;
display: table;
position: relative;
width: 50%;
z-index: 99;
}
<div class="container">
<div class="portfolio_main_img">
<img src="https://via.placeholder.com/150C/O https://placeholder.com/">
</div>
</div>
If anyone could help me out or give me some tips it would be greatly appreciated!
You are facing margin collpasing where the negative margin is pulling the container instead of only the image. Change the image to inline-block to avoid this and center it using text-align
body {
padding: 0;
margin: 0;
background-color: #6ca591;
}
.container {
margin: 50px auto;
width: 1000px;
background-color: red;
padding: 80px;
}
.portfolio_main_img {
background-color: #327acd;
display: block;
padding-bottom: 30px;
text-align:center;
}
.portfolio_main_img img {
margin: -28px auto 0 auto;
display: inline-block;
width: 50%;
}
<div class="container">
<div class="portfolio_main_img">
<img src="https://via.placeholder.com/150C/O https://placeholder.com/">
</div>
</div>
Related
I've looked everywhere for a solution to this problem, even looked at some similar questions posted here, so please don't mark this as a duplicate, because I still can't figure this out.
As you can see here, I’m trying to keep the image above the red container, at an exact position, but when I zoom in or change the size of the screen, the image isn’t at the place I want it to be, it moves to the left of the page. (Try zooming in on the page yourself or sliding the slide all the way to the right in editor mode, to see what I mean).
I’ve tried everything from absolute and relative positioning and making the image an inline-block and block. I don’t know what to do?
Please help me understand.
The code is here
.container {
background: red;
width: 50em;
height: 50em;
margin: 2em auto 3em auto;
position: relative;
}
.image {
width: 150px;
position: relative;
margin: 3em 0 0 13em;
}
.header {
font-size: 3em;
position: absolute;
left: 6em;
top: 1em;
}
<img class="image" src="https://i.imgur.com/zKdvwvz.jpg" alt="" />
<div class="container">
<h2 class="header">Hello</h2>
</div>
You could wrapp your code in a wrapper and define for it margin: 0 auto;. Furthermore you should replace in the container-margin the auto with 0:
#wrapper {
margin: 0 auto;
}
.container {
...
margin: 2em 0 3em 0;
}
Working example:
#wrapper {
margin: 0 auto;
}
.image {
width: 150px;
margin: 3em 0 0 13em;
}
.container {
background: red;
width: 50em;
height: 50em;
margin: 2em 0 3em 0;
position: relative;
}
.header {
font-size: 3em;
position: absolute;
left: 6em;
top: 1em;
}
<div id="wrapper">
<img class="image" src="https://i.imgur.com/zKdvwvz.jpg" alt="" />
<div class="container">
<h2 class="header">Hello</h2>
</div>
</div>
If you want the wrapper (with the container) centered you could define display: flex for the element arround the wrapper (maybe main):
Working example:
main {
display: flex;
}
#wrapper {
margin: 0 auto;
}
.image {
width: 150px;
margin: 3em 0 0 13em;
}
.container {
background: red;
width: 50em;
height: 50em;
margin: 2em 0 3em 0;
position: relative;
}
.header {
font-size: 3em;
position: absolute;
left: 6em;
top: 1em;
}
<main>
<div id="wrapper">
<img class="image" src="https://i.imgur.com/zKdvwvz.jpg" alt="" />
<div class="container">
<h2 class="header">Hello</h2>
</div>
</div>
</main>
I have a super simple example with a wrapper div and another div inside this wrapper called header.
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
Is it possible that the inner div called header sticks out of the wrapper on both sides with lets say 20px or even 100viewport wodth?
If I understand you correctly you want the inner header to stick out 20px. You can do that with negative margins:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin-left: -20px;
margin-right: -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
if you want it to stretch through the whole viewport, you might have to position the element absolutely and use left: 0; right: 0;, however IMO it would be cleaner to move the div out of the container in that case.
You could give it a negative left/right margin:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin: 0 -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
I asked this earlier and was sent: Can I create a div with a Curved bottom?
But a curved bottom div is not what I want.
I am after a very large circle (not just with a curved bottom but a proper circle)... which is positioned with a negative margin-top and has a flexible width when the browser windows is resized.
Here's an image of exactly what I want
Here's an image of what the layout should look like zoomed out - so you can see the whole circle
Here's what I have so far:
https://jsfiddle.net/etmgho6s/
#container {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
#nav-bg {
width: 90vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -45vw;
background: red;
border-radius: 50%;
position: absolute;
}
#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}
Any help would be appreciated!
Thanks, Josh
Does this work for you?
#container {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
display: flex; /* line added */
justify-content: center; /* line added */
}
#nav-bg {
width: 150vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -60vw;
background: red;
border-radius: 50%;
position: absolute;
}
#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}
<div id="container">
<div id="nav-bg"></div>
<h1 id="title">Navigation content goes here</h1>
</div>
I want the header to align at the top-left-corner of the centered div element. The only way I can think of doing this is setting position to relative and using top with a value of 20%. The problem with this is that it causes the header to stretch the page further to the right as can be see in the fiddle.
body {
font-family: Europa;
}
.header {
position: relative;
left: 20%;
display: block;
margin-left: auto;
margin-right: auto
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.box {
height: 500px;
width: 500px;
position: relative;
border-radius: 20px;
background: #6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="header">
<h4>header</h4>
</div>
<div class="box">
</div>
Simply give your header block the same width as your box.
body {
font-family: Europa;
}
.header {
position: relative;
width:500px;
display: block;
margin-left: auto;
margin-right: auto
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.box {
height: 500px;
width: 500px;
position: relative;
border-radius: 20px;
background: #6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="header">
<h4>header</h4>
</div>
<div class="box">
</div>
Using a .centered wrapping div you can more easily obtain your desired results w/ keeping the elements fluid if wanted.
<div class="centered">
<h4>header</h4>
<div class="speech-bubble"></div>
</div>
<style>
h4 {
font-size: 5em;
margin: 0 auto;
}
.speech-bubble {
height: 500px;
width: 100%;
border-radius: 20px;
background:#6441a5;
margin: auto;
}
.centered{
width:500px;
margin: 0 auto;
position: relative;
}
</style>
Try giving your header h4 the same width as your speech-bubble:
https://jsfiddle.net/hxjdy720/
h4 {
font-size: 5em;
margin: 0 auto;
width: 500px;
}
The simplest solution is to put your two elements in one div, like this:
body {
font-family: Europa;
}
.header {
display: block;
margin: auto;
width: 500px;
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.speech-bubble {
height: 500px;
width:500px;
position: relative;
border-radius: 20px;
background:#6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="header">
<h4>header</h4>
<div class="speech-bubble">
</div>
</div>
I've checked multiple threads and have tried multiple options. I've tried setting display to block, setting specific width for both image and container. Any other condition that I might be missing out on?
HTML:
<footer>
<div id="footercontent">
<div id="logobox">
<img src="images/logo.png" /> <--- THIS IS THE IMAGE IN QUESTION
</div>
<div id="social">
</div>
</div>
</footer>
CSS:
footer {
width: 100%;
height: 200px;
background-color: white;
position: relative;
margin-top: 70px;
}
#footercontent {
width: 70%;
height: 100%;
background-color: black;
margin: auto;
}
#logobox {
width: 30%;
height: 100%;
margin-right: 0;
float: left;
}
img {
height: 70%;
position: absolute;
margin: auto;
display: block;
}
#social {
width: 70%;
height: 100%;
background-color: white;
float: left;
}
Remove position: absolute and apply margin: 0 auto to img. When position: absolute is applied on some element, it is taken out from the normal flow of DOM
img {
height: 70%;
margin: 0 auto;
display: block;
}