I have a responsive background image in a div. And i want a two column flex layout on top of it, in which the left layout have image of height 100% of the parent div with width auto scale like responsive image. and the right part is a two line text centering in the flex.
This is the closest i can get so far. But the flex does not stretch to fit the background div image and the left image does not scale accordingly when browser resize.
Note: None of the width and height in px should be specified in the code
.parent {
display: flex;
align-items: center;
}
.left {
height: 100%;
}
.right {
flex: 1;
background: blue;
}
<div style="position: relative;">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTkyfCkzwQ7Lx4v3YRNao0lQgM-VkEj6iLWTHE8KqHF5tk4cl15WQ" style="width: 100%">
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div class="parent">
<div class="left">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRsxhzGxiYQU_vp2YlN1LTMxQsYMhFDqTZLwfqMylCwqIahCu00Mf_0aDQ">
</div>
<div class="right">
<p>
123
</p>
<p>
456
</p>
</div>
</div>
</div>
</div>
Expectation:
Remove
align-items: center;
from the parent div.
If you want to center align the text elements, use padding or position: relative/position: absolute
Then apply
height: 100%; to the image.
Related
I want to make it so that one div can scroll horizontally independently of the other div. Scrolling divs should have a minimum width (e.g. 500px) and not be aligned to the width of the content. The other div has a width of 100%. How can i do this?
<div>
<div #parent style="width: 100%"></div>
<div #child style="position: relative; width: 100%">
<div #child class="child-container"></div>
</div>
</div>
Here is my css:
.child-container {
position: absolute;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
I edited the post to be more realistic
What you're looking for is the CSS property overflow-x which will allow you to specify the overflow behavior with CSS.
Here is MDN's documentation on this property.
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
Update
Here is a working example of what you are asking for. If I'm not understanding your question, please let me know.
.padding {
padding:25px;
}
.container {
max-width:400px;
}
.child-container {
background:#dedede;
overflow-x:scroll
}
.child-item {
min-width: 500px;
}
<div class="container padding" style="background:#ededed;">
<div class="padding">
<h1>Parent</h1>
</div>
<div class="child-container padding">
<div class="child-item">
<h1>Hello world</h1>
</div>
</div>
</div>
I am using bootstrap templates and have split the page into a fixed sidebar and the remaining part of the page is one big picture. However the picture will not match the height of the sidebar. There is always a white gap after the picture even though the sidebar has 100% height. So how can i make my picture take up 100% height?
My html:
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<div class="sidebar affix">
</div>
</div>
<div class="col-sm-9 pic">
<div><img src ="homepage/pic5.jpg" class="img-responsive"></div>
</div>
</div>
</div>
My Css:
.row.content {
height: 684px;
}
.sidenav {
height: 100%;
}
.pic .img-responsive {
height: 100%;
}
.pic {
padding: 0;
position: relative;
}
.sidebar {
width: 22.5%;
top: 0px;
}
.pic > div {
position: absolute;
}
Try to change like this
.pic > .img-responsive {
height: 100%;
}
You are placing your img in an div which you give position absolute, while you give the img position relative in the div with position absolute.
position: absolute
Places an element absolute, meaning on its self. There for any heights or width of any elements around it will not effect the element, it is absolute.
I havent tested it but you should remove the position:absolute, position:relative and the div around your img.
I have some simple html like this:
<div id="container">
<div id="box1"><img src="images1.png" width="100%" /></div>
<div id="box2">Some text</div>
<div id="box3"><img src="image2.png" width="100%" /></div>
</div>
The container is supposed to cover the entire page. I would like box2 to be 20% of the height of the container. The tricky part is that the height of the images in box1 and box3 are relative to the width of the viewport and makes the container larger than the browser window.
If I simply set box2's height in percentage in the stylesheet, the height will be defined as 20% of the height of the viewport, not 20% of the height of the container.
Any suggestions how to solve this?
Thanks in advance.
I believe I've found a solution to my problem: Fiddle example
body, html{
width: 100%;
height: 100%;
}
#container{
position: relative;
height: 100%;
}
#overlay{
position: absolute;
top: 0px;
border: 1px solid red;
z-index: 2;
width: 100%;
height: 100%;
}
#box1{
width: 100%;
}
#box2{
position: relative;
width: 100%;
z-index: 1;
}
#box3{
width: 100%;
}
<div id="container">
<div id="box1"><img src="image_40pct.jpg" width="100%" /></div>
<div id="box2"><img src="image_20pct.jpg" width="100%" />
<div id="overlay">This text is shown above the image.</div>
</div>
<div id="box3"><img src="image_40pct.jpg" width="100%" /></div>
</div>
As I know the sizes of the images in box1 and box3, I can just place an image in box2 with a height that corresponds to 20% of the total height of the three images combined. I then use "position:absolute" and z-index to place a div on top of that image with the height set to 100%. Mission accomplished :)
I've made this Fiddle, maybe you can achieve the 20% of the height by using margins:
#box2{
margin-top: 10%;
margin-bottom: 10%;
}
This way you'll have 10% on top and 10% on bottom, for a total of 20%.
I have this code:
<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;">
<div style="text-align:center;width:50px;height:14px;background-color:green;">
50%
</div>
</div>
How can i put the 50% in the middle if the 1st DIV , the 2nd div might have width of 0 to 100 px (progress bar)
Live Demo
I added position: relative to your outer div.
I added a new text div, which is absolutely positioned over the progress bar.
See http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Whatever width your progress bar has, it won't affect the text div.
HTML:
<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;position:relative">
<div style="text-align:center;width:50px;height:14px;background-color:green;"></div>
<div id="text">50%</div>
</div>
CSS:
#text {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center
}
For example have a third div with margin-left:auto;margin-right:auto which centers this div into the middle
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
How can i make the image start from the middle of this box? (middle both vertical and horizontal)
There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.
Use absolute position. This only works if you know the size of the image.
Here you set it to position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.
See example here: http://jsfiddle.net/JPch8/
Use margin: 0 auto;text-align: center; and line-height/font-size.
This is a bit more tricky, since line-height doesn't work as it should in IE for inline-block elements like images. That's where the font-size comes in.
Basically, you set the line-height of the image container to the same as the container's height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.
See example here: http://jsfiddle.net/JPch8/2/
In modern browsers that support display: flex you can do it by simply setting the container div to display: flex; align-items: center; justify-content: center;
See example here: https://jsfiddle.net/ptz9k3th/
HTML:
<div id="photo_leftPanel">
<img src="bla.jpg">
</div>
CSS:
div.photo_leftPanel {
position: relative;
}
div.photo_leftPanel > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
put the image in a <div> with text-align:center; without specifying the size of the box
<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>
alternatively you can specify width and the height of the <div> box in order to center the image (actually the div box).
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
"float:left; position:relative" probably doesn't work as expected. Floated elements are considered absolute.
To get the image centered vertically you need a height on the div, and you need height on it's parents. (Centering vertically is kind of a pain). My example below will work if those are your only elements but be aware that height: 100% on the containers will likely affect the rest of your layout.
<html>
<head><title></title>
<style type="text/css">
html, body {
height: 100%;
}
#photo_leftPanel {
height: 500px; /*guessing*/
width: 604px;
float: left;
}
#photo_leftPanel img {
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.
<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
<img src="bla.jpg">
</div>
I hope I understand what you are trying to achieve.
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>