Let's say I have an image, with text directly below it. I wrap it up in a div and center the contents inside.
Now let's say I have 20 of these, all with the same sized image (i.e. 65px) but different amounts of text (text can wrap).
What I want to achieve with this is the following:
I would like to display as many as possible on the same line with 10px of left/right margin around each one. Also, they will always center and equally fill the width of the browser window.
Ideally, if the browser width was super small, it would just display one on each line.
Anyone have a CSS solution for this type of scenario?
It is strictly for mobile... no need to worry about I.E.
Thanks a lot!
Update
Heres some basic code I am working with.. as you can see it does the job if I hardcode 4 per line (width 25% each):
HTML:
<div class="m-parent-navigation-container">
<div class="m-icon-navigation-container">
<a class="m-icon-navigation-link"><img><br></a>
</div>
</div>
CSS:
.m-parent-navigation-container
{
margin: 0 10px;
color: rgb(26, 46, 120);
font-size: 0.9em;
overflow: hidden;
}
.m-icon-navigation-container
{
float: left;
text-align: center;
width: 25%;
}
.m-icon-navigation-link
{
display: block;
font-family: OpenSansBold;
font-weight: normal;
text-align: center;
text-decoration: none;
}
Have a look at this: http://jsfiddle.net/3QSVg/
The important parts are the display: inline-block; and text-align: center;
I'm not sure if this is exactly what you're after, but it's a start.
EDIT:
Here is an updated version: http://jsfiddle.net/j78Qw/1/
It's a bit closer to what you want, I think. But it still has some issues.
You can use flex-box for this. The browser support is still lacking, but if you develop mainly for the webkit rendering engine, i.e. iOS, Android, Chrome on Windows, you can use it.
Look at: http://codepen.io/anon/pen/fHklC
There is no pure CSS solution, I believe.
First, you should float: left the image boxes. Using JS you can get width of the outer container, and divide it by the width of the image box. This will give you a number, how many image boxes can fit. Now you can calculate maximum possible size of the box to fill the whole width of the container. This will allow you to align images to the center.
<ul id="gallery">
<li><img src="…" /></li>
<li><img src="…" /></li>
…
</ul>
var list = $('#gallery');
var items = list.find('li');
var imageWidth = items.width('auto').outerWidth(true);
var nrOfItemsPerRow = Math.min(Math.floor(list.innerWidth() / imageWidth), items.length);
items.css('width', Math.floor(100 / nrOfItemsPerRow) + '%');
If I understand correctly, you're looking to line up divs (with whatever content), have the be fluid width, and have them wrap as needed once there isn't enough room on the page?
Flexbox might be able to accomplish this. See this Fiddle.
Some good resources for Flexbox things:
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
http://demo.agektmr.com/flexbox/
http://the-echoplex.net/flexyboxes/
Can you use it?
inline-block is your friend here.
http://jsfiddle.net/Vmu9R/1/
There are a couple of caveats with inline-block in that it is not supported well in I.E.7 and earlier but there are work-arounds.
This article covers the work-arounds and is generally a good article on inline-block
not that you are concerned by I.E.7 but for those who maybe, conditionally include the following
/* For IE 7 */
zoom: 1;
*display: inline;
Related
I would like to vertically align the div ".person-user" so that is vertically in the center of the parent element ".person" (The text to be in the center of the photo but to the right) How can I do this?
Thanks
http://jsfiddle.net/mpBW5/5/
This is something that should be simple, but is actually a pain in the backside to do. Here's a quick jsFiddle, using display: table on the person div, and display: table-cell on the picture wrapper and info divs:
http://jsfiddle.net/2yfDs/1/
What follows is a combination of markup and style that will accomplish exactly what you want, without JavaScript and JQuery.
Markup:
<div class="person">
<img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
<div class="profile">
<div class="name">Colin Pacelli</div>
<div class="fact">Ohio University</div>
</div>
</div>
Style:
.person {
display: table;
}
.person img.profile{
height: 50px;
margin-right: 10px;
/*border-radius: 4px 4px 4px 4px;*/
}
.person div.profile {
display: table-cell;
vertical-align: middle;
/*font-family: calibri;
font-size: 14px;
color: #444;*/
}
/*.person .profile .name {
font-weight: bold;
}*/
I have commented out the rules that do not principally affect the solution, so that all can see how little it takes with CSS if done right. Compared to 10 lines of code running using 32Kb of client side code running on top of a virtual machine. And you thought Adobe Flash Player was evil. I do not mind JQuery much, especially for things it can do well, but frankly, involving JQuery in a clear cut case of pure style is a just bit too much.
As you probably can figure, I have edited your JSFiddle, stripping it of non-essentials and cutting it down to a minimal example that exhibits the desired behavior while leaving the visuals in place.
Since you specified html and css as tags, and since it is in nearly all cases a better idea not to resort to JavaScript/JQuery when they can be avoided, I would really use a markup and style solution like the above instead.
The most precise way is to do this with jQuery and calculate it dynamically for each div. This is useful if some/all image/text divs have different heights. The example. The code:
$("div.person-user").each(function() {
$(this).css("marginTop", function() {
var imgH = $(this).prev("div.person-user-pic").height(),
thisH = $(this).height(),
h = (imgH/2) - (thisH/2);
return h;
});
});
BUT: if every div and image has the same height, you could just do this:
div.person-user {margin-top: 8px;}
I hope that this answers your question?
This is a very common question and the best explanation so far is here:
http://phrogz.net/css/vertical-align/index.html
I have a problem with margin-top in IE.
I have given a link a margin-top of 2px to align it out correctly in Chrome. But this caused a offset in IE9.
Some code:
CSS
.show_cart{
display: block!important;
float:left;
padding-left: 10px;
margin-top: 2px;
}
HTML
<div class="show_cart">
Toon Winkelwagen
</div>
I hope there is a quickfix but I couldn't find it.
EDIT - Sorry I edit it here but I can't find the code thingy in the comment box. Anyway, I changed it to this based on the answer which stated that I should use the vertical align. Chrome is still displaying properly but in IE its now off by 2px to the TOP.
.vmCartModule .show_cart{
display: inline!important;
float:left;
padding-left: 10px;
}
.vmCartModule .show_cart a{
vertical-align: baseline
}
There is more to it than just a margin. You should also consider font-size, vertical-align and more when you trying to line-up elements with texts. I would not recommend calculating pixels, it will never be consistent in all browsers and very hard to maintain. Instead, try to stick to "vertical-align: baseline", that is more deterministic. Using it you can be sure that your texts are always properly aligned.
This sounds exactly like IE's famous double margin bug, there is an easy fix as described here.
Try changing display: block; to display: inline;. Or you can find another solution to it (there are plenty) or you can use the mentioned HTML5 boilerplate or something similar like headjs, etc.
Just in case if you are using using HTML5 Boilerplate http://html5boilerplate.com/
You can use different value for the same class for IE9 -
.ie9 .show_cart{
margin-top: 0px;
}
Or only if you wish to use jQuery for this, you can write -
if ($.browser.msie && parseInt($.browser.version) == 9){
$('.show_cart').css({'margin-top':'0px'});
}
I'm attempting to create a max-width bounding box which will both wrap text (on spaces, no word-breaking allowed) and shrinkwrap to the width of the longest line of text. For a demo of the various shrinkwrap methods, see http://www.brunildo.org/test/IEMshrink-to-fit.html
I chose the "float" method, but in my testing, none of the methods accomplished my desired effect.
In the example code below (also available with live-preview at jsbin), I show what happens when you let the words wrap themselves, and what happens when you insert a <br /> line break tag. Using <br /> manually results in exactly the effect that I'm looking for, while omitting it wraps the text correctly, but forces the white box to take the entire max-width as its width, which I'd like to avoid.
<style>
div#wrapper { background: #ddd; padding: 10px; }
header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
#wrapper:after { content: " "; clear: both; display: table; }
</style>
<div id="wrapper">
<header>
<h1>Diane Von Furstenberg</h1>
</header>
<header>
<h1>Diane Von<br />Furstenberg</h1>
</header>
</div>
Here's a screenshot of the problem with some elaboration:
I've created a JS method to manually insert the <br /> tag as a stopgap measure, but I imagine there must be some way to do this properly using only CSS/HTML. Thanks for the help!
Changing the display of the h1 to table-caption is close to what you want, in Google Chrome. But it's not perfect and I can't really recommend that as a solution wholeheartedly, mainly due to not testing it in any other browsers.
Not sure if browser behavior has changed since the earlier 'table-caption' answer was posted, but it does not currently work (using Chromium 41):
In reality, it seems the desired behavior is not possible with pure CSS (as of 2015). Further explanation and a lightweight Javascript workaround are available in another SO question: max-width adjusts to fit text?
I am trying to create a fluid circle using HTML and CSS. I am almost done but as it should be fluid and content inside is dynamic, it's changing its shape from circle to oval and others.
body {
position: relative;
}
.notify {
position: absolute;
top: 100%;
left: 20%;
background: red;
border: 2px solid white;
border-radius: 50%;
text-align: center;
}
.notify > div {
padding: 20px;
}
<div class="notify">
<div>
12
</div>
</div>
Can you help me please?
The border-radius:50% hack which you're using makes the assumption that the <div> is square prior to the rounded corners being applied, otherwise it will produce an oval rather than a circle, exactly as you've noted.
Therefore, if you want the circle to remain circular as the content expands, you need to dynamically adjust the height to match the width. You'd probably need to use Javascript to achieve this.
Also, please note that border-radius is not supported in older versions of IE, so users with IE6, IE7 or IE8 won't see your circle at all. (though there is a hack for it called CSS3Pie)
Of course, adjusting the height will have the side effect of making the element take up more space vertically. This may not be what you want; you may want the the circle to be the same size regardless of what content is in it? In this case, you should fix the height and width of the circle, and give the content position:absolute; to prevent it from affecting the size of its parent.
An alternative to using the border-radius hack to produce a circle would be to use SVG. SVG is a vector graphics format which is embedded into most browsers.
Again, the notable exception is IE8 and earlier, but IE supports an alternative format called VML. Various scripts exist which can convert between SVG and VML, so you can produce a cross-browser solution with SVG plus Javascript.
If we're going to accept the Javascript is part of the solution, you could simply use a javascript library to draw it in the first place. My suggestion for this would be Raphael, which generates SVG or VML graphics according to the browser it's running it.
Hope that helps.
You need to set both width and height to the maximum of these both, in order to render a square, that with 50% radius corners, results into a circle.
You can do this in jQuery:
$(function() {
var $elem = $(".notify > div");
var maxSize = Math.max($elem.width(), $elem.height());
$elem.width(maxSize).height(maxSize);
});
Try to change content (both in width and height) here
Example of a fluid circle using only HTML and CSS. As mentioned in my comments to the question, the technique is explained in my blog post. Also as mentioned, Safari does not currently play nice with a border radius specified as a percentage.
The way as Jose Rui Santos did you can achieve your goal. But do few changes in your css.
Like remove padding from .notify > div and adding styles like this:
.notify > div
{
display: table-cell;
vertical-align: middle;
}
and add padding into .notify class like this:
.notify
{
position: absolute;
top: 100%;
left: 20%;
background: red;
border: 2px solid white;
border-radius: 50%;
padding: 30px;
text-align: center;
}
and Jquery code as mentioned by Jose Rui Santos:
var $elem = $(".notify > div");
var maxSize = Math.max($elem.width(), $elem.height());
$elem.width(maxSize).height(maxSize);
See the working Demo: http://jsfiddle.net/2j5Ek/63/
Forcing it's maximum height and weight by setting max-width:XXpx; max-height:XXpx will do the job.
Please note that you may need to use CSS3 word-wrap: break-word; to break the words. Cross-browser compatibility might be an issue.
you need a way to enforce height / width otherwise it will just go oval... its possible!
on this html
<div class="notify">
<div class="child">
12334
</div>
</div>
this jQuery script should do it..
var cw = $('.child').width();
$('.child').css({
'height': cw + 'px',
'line-height': cw + 'px'
});
Lately i've been through a lot of times on a single situation problem:
I have a text input element in a web formulary, inside a bigger div with defined width.
Inside that bigger div, i'll put a span text like "Name: " and then i'll put the input.
I want the input to auto become as much as wider the space of the div that the span is not using.
The code would be something like this:
<div>
<span>Name:</span>
<input type="text" name="name" />
</div>
And the CSS:
div {
width: 200px;
display: block;
}
span {
display: inline-block;
font: 11px 'Lucida Sans', Verdana, Arial;
}
input {
height: 20px;
width: auto;
display: block;
}
I've been doing some research, but i seem unable to find a precise solution for this problem.
So far i've been skipping this problem by putting a inline style defining a different width for each element. But if i change the font, size, or whatever, it'll explode.
I don't like to build a fortress wall and leave it full of holes for snipers. That's why i'm looking for help :)
If you guys have any suggestion, solution or workaround way, I'd be glad to know. =D Thanks.
Semantically it's better to use label tags for this purpose:
<label>Name:</label>
Concerning your question, take a look at the CSS3 flexible box model: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Or if you prefer a video: http://www.youtube.com/watch?v=-OubGOxKa5I
At the time of writing, Mozilla and Webkit support this and there is a fallback for other browsers: https://github.com/doctyper/flexie
Sorry, but it's not possible with that markup. Actually the only way to do it is to shudder use tables (or display: table-cell, etc but that doesn't work in IE7 or earlier). It also generally looks better to have all the inputs aligned, don't you think?
Change display: block to display: inline for input and I think it should work.
Here is an example
http://jsfiddle.net/KYvzM/