Hi
On our website I have a page where there are Buy Now buttons
https://www.nutricentre.com/m-300-herbs-hands-healing.aspx
The styling that controls this is
.item .price {
color:#8c9c54;
font-size:14px;
font-weight: bold;
/*
position: absolute;
bottom: 48px;
left: 0px;
width: 150px;
*/
text-align: center;
margin-bottom: 45px;
}
.item a.blue_btn {
position: absolute;
bottom: 10px;
left: 15px;
cursor: pointer;
}
Any idea how I can get this aligned in a straight line regardless of the text above?
You don't have to change the css of the button, but from the whole item:
just add:
.item{
height: 380px;
}
Of course, you have to care about the maximum item-height: your value must not be less, or the price won't be visible anymore.
In this case, min-height would be the better alternative.
I would recommend setting a min-height: 370px; for the easiest solution.
You do not want to set a static height for this because if you have an item with a longer description it will not automatically add space but just cram everything in.
Add a static height to .item
height:375px;
The height:auto; declaration tells .item to expand as big as it needs to be to fit everything in, so the tops of the divs line up, but since they are different heights, the bottoms are staggered.
As some of my co-responders have noted, min-height is also an acceptable option, until you have an item with enough text that item expands past the min-height value, at which point they will begin to expand and stagger again.
This should point you in the right direction: http://jsfiddle.net/v9grm/
Create a grid and with the help of display: table make the columns the same height. Then place the button at the bottom of the column with position: absolute.
Related
I have this example for the very known fill-parent height problem: http://fiddle.jshell.net/y9bM4/379/ I've really tried to find a solution by googling but I cannot find anything for these requirements:
The height of the element is not known, neither by percentage nor by absolute size. So position: absolute; top: ?px; bottom: 0px would not work
The upper box should only take up the space it needs for its content, so with my little knowledge about flexbox, it seems that I cannot use it either (just used it in the example because this is kind of as closest as I got)
The outer container has a fixed height (90% of the body in this example)
It would be nice if flex: 1 in each container, is kind of the maximum growth of the upper container. Is this even possible with css yet?
I'm not exactly sure what you're trying to do, but I'm assmuning you would like the second container to use whatever space is left over after the first container is sized to its content.
If so, set the .content class with height:0 and flex-grow:1
UPDATED EXAMPLE:
http://fiddle.jshell.net/y9bM4/385/
I think problem was that you gave the container id height:90%; so it will have to forcefully cover inside it, which is not posibble, So change it with height:auto;.
This will solve your problem
JSFiddle : Updated
CSS : Code to change (Edited)
#container
{
display: block;
position: fixed;
height: 90%;
width:100%;
overflow: hidden;
background: #fff;
border:2px solid green;
}
.content:nth-child(2)
{
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.content{
border:1px solid red
};
.text
{
height: 100%;
display: block;
}
I have three containers (div), the third div has a set width but I need the other two to be responsive. Current html setup:
<div id="page-type">
<div id="type-container">
<div>
<p id="type-title">Events</p>
</div>
</div>
<div class="type-options">
</div>
<div id="type-back">
Back to Explore
</div>
</div>
Current css:
#page-type {
float: left;
width: 100%;
background: #D2D3D5;
height: 60px;
}
#type-container {
float: left;
width: auto;
}
#type-options {
height: 60px;
width: auto;
overflow: hidden;
}
#type-back {
border-left: 1px #BDBEC1 solid;
float: right;
width: 160px;
}
I can get type-container and type-options to be on the same line and responsive but I can't keep type-back on the same line.
visual example:
----- EDIT -----
To clarify more:
type-container adjusts to fit it's content
type-back is a set width
type-option fills in the space between type-container and type-back regardless of content
type-containerand type-options fill up the whole row pushing type-back to the next line. I need type-back to stay to the right of the line while the other two are responsive.
Put a wrapper around your first two columns and then you can use CSS3's calc().
#wrapper {
width: calc(100% - 161px); /* extra px for 1px border */
float: left;
}
Demo here
IE8 Workaround - Use border-box:
#wrapper {
margin-right: -161px;
padding-right: 161px;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
IE8 Demo
In CSS3 you can use calc(X% - 160px) to reduce the width of a percentage based container by a number of pixels.
A quick example could be: http://jsfiddle.net/e3vC4/
There isn't a need to use calc for this, even though its a nice feature to have (+1) — sadly its support is still patchy in places and despite much research it's still difficult to say exactly which browser versions will work as expected (fine if you assume all modern browser users auto-upgrade however).
Depending on what your prerequisites are, you have two other options that I'm aware of:
1. Position absolute the last column
This is a simple solution, however something to be wary of is that certain older mobile devices may treat position absolute in odd ways.
In order to get this to work, all you need to do is place position: relative on your container, and position: absolute; right: 0; top: 0; on your third column... and to keep the centering of your central column correct, add margin-right: 161px.
Pos. Abs. example on JSFiddle
CSS ~ markup is as per your example
#page-type {
display: block;
position: relative; /* added */
width: 100%;
background: #D2D3D5;
height: 60px;
overflow: hidden;
}
#type-container {
display: block;
float: left;
text-align: center;
}
#type-options {
display: block;
height: 100%;
text-align: center;
overflow: hidden;
margin-right: 161px; /* added */
}
#type-back {
display: block;
position: absolute; /* added */
right: 0; /* added */
top: 0; /* added */
border-left: 1px #BDBEC1 solid;
width: 160px;
height: 100%;
}
2. Float right, and/or left, before sibling without hasLayout / shrinkwrap
This works on the basis that a floated element takes up space in the document, and a block element, by default, auto-expands to fill the remaining area that it can — as long as it hasn't been forced to rigidly define its edges with the likes of float, overflow or other hasLayout or shrinkwrap tricks.
This option is only open to you if you can re-arrange your DOM ordering i.e. place #type-back before #type-options. This won't affect the visual order, but it makes a big difference to how the layout is calculated, and is one of the reasons why you were encountering problems with your attempts. You need to have the floated elements in place before leaving the other elements to calculate their dimensions.
Float example on JSFiddle
NOTE: Changing the order of DOM elements can be of benefit, but it can also be a hindrance; it all depends on what the markup is, and who will be viewing it. For example, sometimes having actionable links higher up the DOM can be useful to tabbing and screen-reader users, but the opposite can also be true depending on the context.
MARKUP ~ note the rearranged DOM order
<div id="page-type">
<div id="type-container">
<p id="type-title">Events</p>
</div>
<div id="type-back">
<p>Back to Explore</p>
</div>
<div id="type-options">
<p>Options</p>
</div>
</div>
CSS
#page-type {
display: block;
width: 100%;
background: #D2D3D5;
height: 60px;
overflow: hidden;
}
#type-container {
display: block;
float: left;
text-align: center;
}
#type-options {
display: block;
height: 100%;
text-align: center;
overflow: hidden;
}
#type-back {
float: right;
border-left: 1px #BDBEC1 solid;
width: 160px;
height: 100%;
}
NOTE: It should be stated this version does break on to the next line when "responsed" down to a very minimal size. However, I tend to prefer to design items to disappear when space is tight, and this method lends well to that thinking.
Summary
These are just two other possible options. If you are developing for a progressive client, or yourself, then I personally would stick with the calc method. It's easier to work out what is going on, and far easier for a future developer to change.
However, sometimes often frequently all the blasted time clients want to support the widest range of devices possible (without investing the extra time and money that would be required), and in this instance you are better off with an alternative method (one that isn't going to randomly break on a manager's less than contemporary laptop, running IE 7.5? or 8.33333??? or even Netscape 4.7¿).
Unless of course, you have any leeway to fight for using the more progressive approach, which does seem to be getting easier of late.
I sat down with the designer for more clarification and to discuss alternate solutions. I'm making the third did responsive as well allowing me to use two containers: one holds page-type and type-options set to x% and another holds type-back set to y%. Doing this allows me to keep all elements responsive.
I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?
http://jsfiddle.net/C3877/9/
To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.
Note: I only care if a suggested fix works properly in Chrome.
Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.
Inline-block fiddle: http://jsfiddle.net/C3877/8/
In addition, since you only care about Chrome, you could look into flexible boxes
A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/
You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).
#right_div {
...
margin-left:-100%;
}
Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.
Appending this does the trick I suppose:
#media (max-width:515px) {
#left_div { width: 100%; margin-right: -100px }
}
UPDATED
You could use margin and absolute positioning:
CSS
#parent_div {
width: 100%;
height: 10%;
position: relative;
min-width: 40px;
}
#left_div {
width: 80%;
min-width: 100px;
height: 80%;
float: left;
background-color: #000;
color: #FFF;
}
#right_div {
width: 15%;
min-width: 100px;
float: right;
background-color: blue;
position:absolute;
right: 0px;
}
input[type=button] {
font-size: 2rem;
}
SEE DEMO: http://jsfiddle.net/C3877/19/
You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.
I am quite new to html/css, and I spent some time writing my own website from scratch. I have understood the very basics of the thing, but many subtleties are still unclear in my mind. Currently, I am unable to achieve a specific feature on my website, and I was hoping that maybe some of you would come up with a simple solution.
Here is what my website looks like: the colors are here to make things clearer. The four blocks "converge" toward the focal point. The top left part "Research interests" is dedicated to contain short descriptions, while the top right part "PhD thesis" is dedicated to contain either large texts or pictures. From now on, I will only focus on the top right part, where my problem occurs.
Green part :
#maindisplay
{
display: inline-block;
position: relative;
text-align: left;
width: 66.6%;
height: 80.0%;
float: right;
background-color: green;
}
Red part :
#maindisplay article
{
background-color: red;
font-family: Conv_verdana, sans-serif;
display: inline-block;
position: relative;
margin-left: 1.5%;
top: 10%;
width: 70.0%;
height: 75.0%;
overflow: auto;
}
Dark gray part :
#maindisplay p
{
background-color: gray;
font-weight: normal;
font-size: 90%;
position: absolute;
bottom: -30px;
}
I get my bottom alignment for the #maindisplay paragraphs by absolute positioning them inside the relative positioned article (and therefore, the "overflow: auto;" is here totally useless). When the text is short enough, this works like a charm and the result is exactly what I want it to be. However, when the text is longer, or when the screen is smaller (typically, my laptop), I would like things to look like this : the top of the text appears first, and a scroll bar is available. When the text is scrolled to the bottom, the bottom of the scrolled text is aligned with the bottom of the top left part, as it is in the first picture. This is achieved by setting :
#maindisplay p
{
background-color: gray;
font-weight: normal;
font-size: 90%;
position: relative;
margin: 0;
padding: 0;
bottom: 0;
}
So here is my problem : I would like the first behavior when the text is short enough, and the second behavior when it is longer than the #maindisplay article div. I was hoping that this could be done in a css-only way but I have looked for quite some time and now I am unsure about this (please note that I know precisely nothing about the javascript/jquery stuff). I am not allergic to tables, but I just don't see how to use them here.
Please let me know if there is anything unclear about this, and thanks in advance for your answers !
here's a fiddle making what you need http://jsfiddle.net/7N6Gp/ or http://jsfiddle.net/7N6Gp/1/
you need 2 div's for this one
the holder div that has position: relative;
.holder {
width: 500px;
height: 500px;
position: relative;
}
and a content div that has overflow: auto and max-height
.content {
width: 500px;
max-height: 500px;
overflow: auto;
position: absolute;
bottom: 0;
left: 0;
}
with your code . you need to wrap content in a div not p . p should only contain text or inline elements . and from your pictures it looks like it contains titles and other paragraphs (block elements)
#maindisplay p change into #maindisplay div.content
I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.
I originally had the image set as the background for a div of fixed height, in which case it was relatively easy to center it, but because background images aren't structural, I couldn't set the height to be an automatic function of the width, and I had to toss this option out when I went for a more responsive design.
So I've currently got a div with two elements in it, img and overlay text. The image width is set to 100% of the width of its container, and the height varies accordingly. As a consequence, though, I can't set the overlay text to be postion:absolute and top:80px or something, because the distance from the top will have to vary. And even doing top:25% or whatever doesn't work, because a) if that page width shrinks to squeeze the text, or if there's just more text, the vertical centering is thrown off when there are more/less lines, and b) the percentage is arbitrary -- it's not 50 or something, because that would put the top of the text overlay 50% down the image, when I want the center of the overlay to be there.
I've looked, among other things, at this post, which is definitely close -- but in both solutions, the image height is incapable of resizing, and in the former, the JS loads at page load, but then freezes, so that if I change page width/height, things get out of whack. Ideally, this solution wouldn't involve JS for just that reason (even if it reloaded on every resize, that feels non-ideal), but if that's the only solution, I'll take it.
Also, just for added details/fun, I've set a max-height on the image, because I don't want it to exceed roughly 300px height, even on a cinema display.
Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!
html
<div class='quotation_div'>
<img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
<div class='overlay'>
<p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
</div>
</div>
css
.quotation_div {
position: relative;
display: table;
}
img {
width: 100%;
max-height: 300px;
}
.overlay {
z-index: 99;
width: 70%;
margin-left: 15%;
vertical-align: middle;
position: absolute;
top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
text-align: center;
color: red;
font-size: 165%;
font-weight: lighter;
line-height: 2;
}
You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.
Here's a fiddle using that technique.
If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cell to center the overlay:
Here's a fiddle using that method, this one stretches the image because of the max-height.
Please Try the below css for .overlay as in your fiddle
.overlay {
z-index: 99;
width: 70%;
/* height: 100%; */
/* margin-left: 15%; */
/* vertical-align: middle; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/
I use this combination:
.CONTAINER {
position: relative;
text-align: center;
}
.TEXT {
text-align: center;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.IMG {
//for responsive image
width: 100%;
height: auto;
}
I just added to the html
<div align="center"></div>
to surround your existing code to get the image to center
hope that helps