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>
Related
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>
I'm having trouble getting the following three-column layout to work:
A B C
+-------+-----------+-------------------------+
| | | |
| Fixed | Fixed | Expands to fill width |
| | | |
+-------+-----------+-------------------------+
Where:
A is fixed width.
B is a fixed width.
C contains content which I'd like to fill up the remaining space on the page. The page itself which has a resizable width
I've found numerous solutions where the center column is fluid, but I'm having trouble getting the right column to be the fluid width with the left and middle column having fixed width without having the right column line break when it expands larger. The content in the right column is mostly text while the left and middle columns are images.
Here's a fiddle I've been using for testing which has everything setup: http://jsfiddle.net/7y7Lmvr9/2/
You can ditch the floats and use display:table-cell instead:
$('#div_right').click(function () {
$(this).append('-------');
});
#div_left {
display:table-cell;
border:1px solid #F00;
width: 100px;
}
#div_middle {
display:table-cell;
border:1px solid #0F0;
width: 100px;
}
#div_right {
display:table-cell;
border:1px solid #00F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='div_left'>Fixed width</div>
<div id='div_middle'>Fixed Width</div>
<div id='div_right'>Variable-width (click to widen). 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>
display:table has been said, so i ll only say flex:)
body {
display:flex;
}
body>div {
border:solid;
width:100px;
}
#div_right {
flex:1;
width:auto;
}
<div id='div_left'>
Fixed width
</div>
<div id='div_middle'>
Fixed Width
</div>
<div id='div_right'>
Variable-width (click to widen). 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>
CSS calc() could be one of the solutions.
Demo - http://jsfiddle.net/7y7Lmvr9/3/
#div_left, #div_middle, #div_right {
border: 1px solid red;
box-sizing: border-box;
float:left;
}
#div_left, #div_middle {
width: 100px;
}
#div_right {
width: calc(100% - 200px);
}
Bowser compatibility - http://caniuse.com/#feat=calc
I recommend wrapping the three divs in another div, and setting the wrapper display to "flex." That way you can set the first two divs' width, and set the third to fill the remaining space.
http://jsfiddle.net/6LgkjpwL/
fiddle with flex implemented on wrapper.
A great resource on flex--
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body{
font-weight:bold;
}
#wrapper{
display:flex;
flex-direction: row;
}
#div_left{
order: 1;
overflow: hidden;
border:1px solid #F00;
width: 100px
}
#div_middle {
order: 2;
overflow: hidden;
border:1px solid #0F0;
width: 100px
}
#div_right {
order:3;
flex:1;
border:1px solid #00F;
}
<div style="width:100%; overflow:hidden">
<div id='div_left'>
Fixed width
</div>
<div id='div_middle'>
Fixed Width
</div>
<div id='div_right'>
Variable-width (click to widen). 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>
body{
font-weight:bold;
}
#div_left{
float:left;
overflow: hidden;
border:1px solid #F00;
width: 9%
}
#div_middle {
float:left;
overflow: hidden;
border:1px solid #0F0;
width: 9%
}
#div_right {
float:left;
border:1px solid #00F;
width: 79%
}
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/
I need two DIV to be put side by side and aligned vertically at their bottom.
The orange div doesn't have a width or height. It can grow depending of his content
I should be able to use padding and margin of the green div
I would like to have a solution that doesn't use javascript
See: http://jsfiddle.net/thirtydot/J9eds/
I've used display: inline-block combined with vertical-align: bottom.
HTML:
<div id="container">
<div id="left">
left<br />left<br />left<br />left<br />left<br />left<br />
leftleftleftleftleftleft
</div>
<div id="right"></div>
</div>
CSS:
#container {
border: 1px solid red;
float: left;
}
#left, #right {
border: 2px solid red;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
}
#right {
margin: 20px 20px 0 20px;
padding: 20px;
width: 100px;
}
Not 100% sure, but something like this should work:
<div class="wrapper">
<div class="orange"></div>
<div class="green"></div>
</div>
div.wrapper div {
position: relative;
float: left;
bottom: 0px;
}
May not even need the float.
This was some fun practice :) Its probably not the best answer, but it should get the job done.
html:
<table>
<tr>
<td>
<div id="div3">testing a whole<br/> bunch <Br/>of text and content t<br/>hat this co<br/>uld co<br/>ntain<br/> hadahdee<br/> wha da da deet</div>
</td>
<td>
<div id="div4">nick</div>
</td>
</tr>
</table>
css:
td
{
vertical-align:bottom;
}
#div3
{
border:solid 5px blue;
float:left;
}
#div4
{
width:50px;
height:20px;
border:solid 5px red;
float:right;
}
see code in jsfiddle. add margins to the divs if you'd like
I am sure you'll get something better but to get started this seems to work.
in the css sheet
#box1{
background-color:#FFFF99;
width: 350px;
height: auto;
float: left;
position:absolute;
bottom: 0;
}
#box2{
background-color:#CCFF99;
width:350px;
left: 500px;
position: absolute;
bottom: 0;
}
in the html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="try2.css" />
</head>
<body>
<div id="box1">
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.
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.
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 id="box2">
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>
</body>
</html>
I think you need an absolute left position for the second box.
What worked for me was applying this style to both divs:
.bottom-align {
vertical-align:bottom; display:inline-block; float:none;
}
Then between both divs I had to remove the pseudospace by adding a blank comment:
</div><!-- ---><div>
https://jsfiddle.net/panosang/96bnt3xa/
After some hours of working and a terrible headache i think that the perfect solution is to add some margin-botton and margin-top elements.
I really hate to add specific pixels or change percentage each time into my CSS file but i found it as the perfect solution in my problem.
I used <table> instead of <div>, but it works with <div> too.