I have rows of photo of same size shown, when you dont have sufficient number of photos in a row, the photo should expand in width to occupy full space. There can 3 inner divs or 4 inner divs.
// CSS Section
.cont {
position : absolute;
background : #E4EDF7;
border : 1px solid grey;
height: 200px;
width:400px;
}
.ibox {
float: left;
background : green;
margin: 5px;
border: 1px solid grey;
height: 50px;
width: 100px;
}
// HTML Markup
<div class="cont">
<div class="ibox"></div>
<div class="ibox"></div>
<div class="ibox"></div>
<div class="ibox"></div>
<div class="ibox"></div>
</div>
Ok, I did a little experimentation and came up with a quick solution to your autosizing issue:
.cont {
position : absolute;
background : #E4EDF7;
border : 1px solid grey;
height: 200px;
width:400px;
display:table;
}
within the "cont" class just add the last bit "display:table;" and the outer box should resize
to the added contents.
Question is a little confusing but I'm assuming you would want all photos in a row to expand equally to fill the row if there are only 3 rather than 4...
So.. not knowing the exact number of .ibox divs (3 or 4), there is no easy/reliable way to achieve this with css alone (that i know of) unless you can use some css3 - The CSS 3 Flexible Box Model - which may not be an option if you require older browser compatibility.
With a bit of jquery it would be fairly quick e.g.
var container = $('.cont'),
iboxCount = container.find('.ibox').length,
photoWidth = container.width()/iboxCount; //TODO: adjust for margin/padding
container.find('.ibox').css('width',photoWidth);
Hope this helps.
Brains911 made a good point as to confusion on what you actually want. I interpreted your "the photo" as 1 photo (the last) expanding in width, which is the original answer below. However, if you want "the photos" (plural, all 3) to expand, then there is a CSS3 answer that I have added below.
Original Answer (CSS2: Last photo only expands)
Add this below your ibox css:
.ibox:first-child + .ibox + .ibox:last-child {
width: 210px; /* 2 x width + 2 x margin */
}
It will only target the ibox and change the width if there are 3 instead of 4. See the fiddle, where I had to modify the width of your cont to accommodate your margins, but you should get the idea.
Additional Answer (CSS3: All 3 photos expand)
Change your standard width in your .ibox definition to what you want for 3 photos (in my example fiddle I used 137px), then add this css for the 4 photo scenario:
.ibox:nth-last-of-type(4),
.ibox:nth-last-of-type(4) ~ .ibox {
width: 100px;
}
It counts backwards from the end and if there are 4, it will trigger the styling for 4 instead of the default 3.
Related
I'm trying to format a slide in a bootstrap that has the format of the following fiddle: fiddle
The two divs with "hidden" in them are meant to disappear when on desktop so that when someone is using a tablet or phone they stack on top of each other. This works fine in the fiddle where the height is set to a fixed number
height: 100px;
But I don't want to set the height this way. If I remove this line you can see in the fiddle that "hidden2" drops down in a weird way instead of acting as a spacer for the text content on the bottom. I've also noticed if I remove the img tag the grid works fine.
I'm not sure why it does this and with real content it just looks like there's no spacer and all the text hugs the left side. Any ideas?
Edited: You can have a width of the content so there is space on both sides, and using the bootstrap grid system drop the text content down.
HTML
<div class="whole">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="http://placehold.it/100x100"/>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">text content</div>
</div>>
CSS
div {
height: 100px;
background: red;
border: 1px solid black;
text-align: center;
}
img {
border-radius: 50%;
}
.whole {
margin: 0 10%;
width: 80%;
}
As much as i understood from your question, you're trying to preserve the functionality found on the fiddle link you provided, but also preserving equal heights. I also understand that you do not want to assign the height manually (i.e in your case, hard-coded).
There are two ways of approaching the solution: Javascript or CSS3.
Javascript:
I usually wouldn't solve layout issues with Javascript, but since your scenario has more than one row invloved, the easy way is JavaScript. With the help of jQuery, you can iterate through the div elements, having an initialized variable (example: var bHeight = 0). Check for each element's height; if it's greater, assign it to bHeight.
Your code should something like this:
$(document).ready(function(){
var bHeight = 0;
$("div").each(function(){
if($(this).height() > bHeight)
bHeight = $(this).height();
}); //end of loop
//now, assign height to all
$("div").height(bHeight);
});
This method will allow you to assign the height of your columns dynamically.
CSS3:
A little research online cold introduce you to the CSS3 display: flex, yet it's totally up to you to decide regarding browser support (CSS flex Property), and more details on solving your issue here: (A Complete Guide to Flexbox)
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
I am attempting to make a second column in a DIV get taller when the column next to it gets taller.
In an attempt to 'sterilize' what I was trying to do, I created the following HTML with the styling in the DIV tags.
<body style = "width: 100%;">
<div style = "position: relative; display: inline-block; width: 100%;">
<div style = "display: inline-block; width: 700px;
background-color: #ff0000; float: left;">
line
<br/>
line
<br/>
line
<br/>
line
<br/>
line
</div>
<div style = "width: 300px; height: 100%;
background-color: #000; float: left; color: #fff;">
line
</div>
</div>
</body>
(There are a couple of closing tags I can't seem to get formatted correctly in this message.)
In my project, the red box can change height because the data inside will grow and shrink after the page has been loaded. So I have set it with display: inline-block.
When you display this, it will show one red area that fills the area from top to bottom. And there is a black side that only goes down one line.
How can I get the black side to go to the bottom AND shrink and grow with the red column?
I need the black box to extend to the same height as the red box.
You can use jQuery to find the largest div/element and set the others to be the same size, which is a dynamic solution just in case the first div gets larger, jQuery will always set them to be the same height.
var maxH = 0;
$('div.column').each(function() {
maxH = Math.max(maxmaxH, $(this).height());
}).height(maxH);
This could be helpful:
http://css-tricks.com/fluid-width-equal-height-columns/
Pure CSS solution for equal column height with stacked divs
I am trying to make vertical-aligned div in relation to auto height div.
It is a little bit hard to explain so I have screenshot that will explain everything:
The orange div is the container.
The blue div is 2nd container inside the main container.
The green div is the vertical-aligned div which should be aligned in relation to the blue one.
I have no idea how to make this work. I want it to be cross browser (ie6+, ff & chrome).
Thank you very much!
For this answer I have assumed that both the blue as the green divs have a dynamic height.
In order to calculate the correct offset of the green div we can not use CSS. CSS doesn't allow us to position an element using the data of another element.
Instead, we need to calculate the offset ourselves which requires a client-side language. Time to embrace Javascript. To make it easier for us, I'll use jQuery because it does a lot of work for you using real sweet syntax.
So, we need to find out how to calculate the offset. First we need to know the center of the blue element. Easy enough: blue.height / 2. Next, we need to calculate how much the green div should go up when the top of the green div is aligned the actual center of the blue div. That's basically the half of the height of the green div, right? That gives us the next formula: (blue.height / 2) - (green.height / 2).
Alright, let's put that in javascript!
var center = $('div.blue').outerHeight(true) / 2; // this is the blue div
var offset = center - $('div.green').height() / 2;
And finally, setting the offset:
$('div.green').css({
'margin-top': margin
});
Cool theory, but I'm sure you want to see it in action. You can see the demo here.
Edit:
Oh yeah, I forgot to mention that jQuery is a cross-browser framework and supports very, very old browsers.. Read all about it here!
See: http://jsfiddle.net/thirtydot/aeFrH/
CSS:
#container {
width: 748px;
background: orange;
}
#container-inside {
width: 500px;
background: cyan;
}
#aligned {
width: 248px;
background: green;
}
#container-inside, #aligned {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
HTML:
<div id="container">
<div id="container-inside">
Some<br />
content<br />
is<br />
in<br />
here.<br />
</div><div id="aligned">
Aligned.
</div>
</div>
I'm creating a full screen (html, body {height: 100%}) web application and have a screen which has a form in the top (approximately) half, and some other information with two buttons in the bottom (approximately) half.
What I'm wanting to do (being a touch screen in an industrial environment) is to make these buttons as big as possible. So they have height: 50% inside the bottom container.
The question is: how do I get the top half to take the height it requires, and the bottom to take the rest? i.e. is it possible with CSS (2.1 preferably, but 3 is good too)?
There's no way to make an element in CSS 2.1 to take up the rest of the space vertically. Block elements, like Div tags, will automatically stretch out to fill a space horizontally, but won't do it height-wise. This means that you can't get something, like a content page or your buttons, to stretch out to fill rest of the empty space.
The best way to achieve something like this is with tricks, or knowing exactly how high each element will be. For instance, if you know the exact percentage that the other elements will be, you can hard-code a percentage into your stylesheet as described, here. Another trick would be by making the bottom element fill the entire window, and hiding the top half with the form.
Tables, however, are the only elements which will stretch to fill a vertical space. That might be the only solution available to you. An example of this is shown below:
<form ...>
<table id="container">
<tr><td id="top">Form elements go here</td></tr>
<tr><td>Buttons go here</td></tr>
</table>
</form>
And the CSS:
#container {
height: 100%;
width: 100%;
}
#top {
height: 200px; /* Replace this with the appropriate height, or remove altogether. */
}
.buttons {
height: 100%; /* Used to stretch the buttons to fill the element. */
}
the HTML:
<div id="c">
<div id="topHalf"></div>
<div id="bottomHalf"></div>
</div>
the CSS:
#c {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#topHalf, #bottomHalf {
height: 50%;
width: 100%;
background: #00f;
}
#bottomHalf {
background: #f00;
}
You can place your buttons inside the bottom half.
try something like this :-
<html style="height: 100%">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%">
<div id="top" style="background-color: #cccccc; height: 50%">form here</div>
<div id="bottom" style="background-color: #eeeeee; height:50%">buttons here</div>
</body>
essentially height:100% just tells the div to be as big as its parent, and this carries on up the chain of parent objects. you'll notice that if you remove the height:100% on the html tag that all the inner children will just collapse up.
hth
EDIT: I just realised this is appropriate if using tables. If using a div then it's a little harder... a JavaScript function to manipulate the height of the bottom element using the style property in the element. Have a look at this previous question that may help with the JavaScript
ORIGINAL ANSWER
Try putting in the CSS for the bottom half of the application
min-height:50%;
Then specify no height in the top half section.
This will mean the bottom half with the buttons will be at least 50% of the screen area being able to become bigger as required and the bottom half will take the remaining section.
Personally I make this a little smaller than what I expect to use, e.g. instead of 50% I may use 30%, this means I'm getting the most out of my screen real estate but it may not be appropriate in your app.
I hope this helps ;-)