I want the two vertical borders in this mockup to be the same height (i.e., the height of the containing block):
As you can see, the left border looks good (because the left column is the tallest column), but the right border is too short (since the middle column is shorter than the left column)
I know I can do this by giving the containing block an explicit height and giving each child a height of 100%, but I'd prefer not to do this – instead I'd like to allow for different height "forum thread holders" without ugly scrollbars / overflow
You could do this...
HTML
<div id="container">
<div id="left">
abc
</div>
<div id="right">
def
</div>
</div>
CSS
#container {
overflow: hidden;
}
#left,
#right {
padding-bottom: 1000px;
margin-bottom: -1000px;
}
jsFiddle.
Your cloud use this wonderful piece of jQuery code -
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
What it basically does is it finds the height of the tallest element in the group an adjusts the others elements heights to it. This way even of you change the content of the elements the height will still be adjusted.
Just call the function like this
equalHeight($('name_of_parent_element'));
Related
This question already has an answer here:
Two divs; left should be fixed width, right should fill rest of space
(1 answer)
Closed 9 years ago.
I have on my page 2 divs: one (left) with menu and second (right) with content. Right div must have width of 800px and be horizontally centered. I want left div to fill all remaining space.
I tried setting display of the divs as table-cell or setting float to right and left and putting in left div span element with width:100%, but it didn't work.
Is there any way to make the divs look as I want?
Try this:
HTML
<div id="left">
Menu
</div>
<div style="text-align: center;">
<div id="right">
Content
</div>
</div>
CSS
#left {
background-color: green; /*for demonstration purposes*/
float:left;
}
#right{
background-color: blue;
width: 800px;
}
JS
$(document).ready(function(){
var width = $(document).width();
var rightDivWidth = $("#right").width();
var leftDivWidth = width - rightDivWidth;
$("#left").css("width", leftDivWidth);
});
Demonstration
Hopefully I can explain this well, as I haven't in the past.
I am looking to achieve something like this...Divide a wepage into three and put a title in the center.
|TitleLeft|Title|TitleRight|
So assume title is width:500px. Title left and right will change dependant on window size. Simple enough by setting it to 500px and then margin: 0 auto;. This is how I have the content of a page, but the title should stretch left while still being centered on the page (or left aligned within that 500px boundary). So assume title has a background of orange. TitleLeft should also have a background of orange.
Maybe this will help (it uses tables and is badly aligned...I want to avoid tables if possible!) as it shows roughly what my aim is.
http://jsfiddle.net/CmWRu/
If I understand your question correctly, you're looking for:
Middle column is a fixed with, centered on the screen
Left and right columns will always expand leftward and rightward, respectively, to fill out remaining available space, even if the screen re-sizes
Headings will always be centered in their respective divs.
OK, first some HTML (I'm using presentational markup to make this easier to follow...you'll want to decide what markup is semantically relevant for your project:
<div id="wrapper">
<div id="left">
<h2>Title Left</h2>
</div>
<div id="center">
<h2>Title Center</h2>
</div>
<div id="right">
<h2>Title Right</h2>
</div>
</div><!-- wrapper -->
A little CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#left, #right {
background: #FF8C00;
}
h2 {
text-align: center;
}
#center {
width: 500px;
float: left;
background: #e0e0e0;
}
And some jQuery:
//document ready function
$(document).ready(function(){
//on page load, call the resizeColumns function
resizeColumns();
//and also call it whenever the window resizes
$(window).resize( resizeColumns );
//we define the function
function resizeColumns(){
//grab the width of the wrapper and save it to a variable
var windowSize = $('#wrapper').width(),
//same thing for the width of the div with id of "center"
centerSize = $('#center').width(),
//windowSize - centerSize = the remaining width of the screen.
//Divide that by 2, and that's how wide each remaining column should be.
//We save that value to a variable
fluidSize = (windowSize-centerSize)/2;
//Now just set the width of the left and right columns equal to fluidSize
//and float them to the left.
$('#left, #right').width(fluidSize).css('float','left');
}
});
Lets say I have this
<div class="sectionContainer">
<div class="itemsContainer">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
</div>
The css:
.itemsContainer
{
/* width:3000px works, however this is what I want to avoid saying explicitly.*/
}
.sectionContainer
{
width: 1000px;
overflow: auto;
}
.items
{
width: 1000px;
float: left;
}
The sectionContainer has some set width.
The items has some set width.
The items container does not have a set width; it will scale to the size of its contents.
The items container's overflow is set to hidden, so that one can scroll through the items within the div. The items within the div are horizontally displayed IE they are side-by-side, I'm currently doing this with a float.
How can I do this with CSS only? Is it possible? I'm not looking for a JavaScript solution right away but can resort to that if needed.
to be more specific, this would work if I specified the itemsContainer to have a width of 3000. But I'm guessing that since it is the child of its parent div, its width gets sized to 1000. I do not want to explicitly set the size of the itemsContainer because this should be based upon the number of items. If I add more items, I want the itemsContainer to change its width to contain all of those items without having to alter the CSS.
Thanks!
It's not possible for CSS to guess what you want to happen -- meaning that it wants to cascade elements downward as opposed to horizontally, which is what you want.
http://jsfiddle.net/9NHFa/
Set the itemsContainer width to a 100% X the number of elements.
.itemsContainer
{
width:300%; /* since you have 3 elements
}
I was wondering if this were possible, and if it is the best way to go about this:
example image (since I'm not allowed to post pics yet ^^)
So, not only does each column have to be of equal height, but each column also has its own individual footer.
I saw this SO post — how could I rework this technique to apply to the bottom of the divs and not the bottom of the window?
Edit: each column will have content that will constantly change and be of variable height. I'm thinking I could just figure out the equal height columns first, then just absolute position a footer div within those columns. Does its parent div then have to be position: relative?
Looks like a nested div in each that has the same properties. So each outer div is the same size, and so do the inside div.
.outer
{
height:500px;
float:left;
margin-right:20px;
}
.inner
{
height:30px;
width:100%;
margin-top:-470px;
}
<div class="outer">
<div class="inner">
</div>
</div>
Didn't test this; off the top of my head!
Ok, I'm trying to take several divs and all their content, and stack them on top of each other and make the containing div (#stack) appear in the normal flow of things via the following method:
CSS:
#stack
{
position:relative;
display:block;
}
#stack div
{
position:absolute;
left:0;
}
HTML:
<div id="stack">
<div>
<img src="images/1.jpg">
<p>
First Image
</p>
</div>
<div>
<img src="images/2.jpg">
<p>
Second Image
</p>
</div>
<div>
<img src="images/3.jpg">
<p>
Third Image
</p>
</div>
<div>
<img src="images/4.jpg">
<p>
Fourth Image
</p>
</div>
</div>
Which works, except now div#stack has a width/height of 0. I would like it to be the same size as its largest child.
Thanks in advance for the help!
As you are taking the inner divs out of the document's flow with position: absolute;, the outer div cannot in any case stretch to the dimensions of the biggest child. You have to use javascript to achieve that effect. If you're familiar with jQuery, you could use something like this:
var w = false, h = false;
$('#stack div').each(function() {
w = $(this).width() > w || !w ? $(this).width() : w;
h = $(this).height() > h || !h ? $(this).height() : h;
});
$('#stack').css({
width: w,
height: h
});
Setting position:absolute takes the node out of the flow, which is why the parent, not having any flowed content, gets dimensions of 0x0.
If your server code (e.g., PHP) knows about these images, you could calculate the maximum width and the maximum height among them and set the height/width of the parent appropriately.
Or, as Tatu says, you can use JavaScript and do it client-side.
Do you want the width of the #stack to shrink-wrap its children as well, or are you just concerned about its height? I'm assuming the latter, since you explicitly put display: block on it.
Because in that case, it is possible to do it just with CSS:
#stack {
overflow: hidden;
_zoom: 1;
}
#stack div {
float: left;
margin-right: -100%;
}
I added the _zoom: 1 to trigger hasLayout in IE6. You can change that to your preferred method (e.g. in a separate IE6 stylesheet), or leave it out altogether if you don't need to support IE6.
In Opera, you can make the #stack shrink-wrap its children entirely (i.e. in width as well) when you float the stack (or display: inline-block) and add width: 100% to the child divs. I don't know if that's because of a bug in Opera, a bug in the other browsers, or just a difference due to a vague spec.