How can you force a col to expand to the full width on right which is inside a container
<div class="container">
<div class="row">
<div class="col-5">
Lorem ipsum
</div>
<div class="col-7 img-col">
<img class="img-fluid" src="https://placeimg.com/640/480/nature/sepia"/>
</div>
</div>
</div>
I've tried to use position absolute on the right col but isn't going to stretch to the left
https://jsbin.com/cikuragaba/edit?html,output
.container {
position: relative;
}
.img-col {
position: fixed;
right: 0px;
width: 100%;
top: 0;
}
.img-fluid {
width: 100%;
}
This will set it to the full width but if you explain what you're trying to do I think there will be a better way than this to achieve it.
I believe that the div is already at full width, but the image is not. Add this CSS:
.img-fluid {
width: 100%;
}
Use:
.img-col .img-fluid {
width: 100%
}
This will make your image within the img-col 100% width. .img-fluid only specifies the max-width. Being specific with .img-col first doesn't make ALL .img-fluid 100% width.
Related
I want to create a scrollable area for the text (class text), who have the size of the picture (class picture).
<div class="wrapper">
<div class="picture">
<img src="..." >
</div>
<div class="text">
<p>....</p>
</div>
</div>
The only way, I have found is set the size for the wrapper but if the picture have height more importe than the wrapper, she is crop.
So make it's possible to realize a scroll area for text with the size of picture?
I assumed they are columns. Not possible for rows with CSS.
Try this, if you have extra paragraphs wrap them in a div and change the selector accordingly.
.wrapper {
display: flex;
}
.picture,
.text {
flex: 1; /* example */
position: relative;
}
.text p {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
overflow: auto;
}
Here is my initial HTML structure (I used Bootstrap framework)
<html>
<body>
<header>My header</div>
<div class="container-fluid">
<div class="row">
<div id="list" class="col-md-7"></div>
<div id="map" class="col-md-5"></div>
</div>
</div>
<footer>My Header</footer>
</body>
And the css :
#list
{
height : 2500px /* For the exemple */
}
#map
{
height : 500px
}
#map.affix {
position: fixed;
top: 70px;
right: 0;
}
Initially my position of div #map is relative.
I would like to set position of div #map to fixed when the div (#map) becomes visible on the screen until the bottom of div #list.
And finally, I would like to set my div to relative position again when my div #map reached the bottom of div #list.
For this scenario, I used the affix plugin of bootstrap :
$('#map').affix({
offset: { top: $('#map').offset().top }
});
BUT when my scroll reaches the div #map, it disappears from the screen (because position is fixed and the width of my div#map is liquid)
How to display the div #map with the fixed position on the top/right off the screen ans with my initially size (when it'is in position:relative) ?
Is someone a solution to this problem ? Thanks you for your help !
Here is my desired scenario :
Are you trying to do something like this?
http://jsfiddle.net/b43hj/3503/
<header>My Header</header>
<div class="container-fluid">
<div class="row">
<div id="list"></div>
<div id="theFixed">SOMETHING</div>
</div>
</div>
<footer>My Footer</footer>
#theFixed {
height : 300px;
background: red;
position: fixed;
top: 700px;
right: 0px;
width: 40%;
}
#list {
height: 2500px;
width: 200px;
background: green;
}
$(window).scroll(function(){
$("#theFixed").css("top",Math.max(0,700-$(this).scrollTop()));
});
I have a responsive image list. Each image is inside a container.
I want the image container to be 75% of its first container (unit container in this case)
the image ration is 1:1
I played a little with the image container percentage width but it feels like this is not the solution.
<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
<a href='#' alt="unit">
<div class="unit_container">
<div class="icon_container unit_icon">
<img class="img-responsive unit_image" src="http://placehold.it/60X60" />
</div>
<div class="unit_name">FREE</div>
</div>
</a>
</li></ul>
Btw, I'm using bootstrap if that's matter.
http://jsfiddle.net/wmu3w3ej/1/
Thanks to #Mary Melody
transform: scale(0.75);
works like magic
I'm a little afraid to use it since it's so simple.
any thoughts?
Using the logic from here: https://stackoverflow.com/a/20117454/3389737
I have applied it to your situation: http://jsfiddle.net/phwaLmen/1/
#wrapper
{
position: relative;
width: 50%;
overflow: hidden;
}
#wrapper:before
{
content: "";
display: block;
padding-top: 75%;
}
#image
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
<div id="wrapper">
<img src="http://placehold.it/350x350" id="image">
</div>
Add relative positioning to the parent, set its width as you'd like and make sure the overflow is hidden.
Create a :before element for the wrapper with a padding-top of 75%. Since there is no height specified for the #wrapper, this 75% is based on the width of the element :)
Then you have your image, positioned absolutely and then fitted to the container. If you want the image to be cropped instead of resized, remove the height: 100% and width: 100% style rules from it.
You can do it like this (in your html):
<img src="img.jpg" height="75%" />
Good luck!
I have been trying to figure out how to create this layout, I have a 2 column layout with the left column having 1 row and the right side having 2. Im trying to get it to adjust fluidly. What im having trouble with is I would like the top of the top image on the right to align with the top of the left image while the bottom of the bottom image stays aligned with the bottom of the left image. Should I use a table?
here is what I have so far.. not very close I really appreciate the help.
http://jsfiddle.net/#&togetherjs=TpsEptHKit
here is an image of what I would like to acomplish
The closest I could come up with was a table with a single row and two cells (so both sides would be equal in height).
Then on the right we have two divs with heights adding up to 100% (say, 60% for the top and 40% for the bottom).
We'll specify vertical-align: top for the upper block, and vertical-align: bottom for the lower one. On top this will produce the desired effect, but on the bottom the vertical align doesn't kick in properly because we only have one element to align. To fix this, we need a spanner element with 100% height and place this adjacent to the "real" block.
Here, .block would represent the content inside the cell, e.g. image and caption.
JSFiddle
HTML
<table class="container">
<tr>
<td class="left">
</td>
<td class="right">
<div class="top">
<div class="block"></div>
</div>
<div class="bottom">
<div class="filler"></div><div class="block"></div>
</div>
</td>
</tr>
</table>
CSS
.container {
width: 100%;
height: 100%;
}
.left {
width: 60%;
height: 200px;
}
.right {
height: 100%;
}
.right .top {
height: 60%;
width: 100%;
vertical-align: top;
}
.right .bottom {
height: 40%;
width: 100%;
vertical-align: bottom;
}
.block {
display: inline-block;
}
.filler {
height: 100%;
display: inline-block;
}
What you can do is first wrap the whole thing in a container, than give your .right:{float:right} and remove the float:left in other classes. See the code
.container{
width: 620px;
height: 400px;
}
.right {
float: right;
}
.blackBox {
background-color: black;
width: 200px;
height: 175px;
}
.redBox {
background-color: red;
width: 400px;
height: 400px;
}
This looks the same as your pic: http://jsfiddle.net/aC7j6/1/
Here's the fiddle: http://jsfiddle.net/RGaw5/
<div id="left-container">
<div id="left" class="black"></div>
<p class="description-text-left">Printed Lexington</p>
</div>
<div id="right">
<div id="right-top" class="black"></div>
<p class="description-text">Printed Lexington</p>
<div id="right-bottom" class="black"></div>
<p class="description-text">Printed Lexington</p>
</div>
You can make it responsive by giving the width in vw or %.
EDIT: Here's a responsive, updated fiddle: http://jsfiddle.net/RGaw5/1/
EDIT 2: Note that the first column's height can vary - no matter what's the height, the rest of the divs will scale accordingly. Here's one more fiddle with a different left column's height: http://jsfiddle.net/RGaw5/2/
I'm trying to find out how to define the height for this .gallery element based on the size of the img element inside it.
<div class="row">
<div class="large-10 columns">
<div class="gallery portrait">
<div class="cover">
<img src="http://placekitten.com/800/1029">
</div>
<ul class="thumbs">
<li class="thumb"></li>
<li class="thumb"></li>
<li class="thumb"></li>
</ul>
</div>
</div>
</div>
I'm using percentage-based heights and widths in my CSS to set the height and width of the elements inside my gallery. However, I'm defining the height of the .gallery element in pixels so my percentage elements work.
.gallery {
height: 680px;
}
I'm trying to get the height of the .gallery to adjust its self when the browser window is resized and my image gets smaller.
I've got a demo of the problem I'm having over here: http://codepen.io/realph/pen/kKAmx
Any help is appreciated. Thanks in advance!
If I understand what your issue correctly, then simply remove the height: entries on your gallery and cover class. The gallery element should expand contract to fit the image (as long as the image has % width).
Example Fiddle
CSS:
.gallery {
background: orange;
width: 100%;
float: left;
//height: 680px;
}
.cover {
float: right;
width: 63.8554217%;
//height: 680px;
overflow: hidden;
}
.gallery img {
width: 50%;
}