I've got a fairly simple CSS where I want to display a border slightly off center to the right and bottom, I'm using the pseudo-selector :after to display it.
The problem i'm having is that the border it's displaying is running to the height of the outer div that's dictated by the amount of text displayed, rather than the img itself (which is what I want it to do).
If I put another div inside to wrap around the image it doesn't seem to make a difference, the same if I make the pseudo-selector after the image and convert the image to a block.
Js Fiddle to show all you lovely smart people that might be able to help me!
If I put another div inside to wrap around the image it doesn't seem to make a difference
That’s because that div does not actually wrap around the image taking its dimensions – but is as high as your whole outer container, because that has display: grid
You’d need to wrap .projectimage into an additional div, so that that becomes the grid item that takes full height, and the .projectimage element can then gets is height from the image it contains.
.project {
width: 60%;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
padding: 50px 0;
}
.projectimage {
position: relative;
display: inline-block;
}
.projectimage img {
position: relative;
z-index: 2;
}
.projectcontentleft {
padding-right: 50px;
}
.projectimage img {
width: 100%;
height: auto;
}
.projectimage:after {
content: " ";
position: absolute;
left: 30px;
bottom: -30px;
border: 10px solid rgba(214, 23, 71, 0.07);
display: block;
width: 100%;
height: 100%;
transition: all 300ms linear 0s;
z-index: 1;
}
<div>
<div class="project">
<div class="projectcontentleft">
<h3><strong>Header</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3><strong>Appeals</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="projectimage-holder">
<div class="projectimage">
<img src="http://www.bbbhire.co.uk/images/services2.jpg" />
</div>
</div>
</div>
Related
I have a similar problem as described here:
Center page vertically, make it scroll if bigger than screen
however I'm trying to find a pure CSS only solution, not involving JS.
I have a fixed containers defined like that:
.parent{
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.child{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(50%);
margin: 0 auto;
width: 600px;
}
It's well centered (as expected) when child is smaller than parent/viewport height. The problem is when child's height is greater then parent's height. Let's say parent has height 1000 px and child's height is 1600 px.
With above styles applied, I can scroll child (as expected) but not all the way to its top. The top of child is hidden and not possible to scroll to it.
What I want to achieve is to be able to scroll the child all the way to its top border.
The main question is if it's possible to achieve that with CSS only?
.parent {
display: flex; /* Use this proparty */
align-items: center; /* For Center align */
justify-content: center; /* For Center align */
overflow: auto; /* For auto scroll */
padding: 20px; /* This is only for spacing */
}
.child {
border: 1px solid red;
margin: 0 auto;
max-width: 560px; /* Use max-width instant of width in responsive it's help you for better view */
max-height: 100%; /* Use max-height instant of heiht in responsive it's tack auto height from text/content */
}
<!-- Parent Div start Here -->
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<!-- Parent Div ends Here -->
I want to make 2 responsive divs side by side, while keeping them the same height. One of them is an image, and the other div is a text. How would i make sure the image height equal, without using JavaScript. my image dimensions are 1000 × 1799.
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
}
#image img {
width: 50%;
}
.box {
display: flex;
flex-direction: row;
}
<div class="container">
<div class="box">
<div id="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="image">
<img src="lfc.png">
</div>
</div>
</div>
whats happening is that if the try to make the height a percentage then it will obviously change to fit current screen settings but i want to make it responsive and same height.
thanks in advance!
Your two columns actually are the same height already; you've just not allowed your image to expand to fill the height of the container. To allow this, simply set width: 100% and height: 100% on #image img. Be warned that in doing so you'll skew the image aspect ratio. If you want to maintain the ratio, you'll need to specify width: auto instead, though this will chop off parts of the image when there isn't room to display it all.
Note that you'll also want a width of 50% on #image, so that both the text container and image container take up half of the width.
Also note that due to the nature of text taking up a different number of lines at different widths, it will always be a different height to the image. However, the container will always be the same height. I've added a background to the container to demonstrate this.
This can be seen in the following.
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
background: cyan;
}
#image {
width: 50%;
}
#image img {
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-direction: row;
}
<body>
<div class="container">
<div class="box">
<div id="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="image">
<img src="http://placehold.it/100">
</div>
</div>
</div>
</body>
You can use flexbox:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="col"><img src="lfc.png"></div>
</div>
I'm trying to create a row that spans the width of my device that the user can tap to take then to a specified link.
I've created an image that is the 'disclosure indicator' (chevron) found on table rows in iOS. I just can't figure out how I can set my multi-line text to the left of the chevron, and keep the chevron to the right of the text and centered. (see image).
Any ideas?
Thanks
You can use transform to vertically align the chevron.
Fiddle
div {
position: relative;
border: 1px solid black;
padding: 10px 40px 10px 10px;
}
div:after {
content: '›';
font-size: 40px;
color: #444;
right: 20px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Ignore whether or not this actually looks good.
I'm looking for the best way to align the top of text with an adjacent block element with a background or image in it. With the test-case snippet below, what I'm trying to [elegantly] get rid of is the red gap:
.col {
width: 40%;
min-height: 300px;
float: left;
margin-right: 4%;
}
.bg {
background: #333;
}
p,h1 {
margin: 0;
}
<div class="col bg"></div>
<div class="col">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
This is essentially coming from the line-height. Setting line-height to 1 solves the problem but then borks any multi-line text which I need to support. Even applying the line-height change just to the :first-line results in bad spacing on multi-line text. Right now, the best I can think of is trying to come up with some magic-number negative em margin-top value to apply to headings, paragraphs, etc., but I'm wondering if there's a better way.
The h1 itself is aligned to the simbling element, but the text inside it is not.
To verticaly align the text into a h1 tag you need to set the line height.
.col {
width: 40%;
min-height: 300px;
float: left;
margin-right: 4%;
}
.bg {
background: #333;
}
p,h1 {
margin: 0;
}
.col h1 {
line-height: 21px;
}
.col h1 span {
vertical-align:super;
}
div{
padding:0;
}
<div class="col bg"></div>
<div class="col">
<h1><span>Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
EDIT:
to use it in a multi-line: put your text into a span with a vertical-align:super; The line-height property on h1 will control the space between lines.
The other answer provided right now does work but I really wanted to avoid the extra markup required to make it work. Unfortunately that led me to a magic number solution. I'm not sure there's a good solution right now that's pure-CSS. I played with the :first-line pseudo selector but to ill effect.
What I ended up with was just using a negative margin-top on the <h1> element. I think the value of of the margin more or less works out to:
-(({line-height} - 1 ) / 2)em
That assumes you're using unitless line-height values.
I have 2 columns inside a container div both with a width of 50%, 1 column has dummy text etc the other has a google map iframe. I have wrapped a fluid container around the map and applied position absolute; to the iframe to expand the map inside its container but I notice the map seems to shrink and expand a lot beyond the contact column, can anyone advise how I can consistently make the map be the same height as the other column? I need this layout to remain fluid so the full 100% width
JSFiddle: http://jsfiddle.net/Xm6GW/1/
CSS
.col-ctn {
width: 100%;
}
.col {
width: 50%;
background: silver
}
.contact-col {
float: left;
}
.map-col {
float: right;
}
.fluid-map {
position: relative;
padding-bottom: 100%;
height: 0;
}
.fluid-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How about this:
FIDDLE
(Relevant) CSS
html,body,.col-ctn,.contact-col
{
height: 100%;
}
.fluid-map {
position: absolute;
top:0;
left:50%;
height: 100%;
}
I have done the changes as per your requirement but you have to change the css naming as per your requiremnet.
CSS:-
body, html {
height: 100%;
padding: 0;
margin:0;
}
.main_container
{
width:100%;
height:98%;
}
.info_container
{
width:49.2%;
height:100%;
border:1px solid;
float:left;
}
.map_container
{
width:50%;
height:100%;
border:1px solid;
float:right;
}
Html:-
<div class="main_container">
<div class="info_container">
<div class="inner">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="map_container">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/?ie=UTF8&t=m&ll=47.754098,12.480469&spn=20.702603,37.353516&z=4&output=embed"></iframe>
</div>
</div>
fiddle link:-
http://jsfiddle.net/Xm6GW/1/