How do I set the css height on divs to automatically be the same?
- Thread starter Glenn
- Start date
CaldwellYSR
Member
I would use jquery to do it. Something simple like...
then you'd just call the column_height() function at the body load. A warning about this though: depending on how you set your overflow and how much content you have in each column, you could end up with alot of content being clipped or scrollbars in your left or right columns.
Code:
function column_height() {
var h = $("#center").outerHeight(); // outerHeight return height plus padding
$('#leftcol').css('height', h);
$('#rightcol').css('height', h);
}then you'd just call the column_height() function at the body load. A warning about this though: depending on how you set your overflow and how much content you have in each column, you could end up with alot of content being clipped or scrollbars in your left or right columns.
CaldwellYSR
Member
That looks like a php error not a jquery error? Do you have jquery loaded on your page? Did you make sure to put that function in a js file and not a php file?
keens
New Member
Hey, Glenn.
You can also use CSS. I browsed online for a step-by-step tutorial for you to follow. click here for the reference.
It's working I already tried it myself. Let me know if you are having a difficult time I will help you out.
Cheers!
You can also use CSS. I browsed online for a step-by-step tutorial for you to follow. click here for the reference.
It's working I already tried it myself. Let me know if you are having a difficult time I will help you out.
Cheers!
I do not know how to use it as a jquery.
CaldwellYSR
Member
oh... well the error you're getting is because that's not php code
looking at keens answer I think the problem you're having is much easier fixed than what I was thinking. If all of your columns are wrapped in a container then you can just put overflow: auto; or overflow: hidden; on the container div.
CaldwellYSR
Member
Holy jesus, mary, and joseph dude! You have 70,000 divs in there just for that border image? There are much easier ways to do that with CSS. You can set background images to certain positions and repeats so in your case it would be...
HTML:
background: url(topleft.png) top left no-repeat, url(top.png) top repeat-x, url(topright.png) top right no-repeat, url(right.png) right repeat-y, url(left.png) left repeat-y;So on and so forth. and that's all one div.
Sorry that I went a little ghetto for a second that was just shocking.
Where do you get 70,000?
keens
New Member
Glenn,
With your current setup, here's my suggestion.
1. remove the left-div and right-div
2. set the width of your main-div to 995px or whichever fits the container
3. create a background image 995px in width
4. set your main-div background to white and that image you just created (e.g. background:url(images/pipe.png) repeat-y #fff;
5. repeat it vertically
This is a quick workaround. There are a lot of ways to fix this, a good fix would be to simplify your CSS and minimize the use of your div.
With your current setup, here's my suggestion.
1. remove the left-div and right-div
2. set the width of your main-div to 995px or whichever fits the container
3. create a background image 995px in width
4. set your main-div background to white and that image you just created (e.g. background:url(images/pipe.png) repeat-y #fff;
5. repeat it vertically
This is a quick workaround. There are a lot of ways to fix this, a good fix would be to simplify your CSS and minimize the use of your div.
I just added this down below the one I had. It didn't work.
CaldwellYSR
Member
It was an exaggeration... you have 11 empty divs for the soul purpose of having a border image. That's unnecessary. If you use the method I described you won't even have to worry about the div height.
I did. Didn't work. Take a look.
CaldwellYSR
Member
Hmmmm it says invalid property value... syntax looks right though. Not positive. Try looking here at border images and multiple background images. I've never actually worked with either of them because I haven't ran into a situation where I needed it but it looks like example 27 should fit your needs. Sorry for harping so hard and then being wrong in my solution
but I do know the way you're doing it is wrong... all those empty divs.Hmmmm it says invalid property value... syntax looks right though. Not positive. Try looking here at border images and multiple background images. I've never actually worked with either of them because I haven't ran into a situation where I needed it but it looks like example 27 should fit your needs. Sorry for harping so hard and then being wrong in my solution
I've tried it with borders before. I can't get images like I am using to line up. Maybe I just need to edit the images more.
CaldwellYSR
Member
Well the jquery method will work. You need to put this in your <head>:
then in another script tag put:
That being said, the best way to do this is going to be border images. It will require editing your image pretty precisely but in the end it will yield the best and fastest results.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>then in another script tag put:
HTML:
<script>
$(function() {
var h = $("#center").outerHeight(); // outerHeight return height plus padding
$('#leftcol').css('height', h);
$('#rightcol').css('height', h);
})
</script>That being said, the best way to do this is going to be border images. It will require editing your image pretty precisely but in the end it will yield the best and fastest results.
This was so funny the first time I read it.
CaldwellYSR
Member
funnnyy!!!!