I'm trying to implement equal column heights on my new website. If you look at the following page
http://blackburnseo.com/ensor_install/hedgehog-gutter-brush
The left column doesn't auto stretch.
I've tried a few jquery auto heigh solutions but they seem to break up my layout?
Can anybody recommend a solution?
Thanks,
Dan
Check Roger Johansson's faux columns article at http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/. I have used it several times.
What it does is it backgrounds the container and then the main section has its own background, the sidebar is clean. As the main content grows, so will the sidebar seamlessly.
I use this plugin, I wrote for myself, in every project where I need the heights to be equal. But if you can use CSS-only faux columns technique I would go for it instead. The plugin needs some updates to look more professional :-P
You could try the following:
add an <div class="clear"></div> after you right menu
move your background from your left_menu to your content_wrapper
Take background off #left_menu and put it to #content_wrapper with float: left;
#content_wrapper {
background:url("images/left_menu.png") repeat-y left top;
float:left;
}
See this post:
Fluid Width Equal Height Columns
Related
I've been banging my head against a wall trying to figure this out; http://nicklemmon.com/lily
For some reason the height of the .content div won't adjust to fit its contents! I can make the height of .content greater than 100%, but that kind of defeats the purpose of a fluid layout. This is just a random site I was working on to learn more about CSS animations, yet I've run in to this silly barrier on the way.
Help!
overflow:auto should do the trick for you.
.content{
overflow:auto;
}
you have a height of 100vh, remove it and you should be fine.
Update(making left column height equal to right column height)
As it appears, there seems to be no straightforward way to adjust left column to same height as right column using pure CSS, you can do a workaround in a number of different ways, best way I would suggest is to use Javascript/jQuery.
//HTML
<div class="moving-right big-lefty col-md-3">
</div>
<div class="big-righty col-md-9">
</div>
//jQuery to use on document ready.
$(".big-lefty").height($(".big-righty").height());
you might want to try another CSS solution that did not work in your case when I tried it on chrome, using inspector. you might want to play with it.
Have .content as display:table-row and .big-lefty and big-righty as display:table-cell
I just want to make a research that concerns responsive web design. Don't treat this question like a problem that must be solved. It's just an experiment :)
Sometimes we need to combine percentage and fixed values for dimension calculation especially when it comes to create some responsive layouts. As far as I'm concerned I've found four ways to achieve the desired effect in pure CSS.
Problem
Let's have a quick look on the problem - we need to create a three column layout stretched to the entire width of page where one of the column has a constant width and each remaining column fills out half of the available space.
<main>
<section>
<article class="first">
I fill out half of the available space!
</article>
<article class="second">
I fill out half of the available space!
<strong>Be aware that contents of article and aside may be changed!</strong>
</article>
<aside>
I'm 50px width!
</aside>
</section>
</main>
We have to achieve following layout without modifying HTML structure, contents of <article> and <aside> may be changed. Only pure CSS solutions will be accepted.
Solution 1 - Cross-browser fixed layout table
Example: FIDDLE
The width of each column in default table is calculated automatically and depends on the content of cells. In order to resolve the problem we need to force the size of the column, so this solution uses table that has table-layout property set to fixed. It allows to set the width of any column.
It is probably the most supported solution (read more).
Solution 2 - Making use of calc() function
Example: FIDDLE
The calc() function enables us to combine percentage and fixed values, for example:
article {
width: calc(100% - 50px);
}
Unfortunately this is not cross browser solution (read more) and it is recommended to use fallbacks (read more).
Solution 3 - Flexible flexbox
Example: FIDDLE
This is probably the future of responsive web design. I've implemented desired layout in an instant. Flexbox offers a lot of interesting features (read more).
You can read here about the compatibility.
Solution 4 - Margin manipulation and absolute positioning
Example: FIDDLE
This is another well supported solution. Absolute position is applied to the static aside element, section has appropriate right margin, 50% width is added for both article elements.
Summary
That's a very common problem in responsive world and I am very curious if there is any other ideas how to resolve it in pure CSS. Any thoughts on that will be appreciated.
Footnotes
Try to shrink fiddle's preview pane to the minimal width - in my opinion good, worthy tables still behaves most predictably ;)
Regards.
(Edit: this one is similar (/simplified) to the OP's Solution 1 and AFAIK he covered all of the most popular solutions out in the wild. To recap, this one is a neat way to make it cross-browser compatible)
jsBin demo
...would be to simply mimic the way table does it,
and prevent stretches using table-layout: fixed;:
article, aside {
display:table-cell;
}
aside {
width: 50px;
}
section {
display:table;
table-layout: fixed;
width:100%;
}
See also: Two column template with static and responsive width
NOTE! Don't forget you can nest elements inside the two-column version or other versions to create different variants.
I broke your conditions slightly by putting the two articles into a container element '.left' but this is the technique I usually use. Give the aside a fixed width and give the responsive content a padding-right of the same amount so that they don't overlap.
http://jsfiddle.net/John_C/fhvp3pod/
.left{
padding-right:50px;
}
aside{
position:absolute;
top:0;
right:0;
width:50px;
}
The main disadvantage of this method is that the aside is outside the main rendering tree so, if the aside is longer than the main content, it won't push down the page following elements.
For some reason my <td>s are overlapping each other. It's not supposed to do that.
I want the center to be seperate from the left column which currently isn't.
Anyone got a clue what I did wrong? This is the website where you can see the code etc:
.MiddleCenterContent has a width of 100%, forcing it to overlap its neighbours. A better method would be to make defaultTable width 100% then just define the width of the other cells, and .MiddleCenterContent would fill out.
Despite this, it's better practice to use <div> tags for layout. There are plenty of tutorials on methods using these available on the internet.
The reason is the width of 100% of .MiddleCenterContent. Do not use tables in order to structure your layout. Tables are only for tabular data. Using divs or other semanticly appropriate containers will help you to prevent such issues.
in your css you have
.MiddleCenterContent {
width: 100%;
vertical-align: top;
}
just remove the following line
width: 100%;
which forces the center cell to be 100% large, overlapping other cells
I am trying to make a horizontal scrolling website and I want the divs to float to the right which I can do. But I don't want to have to define the width of the container because it could be different on different pages.
Any Ideas?
Firstly, its generally inadvisable to have a website that requires scrolling side to side. Its an unusual movement (users dont come across it very much) and users tend not to like doing it.
To actually answer your question, the only method other than setting a fixed width onto your container is a percentage width, that way you can set it to be the same size (proportionally) for every user. Alternatively, if you dont want to put on a fixed width at all, just leave it. The container will automatically expand to size of whatever you fill it with.
Your best bet might be to use a javascript library (such as jquery) to check for the widths of columns you have, and set the container to the sum of the widths of the columns.
make a container that holds your divs.It seems to me that you should float all of those divs left.
<div id="container">
<div class="floater_divs">
</div>
<div class="floater_divs">
</div>
</div>
#container { width:100%; other stuff you want etc...}
.floater_divs { float:left; other stuff you want etc...}
If you want the floater divs to have different rules, then just make new classes or id's.
I've been trying to come up with a way to create a 3 column web design where the center column has a constant width and is always centered. The columns to the left and right are variable. This is trivial in tables, but not correct semantically.
I haven't been able to get this working properly in all current browsers. Any tips on this?
Use this technique, and simply specify a fixed width for the centre column.
Check this out: http://www.glish.com/css/2.asp
And replace the width: xx% for #maincenter by a fixed value. Seems to work when I change it with Firebug, worth a shot?
#maincenter {
width: 200px;
float: left;
background: #fff;
padding-bottom: 10px;
}
I think you'd need to start off with initial (fixed) widths for both sidebar columns and then, when the page loads, use javascript to get the window width and calculate the new width of the sidebars.
sidebar width = (window width - center column width) / 2
You could then reapply the javascript if the window is resized.
This article at A List Apart has a solution resulting in a 3-column layout that will :
have a fluid center with fixed width sidebars,
allow the center column to appear first in the source,
allow any column to be the tallest,
require only a single extra div of markup, and
require very simple CSS, with minimal patches.