How can I place images like follow :
I would like the spaces between the images to be the same. Also while resizing the window, I would like the spaces to update so that each space always has the same size.
<div id="panel">
<img id="icon1" class="icon" src="...">
<img id="icon2" class="icon" src="...">
<img id="icon3" class="icon" src="...">
</div>
Here is what I have :
http://jsfiddle.net/eBLgP/2/
It looks a lot like this post : Fluid width with equally spaced DIVs
But it's not the same, I would like spaces also between the right and left side of the div. Also the example above seems quite complicate to me.
Updated fiddle:
http://jsfiddle.net/eBLgP/5/
final code, with responsive behavior:
#panel {
border: 2px solid blue;
overflow: auto;
}
.icon-container {
float: left;
width: 33.3%;
text-align: center;
}
when you make elements float you can sort them all in the same line and same orientation as long as they're floating in the same direction, however for the parent container (panel div in this case) to recognize the height of containing elements you need overflow property, so add
overflow: auto;
Now you can add a div to contain the images, because using a width directly on images would alter the image dimensions and that's not what is intended.
Once you got floating div elements, you can spread them with a percentage based with, granting all of them will have the same space inside your container, doesn't matter how big or small the screen becomes .
The only thing left is to center images inside their parent containers, since divs are block display by default, you can use text-align: center to grant all of the children elements of parent (the images in this case) will be centered
You can try by using text-align:justify and adding 1 line on bottom like this :
http://jsfiddle.net/26CLe/1/
#panel {
border: 2px solid blue;
text-align:justify ;
}
#panel:after {
content:'';
display:inline-block;
width:100%;
}
The only problem is that it add a little line on bottom, but justification is okay.
This solution came from here :
http://yidille.free.fr/plux/valign/?69-text-align-justify-sur-derniere-ligne-et-centrage-de-boites
Related
I ran into an interesting CSS problem today, and I have been wracking my brain trying to solve it.
This is similar to the trivial problem of "a row of three elements, with a left, a right, and center," which can be solved easily with flexbox — but it has a couple of caveats that make it (I think) an impossible layout without JavaScript.
The desired goal
Consider a row-like container element and three children, "left", "right", and "center". The children may be of varying widths, but they are all the same height.
"Center" should try to stay centered relative to its container — but the three sibling elements must not overlap, and may push outside the container if necessary.
The markup, then, might look something like this:
<div class="container">
<div class="left">I'm the left content.</div>
<div class="center">I'm the center content. I'm longer than the others.</div>
<div class="right">Right.</div>
</div>
The CSS is where the challenge is.
Examples of what should happen
For wide containers, "center" is centered relative to the container (i.e., its siblings' widths do not matter), as in the image below; notice that midpoint of the "center" element matches the midpoint of the container, and that the left and right "leftover" spaces are not equal:
For narrower containers, "center" abuts the widest sibling, but it does not overlap. The remaining space is distributed only between the narrow sibling and the "center" sibling. Notice also that the container's midpoint, indicated by the caret, is no longer the same as "center's" midpoint:
Finally, as the container continues to shrink, there's no other option but to have all three elements lined up in a row, overflowing the parent:
My attempts to solve this
Surprisingly, I haven't found a good way to implement this in pure CSS.
You'd think flexbox would be the winner, but you can't really get flexbox to do it right: The space-between property distributes the space uniformly between the elements, so the center element doesn't actually end up centered. The flex-grow/shrink/basis properties aren't especially useful for this either, since they're responsible for controlling the size of the child elements, not for controlling the size of the space between them.
Using position:absolute can solve it as long as the container is wide enough, but when the container shrinks, you end up with overlap.
(And float layouts can't get within a mile of getting this right.)
I could combine the best two solutions above, and switch between them with a #media query — if all of the widths were known in advance. But they aren't, and the sizes may vary widely.
In short, there's no pure-HTML-and-CSS solution to this problem that I know of.
Conclusion, and a JSFiddle to experiment with
I created a JSFiddle that shows both the desired goal and a few non-solutions. Feel free to fork it and experiment. You can simulate the container resizing by grabbing the bar to the left of the content and dragging it. You are allowed to rearrange/restructure the HTML and CSS, if rewriting it gets you closer to a working answer.
https://jsfiddle.net/seanofw/35qmdnd6
So does anyone have a solution to this that doesn't involve using JavaScript to intelligently distribute the space between the elements?
With flexbox you should be able to solve that, by giving the left/right elements flex: 1 and the right text-align: right.
The main trick is flex: 1, which will make them share available space equally.
For more versions, see this brilliant question/answer, flexbox-justify-items-and-justify-self-properties
Fiddle snippet
Stack snippet
body {
font: 14px Arial;
}
.container {
display: flex;
border: 1px solid #00F;
}
.container > div > span {
display: inline-block;
background: #36F;
white-space: nowrap;
padding: 2px 4px;
color: #FFF;
}
.container > .center > span {
background: #696;
}
.container .left,
.container .right {
flex: 1;
}
.container .right {
text-align: right;
}
.center-mark {
text-align: center;
font-size: 80%;
}
.note {
text-align: center;
color: #666;
font-style: italic;
font-size: 90%;
}
<div class="container">
<div class="left">
<span>
I'm the left content.
</span>
</div>
<div class="center">
<span>I'm the center content. I'm longer than the others.</span>
</div>
<div class="right">
<span>
Right.
</span>
</div>
</div>
<div class="center-mark">^</div>
<div class="note">(centered marker/text)</div>
I have a 960px wide wrap, and then a 930px wide main-content wrap with 15px left/right margins. within the main-content wrap there are three divs floated left that are each 280px wide, with 15px margin-right to fill the main-content. To avoid giving the div to the right a margin and make it not fit I gave it another class and set its margin-right to 0.
I am trying to make the site responsive and these are my percentage calculations:
wrap=100%
main-content=96.875%
main-content margins=1.5625%
divs=30.10752688%
div margins=1.61290323
CSS:
#page-wrap {
width:960px;
margin: 0 auto;
background: white;
}
#main-content {
width:96.875%;
margin:15px 1.5625% 0 1.5625%;
}
.box { (the divs)
float:left;
width:30.10752688%;
min-height:160px;
margin:30px 1.61290323% 0 0;
}
.right{ (only the div to the right)
margin-right:0;
}
HTML
<div id="page-wrap">
<div id="main-content">
<div class="box">
content
</div>
<div class="box">
content
</div>
<div class="box right">
content
</div>
</div>
</div>
I don't know why the divs dont seem to resize correctly. Any help would be much appreciated!
The site can be viewed here for now: http://hl.kylmark.se
The problem I see is that there's a fixed 10px padding around all of the blue boxes. Since the padding is added on to an element's width, it throws off your percentage math.
Solution 1
You could just change the side padding on those boxes to a percent value like everything else:
.blue {
...
padding: 10px 1.0752688%;
}
With that approach you'd be collapsing the borders as you get smaller, which may not be desirable.
Solution 2
Maybe a better approach is to change the box-sizing property to calculate width from border to border rather than from content edge to content edge. That way you can have a 10px padding inside a flexible container whose width is figured correctly:
.box {
...
width: 32.258065%;
box-sizing: border-box;
}
One more thing
You may also want to watch out for is sub-pixel rounding. When your percentages calculate to something other than a whole pixel, the browser has to decide how to round it. If too many things are rounded up, the widths will get too big and cause content jumps like that in some browsers. You'll want to double-check that in your supported browsers. You can read a good explanation here.
<a class="profile_link" href="">
<div class="thumb_container">
<img class="thumb_image" src="" alt="thumb"/>
<span class="model_names">name</span>
</div>
</a>
a.profile_link{
color: black;
outline: none;
text-decoration: none;
}
.thumb_container{
float:left;
padding-left: 9px;
padding-right: 9px;
padding-bottom: 10px;
}
img.thumb_image{
display: block;
}
.model_names{
font-size: 12px;
text-align: center;
}
This code kinda of gives me what I want but not quite. So I have these links looped, which contain a thumb and a model name centered right below it. I want these thumbs and names to be dynamically placed in rows and when there is not enough room it will create another row. It is doing it right now but sometimes gets buggy and skips a row... it's just a mess. Keep in mind, the thumbs can be different sizes; I don't mind gaps at the end of rows if there isn't enough room.
There is also a main container div I didnt paste which just has the dimensions of 800px width.
Maybe someone has a better and cleaner way of approaching this layout.
I think the problem is caused by your floated div being placed inside a non-floated a. Whilst this will float the div, the effect is negated because the a is an inline element.
Try adding the .thumb_container style declarations to the a element.
BTW, this is always going to have potential to look ugly if you're using thumbnails of different sizes. You could also try setting a specific width and height to the containing div and setting overflow to hidden. You will need to move your span outside of div.thumb_container, but that shouldn't be a problem. You could then use some CSS and/or JS effect to show the full thumbnail on hover.
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)
I have these 3 icons enclosed in separate DIVs all of which are enclosed within a single DIV:
<div id="icons">
<div id="divtxt" class="divicon">
<img src="/icons/text.png" id="icontxt" class="icon"/>
</div>
<div id="divpdf" class="divicon">
<img src="/icons/pdf.png" id="icondoc" class="icon"/>
</div>
<div id="divrtf" class="divicon">
<img src="/icons/rtf.png" id="iconrtf" class="icon"/>
</div>
</div>
I set some simple styles but can't figure out why these images are lining up top-to-bottom instead of left-to-right:
div#icons
{
width:200px;
height: 100px;
}
div.divicon
{
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
}
Any suggestions would be appreciated.
And now for something a bit more comprehensive:
You look like you just want a row of icons. Using your HTML, you would need to float the divs containing the icons in order for them to be next to each other. The reason why you need to float is because a div is a block level element (as opposed to inline) which means that nothing can exist in the horizontal space next to it.
You can achieve this effect by adding a float: left; rule to div.divicon
Floating does two things: it takes the block element out of the page flow allowing other elements to exist next to it (or flow around it) and it reduces the width of the box to fit the content. As far as the parent is concerned, a floated element has no height. To illustrate this, just try giving #icons a background color or border. You will notice that it won't show up - or show up as a 1px line.
In order for the parent to recognise the height of the floated element you need to tell the parent that overflow should be hidden with this rule:
#icons { overflow:hidden; }
This also works in IE however not always, so sometimes you might need to set a height or width or do a zoom:1 which tends to fix a lot of IE bugs (look up "hasLayout bug" if you want more info).
Now for a different solution:
You look like you just want a row of icons. Unless theres a reason for the images to be surrounded in a div (and in your example there is none) I would suggest to you to do something like this:
<div id="icons">
<img src="/icons/text.png" id="icontxt" />
<img src="/icons/pdf.png" id="icondoc" />
<img src="/icons/rtf.png" id="iconrtf" />
</div>
#icons { /* rules for our container go here */ margin:0; padding:0; /* etc... */ }
#icons img { /* rules for your icons */ border:none; margin:0 2px; /* etc... */ }
I have removed the redundant divs and the redundant class attribute on the images. Since images are inline elements you wont need to screw around with floats and you wont have any extra divs that may cause divitis a degenerative HTML disease that affects many websites and spreads through bad advice. Remember, only use what you need - don't use it just because its there.
Hope this helps,
Darko
You need a
float: left;
in your div#icons.
div is a block level element. So the default behavior is to layout one below the other, unless you float them like Robert suggested.