Issue
I need to vertically center the order_form div (light gray) and keep it on the very right side of each of the product boxes on our website. The div's height is non-fixed, and can occasionally fill most of its allowed vertical space (which is 160px because of the product image). The picture div vertical-aligns perfectly. I made an example out of one product box and simplified it as much as possible while leaving its html intact.
Here's a jsfiddle displaying the problem (sorry for the lack of images!)
I realize there are a lot of posts on this topic; I've read many of them. I've tried everything I could think of, and everything I have found in all the articles, solved questions, even every little clue I've found over the past three+ hours. Nothing has worked.
I'm completely lost on how to solve this, and I'm sorely tempted to change the picture and order_form divs to a table just for the sake of aligning ._.
Help?
Several things I've tried:
display: table-cell; vertical-align:middle; on the order_form div, and adding display:table to its parent.
The above with display:table on an added wrapper div instead.
adding a wrapper div and using margin + negative margin.
display:table-cell; vertical-align:middle; and adding a wrapper div with left:160px; display:table. The wrapper div's width is never correct, breaking the order_form.
vertical-align:middle on the order_form and having height equal to line-height on its container
several other approaches i do not remember
saying please.
Asides
I need this to be functional on somewhat older browsers (ex: IE8), without using any javascript.
Background info: I've recently started working on our site and, among other things, I've since converted all the product boxes from tables to divs and cleaned up the css a bit. The problem is the tables, being tables, handled the aligning really well...
Also: The next step is to convert the buttons from images to prettyful css links so they scale nicely along with the text (and ditch the table there, too). Don't dock me points for what I haven't touched yet!
If I understand the question rightly, one option would be to set div.order_form to display: table; height: 160px; and then create a div inside that (wrapping around all its content) and give that inner div display: table-cell. That still requires the use of the absolute positioning, which isn't ideal, but it does work.
If you want this on old browsers too..
wanna use some jquery scripts?
The height will auto adjust depending on your order_form height.
See DEMO on jsfiddle http://jsfiddle.net/kdNnw/
JQUERY
$(document).ready(function() {
// get dynamic height of order_form and calsulate margin-top css
var ver_top = ( 160 - $('.order_form').height()) / 2;
$('.order_form').css( "margin-top", ver_top+'px' );
});
Related
I have quite an interesting problem in front of me. I think it would be better to illustrate it in codepen:
https://codepen.io/BooleT/pen/bWdPWe/
In the class names ib means "inline-block" and iib means "inner inline block".
I have created figures to illustrate what I am trying to achieve. In the next 3 paragraphs I will reference the images in this album:
https://imgur.com/a/9CFAm
So there are three inline blocks, one of which is actually a container of three other inline-blocks:
The effect I want to achieve is to make the contents of the container to wrap into 2 lines when I resize the window:
But instead I only manage to wrap the whole container itself to the second line:
Is there actually the way to achieve what I want? I've tried to add nbsp between outer inline-blocks and to add white-space: nowrap to the body element (and overwrite it to white-space: normal for the container), but none of it worked.
I know that I can work around it by adding media-queries or js that simply reduces the width (or max-width) of the container when I reduce the screen width, but it doesn't seem like the solution. I don't even know the width of every block in my real layout.
I will try to keep an open mind, since the solution to this problem might require to change the entire layout of the page, but I do think there is one.
Being not a fan of flexboxes – the burden of old-browser compatibility still standing strong where I come from – here's what we do to make a container on the right occupy all the remaining horizontal space:
Codepen
The fixed-size divs on the left are told to be float: left.
The spanning div on the right is given display: block.
The smallest inner divs are display: inline-block.
If you can use flexbox then this pen: http://codepen.io/anon/pen/RVWwEP seems like it does what you want. Be aware of the compatibility caveats that go along with flexbox, though.
For convenience I've put display: flex; on the body to create top level row, although #10nikov's answer is definitely a better way to do that.
CSs for rate box:
.rating-input {
font-size: 25px;
position:relative;
left:101%;
}
Button:
.custom-input-button {
text-align: center;
position:absolute;
left:64.4%;
top:12.1%;
}
image :
<img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large"
style ="position:relative; top:-46px; left:0px;"/>
It gives different look in chrome and firefox:
Firefox:
In chrome bookmark menu is not open. The change in spacing is due to that?
I am frustrated changing the positions, but problem does not solved.
I agree that your not giving us enough code to really give you a good response to.
If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.
That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.
Just to sum up conversation in comments.
You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.
Quick example of what babbling about in upper paragraph
jsfiddle.net/Driveash/qgbLB
You can also make extra css for specific browser.
Are left and margin-left the same?
Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.
add z-index:-999; to the image so it doesn't sit in front of the green banner
I know this is a common question and I've already tried the searched methods. Here is the jsfiddle: http://jsfiddle.net/ZfZK9/ and here's my problem
Basically, I've got a main div container. It has an image and some text. I need the image on one side, then the text on the other. I tried putting the img in a div, setting it's height to 100%, and floating it right, but as you can see in the jsfiddle once the text goes below the image it doesn't keep the column formation.
I'm not sure why the display: block and height: 100% aren't doing any good on the left column.
Thanks
Edit: I'm assuming height: 100% doesn't work because that gets rendered and then text gets added later. I'm still trying to find an elegant solution though, and general-purpose.
Another problem, is when I set both divs (of the image and of the text) to float: left, it just displays the image then the text under it
It can be done like this: http://jsfiddle.net/ZfZK9/34/
Just create two div's as columns around both sides, then set both those sides to a specific width, then play around with the padding and margin til you get what you want.
To keep your border around your content, I added a clearfix which will help contain the two floated columns....
http://jsfiddle.net/ZfZK9/34/
Had to edit a few things, took a bit to get it right, but now all should be working. Contains two floated divs, with a browser proof clearfix added to the mix. If you wanted the image, or the sidebar to appear as if it continues to the bottom, read about Faux Columns
You have some css in the html and some in the css so this is hard to follow. What I believe I see is a common mistake where you must consider when you set something to 100% you have to think, 100% of what? It's always the parent of that element. So what is the parent set to? If nothing, there's your problem.
Just remember that if the parent is also set to 100%, the same question will apply.
EDIT: I see the problem now. I misunderstood. What you want to do then is set the width of the right div, the one with the text. Float that right and it should solve the problem.
I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.
Here is the page I'm talking about : link
If they are all the same size if works beautifully : link
Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)
Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS
Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.
I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.
Use display:inline-block
You may also find vertical-align: top or vertical-align:middle useful.
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
<p> </p>
You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.
This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.
By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.
So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).
If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.
Add to .icons div {width:160px; height:130px;} will work out very nicely
Hope it will help
I just designed a portfolio website. I have a whole array of images that I want to keep in one line (with horizontal scroll). This only happens when I have set a fixed width for the surrounding div (in this case with class '.post-images'), wide enough to contain all images. This could be just fine if the amount of images and their widths wasn't dynamic. Unfortunately this isn't the case here. I want this div to be wrapping around all images and not causing them to float. I have tried to set the div's where I put each image in ('.post-image') to 'white-space: nowrap' to no avail.
See an example here: Link
How can I fix this problem? I hope someone is willing to give me a hand here ;)
Thanks,
Jeroen
Replace the css for .post_images and .post_image with:
.post_images { white-space:nowrap; }
.post_image { display:inline; }
Effectively, this makes the wrapping <div class="post_image"> elements redundant (that's the display:inline); you may as well remove them.
In general, most elements size their width according to that of their container; if you wish an element to size according to content, you'll need a <table>, display: table or single line.
Edit: both white-space:nowrap and display:inline have been supported on all major browsers for years (in IE, all the way back to IE 5.5).