image of what I am trying to do
I am trying to have an image aligned left with a colored text box that overlaps (positioned off-center) to the image. I can get that by creating a div class="mycontainer" with div class= my text-box" and css (see below), but I can't seem to figure out how to make text wrap around the colored text box. It wraps around the image, but keeps pushing the text box down.
.mycontainer {
position: relative;
font-family: Arial;
width: 100%;
}
.mytext-block {
position:absolute;
margin-top: 50px;
margin-left: 150px;
background-color:turquoise;
color: black;
padding-left: 10px;
padding-right: 10px;
}
Hi Rachel here is a way to wrap text around an image which is inset into a colored box.
.mycontainer {
position: relative;
font-family: Arial;
width: 100%;
margin: auto;
max-width: 670px;
}
.mytext-block {
width: 300px;
height: 400px;
float: left;
vertical-align: middle;
background-color: turquoise;
color: black;
}
#image {
width: 250px;
height: 100px;
position: relative;
float: left;
left: -190px;
shape-outside: content-box;
margin: 140px -170px 0 0;
}
#text {
font-size: 140%;
padding: 30px;
}
<div class="mycontainer">
<div class="mytext-block"></div>
<img id="image" src="https://lorempixel.com/300/100/">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque placerat dolor sed dolor euismod hendrerit. Integer eget elit nibh. Vestibulum posuere. Sed elementum bibendum magna, nec tempus augue egestas quis. Pellentesque lacus justo, vehicula vitae nisl sed, semper euismod dui.
</div>
</div>
<!-- Click the "Run code snippet" below to see it. Hope this helps. -->
I'm not a clever man, just trying to make a responsive page with a left sidebar, so far that's okay, but I cannot figure out how to align the content of the main div to the top.
This is the code: https://jsfiddle.net/kissja74/df8vkn2a/
#content {
position: relative;
max-width: 400px;
margin: 0 auto;
}
#menu {
position: relative;
width: 50px;
height: 30px;
margin-left: -50px;
background-color: blue;
}
<div id='content'>
<div id='menu'>menu</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum porttitor accumsan. Aliquam at egestas lacus, sed ultrices dui.</p>
</div>
Add to your style
#menu {float: left}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am looking for a way to allow an image inside of a div to stay overflow:visible and to allow the border of the parent div to overlap the image. Right now I have the image right where I want it using negative margins, but the images is covering the parent div's border.
I tried using z-index for the image and the div but that did now work.
This is the effect that I am trying to achieve.
http://imgur.com/a/yt8eU
This where I currently am.
http://imgur.com/a/sgYjI
https://jsfiddle.net/zgwywq0v/
random html <p>
Position the image absolutely or relatively and set it z-index: -1.
div.keynote {
border: 3px solid #F68B1F;
position: relative;
}
div.keynote img {
position: absolute;
left: -20px;
top: -20px;
z-index: -1;
}
https://jsfiddle.net/zgwywq0v/3/
The main trick here is to use the pseudo element ::before for the border, and to align them left/right I gave their parent keynote display: flex
Note, an obvious way would be using z-index, though if one can do it without, do it without
div.keynote {
position: relative;
display: flex;
}
div.keynote::before {
content: '';
position: absolute;
border: 3px solid #F68B1F;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
}
div.keynote .speaker-info {
position: relative;
padding: 30px 30px 30px 10px;
box-sizing: border-box;
}
<div class="keynote keynote-border">
<div>
<img src="http://placehold.it/240x320">
</div>
<div class="speaker-info">
<p class="name">PASTOR
<br><strong>PATRICK</strong>WINFIELD</p>
<p class="session">PREPARING FOR TOMORROW</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie rutrum ipsum, luctus interdum metus egestas non. Aliquam at mi sollicitudin leo blandit ornare. Suspendisse laoreet ultrices ante. Nunc a velit elementum, pretium erat ut, vulputate
ante. Maecenas ac magna augue. Donec ac mauris lectus.</p>
</div>
</div>
Updated based on comment
If you can't/don't want to use flex, here is a fallback
div.keynote {
position: relative;
overflow: auto; /* clear float and grow with its content */
}
div.keynote::before {
content: '';
position: absolute;
border: 3px solid #F68B1F;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
}
div.keynote div:first-child {
float: left;
width: 240px;
}
div.keynote .speaker-info {
position: relative;
margin-left: 240px; /* left div width */
padding: 30px 30px 30px 10px;
box-sizing: border-box;
}
<div class="keynote keynote-border">
<div>
<img src="http://placehold.it/240x320">
</div>
<div class="speaker-info">
<p class="name">PASTOR
<br><strong>PATRICK</strong>WINFIELD</p>
<p class="session">PREPARING FOR TOMORROW</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie rutrum ipsum, luctus interdum metus egestas non. Aliquam at mi sollicitudin leo blandit ornare. Suspendisse laoreet ultrices ante. Nunc a velit elementum, pretium erat ut, vulputate
ante. Maecenas ac magna augue. Donec ac mauris lectus.</p>
</div>
</div>
Take the image out of the div and place bordered div and img inside a parent with position: relative; then you can change the position and z-index of bordered div and img to get your result.
This looks like the perfect opportunity to deploy an ::after pseudo-element - this will enable you to make the orange border exactly the dimensions you need it to be and position it exactly where you want it to be, completely independently of all the other elements.
.profile-card {
margin: 100px 0 0 100px;
width: 600px;
height: 300px;
font-family: arial, helvetica, sans-serif;
}
.profile-card::after {
content: '';
position: absolute;
top: 70px;
left: 70px;
z-index: 0;
display: block;
width: 600px;
height: 220px;
border: 3px solid rgb(255,165,0);
}
.profile-card h2 {
font-weight: 300;
}
.profile-card h2 b {
font-weight: 900;
}
.profile-card p,
.profile-card a.more {
font-size: 11px;
}
.profile-card h2,
.profile-card h2 ~ strong,
.profile-card a.more {
text-transform: uppercase;
}
.profile-card img {
display: block;
float: right;
width: 280px;
height: 280px;
background-color: rgb(191,191,191);
border: 1px solid rgb(0,0,0);
transform: translateY(-108px);
}
.profile-card a.more {
display: inline-block;
position: relative;
z-index: 6;
margin-left: 90px;
padding: 12px;
color: rgb(255,255,255);
background-color: rgb(255,165,0);
text-decoration: none;
}
<div class="profile-card">
<h2><b>Profile</b> Name</h2>
<img src="/profile-name.png" alt="Profile Photo" />
<strong>Profile Tagline Here</strong>
<p>Paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here.</p>
<a class="more" href="/more.html">Read More</a>
</div>
I have two sections stacked. I'm using a position:relative on the container div and then using position:absolute on the child divs to position them with respect to the top of the parent container.
This is my code (also on this JSFiddle):
html,body{height: 100%; width: 100%;}
h1{
font-size: 20px;
font-family: 'Avenir', sans-serif;
color: #212121;
}
h2{
font-size: 18px;
font-family: 'Avenir', sans-serif;
font-weight: lighter;
color: #424242;
}
p{
font-family: 'Avenir', sans-serif;
font-size: 18px;
}
.container{
position: relative;
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
#header{
position: absolute;
top: 10px;
max-width: 960px;
line-height: 30px;
}
#header h1{padding-top: 5px;}
#header {max-width: 800px;}
#projects{
position: absolute;
top: 240px;
}
<div class = "container">
<section id = "header">
<h1>Name Lastname</h1>
<h2>Description, Description</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod non metus id semper. Integer volutpat, mauris vitae pulvinar rhoncus, lacus lectus euismod augue, sit amet interdum lectus leo et magna. Curabitur in tellus vel tellus finibus faucibus quis sit amet risus. Etiam id sagittis ligula. Ut facilisis, nisi eu.!
</p>
</section>
<section id = "projects">
<p>Another paragraph on projects</p>
</section>
</div>
I am trying to make the page responsive but, when I reduce the width of the page, the header div (top section) crunches into the bottom projects div which makes it illegible.
How can I create a constant spacing between the two divs?
As mentioned in the above comment, the answer is to remove the position: absolute;. The default flow within the parent container will be for the child divs to stack. You can then adjust the spacing between the child divs with margin-top or margin-bottom.
I have a list of items which consist of an image and blockquote. I have been trying to set the images width to a set max-width. Then trying to make blockquote fit in automatically by the images side. Whilst keeping both elements vertically aligned center too.
I'M having some problems and would be thankful if someone could help. jsFiddle
html
<ul>
<li>
<div><img src="http://placehold.it/180x100"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
<li>
<div><img src="http://placehold.it/146x16"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 100%;
position: relative;
float: left;
padding: 0 0 30px;
}
ul li div {
width: 200px;
position: relative;
float: left;
height: 100%;
max-height: 100%;
display:table-cell;
vertical-align: middle;
}
ul li img {
display:table-cell;
vertical-align: middle;
}
ul li blockquote {
color: #999;
float: right;
font-style: italic;
margin: 0;
width: 70%;
}
ul li blockquote p {
margin: 10px 0;
}
I have removed float, so that it could be vertically aligned properly. Please check this http://jsfiddle.net/NLCnk/3/
If using flexbox is an option for you, take a look at http://jsfiddle.net/dcsturm/ypxud/
Updated the fiddle, because I had overread the width-aspect of your request.
And if you want to learn more about this awesome technic: http://philipwalton.github.io/solved-by-flexbox/