I have this code: http://jsfiddle.net/LW9DJ/1/
I want the overlay text to appear centered (which is currently working), but I don't want the css class 'mycell' to have the width or height attributes set, I want them inherited from 'container' class.
This is because I am going to implement this in a responsive website in which the width and height of 'container' class are automatically changed.
<div class="container">
<img src="http://i.imgur.com/o7iAFMu.jpg" class="test" />
<div class="overlay">
<div class="mycell">Some Text</div>
</div>
</div>
You should make left-margin and right-margin properties of style, auto. When you assign auto values to these two properties, the div would be located at the center.
Related
This is the demo of my problem.
And this is the outline of my HTML:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child">
<img/>
</div>
</div>
</div>
Basically it's a flex container which contains two flex items. The first flex item(f1) is the title, which takes up some fixed height. And the second flex item(f2) fill the rest of the height. So far so good.
And I put another flex container(f2-child) inside of f2, just to create some margin space. And I want an image to fit inside f2-child. The image should be as wide as f2-child, but its maximum height should be the same as f2-child.
It works fine when the viewport's width is low, but when the width gets higher, the image would overflow. I tried setting f2 and f2-child's max-height to 100%, but it does not work.
To solve the issue of the image overflowing, you can try setting the max-width property of the image to 100% and the width property to auto. This will ensure that the image's width is equal to the width of the parent container (f2-child) and its height is proportional to its width, preventing overflow.
You can also add overflow: hidden to the f2-child container to clip any content that exceeds its boundaries.
Here's the updated code:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child" style="overflow: hidden;">
<img style="max-width: 100%; width: auto;" />
</div>
</div>
</div>
Add the two tailwind classes h-full object-cover to your image tag.
<img src="https://source.unsplash.com/04X1Yp9hNH8/1600x900" alt="img" class="w-full h-full object-cover"/>
I've figured out myself by learning more about how flexbox works.
This is my final outcome: codepen link. I use tailwind so you need to know a little bit about it.
Now my layout looks like this:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<img/>
</div>
</div>
I removed f2-child from the last version.
The flex direction of the container is column, so after determining the height of f1, f2 would stretch itself. f2 is also a flex container, but with row flex direction. The image is its flex item.
Notice how f2 has multiple tailwind classes. flex items-center justify-center make sure image is horizontally and vertically aligned in f2.
And f2's grow-0 shrink-1 basis-auto h-full min-h-0 plus img's max-h-full make sure that when the view port is wider, the content won't overflow.
For more details you could see this post: Prevent flex items from overflowing a container
On my webpage, I have a div element on the left with a static width of 300px. Right next to it, on the right, I want to display another element which has a dynamic, flexible width (because the browser window could be resized by the user) by using the Bootstrap grid with col-12. Imagine this:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with class="col-12" should be right next to the left div, without space in between of them, and it should be growing/flexing always to the right of the window.
Unfortunately, it seems not to work, having a static px-width on the left element, and on the right an flex element with col-12. The second div is always BELOW the first div. Do you know a solution? Thanks in advance!
Try giving the second div in the row the class "col".
<div class="row">
<div style="width:300px;"></div>
<div class="col"></div>
</div>
Regards!
I'm trying to figure out how to make an element fit (like object-fit) into another div.
That specific element is an Image Container (div.ratio-box), which has a intrinsic aspect ratio css (the padding bottom hack to avoid page jump).
The problem is that with portrait image, the Image Container (div.ratio-box) is overflowing the parent (div.slide-cell) . So what I want to do is to calculate a new width base for (div.slide-cell.portrait) on the following known value:
Img Height,
Img Width,
Parent's width
Parent's margin from the browser window
https://jsfiddle.net/5d6zrueh/3/
<div id="slider">
<div class="flickity-viewport">
<div class="flickity-slider">
<div class="slide-cell portrait is-selected">
<div class="ratio-box centered" style="padding-bottom:150.06002401%;">
<img src="http://via.placeholder.com/166x250">
</div>
</div>
</div>
</div>
Hope it makes sense to you.
I am trying to design a responsive webpage using bootstrap. I have the following HTML structure
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="well"><!--Page content here--></div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="well">
<form class="form-horizontal" role="form">
<!--Form elements here-->
</form>
</div>
</div>
</div>
</div>
Now, I want the div.well inside div.col-lg-4 to be fixed positioned. So when I add style="position:fixed;" to the div.well, the default responsive width which it inherits from its parent (that is 33.33%) gets reduced and the form elements gets shrunk. Any suggestions on how I can fix this?
Take a look at this Codepen.
In the CSS Box Model, fixed positioning takes an element out of the normal flow, and if there are no other sibling elements, the parent container will collapse. In this case, the form inherits it's width from the parent, but when taken out of normal flow with fixed positioning, the width value of the parent does not cascade. But when I add a sibling element to illustrate my point, in this case a Bootstrap 'jumbotron' element, you will see that the parent .col-lg-4 .col-sm-4 element is once again visible, but it settles in underneath it's fixed sibling who appears first in source order.
Hope that helps.
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.