Dak Posted February 11, 2006 Share Posted February 11, 2006 So... if i want to make a webpage with three divs, layed out like so My question is: is there an easy way to tell the div on the right to increase in height to match the one on the left? Link to comment Share on other sites More sharing options...
Cap'n Refsmmat Posted February 11, 2006 Share Posted February 11, 2006 No. What you can do is have a footer div (with clear:both) that supplies the bottom border for both of them, so that it'll at least look like they're the same height. Link to comment Share on other sites More sharing options...
Dak Posted February 11, 2006 Author Share Posted February 11, 2006 I can see why that should work (the footer div should drop down, pulling the bottom of the right div that it's in, untill it is level with the left div), but it doesn't seem to work. I put this in: __________ <div class="right"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eu</p> <div style="clear: both;">. </div> </div> ___________ Was that what you meant? [edit]hmm... i think you've given me enough of a clue tho, ill go and think about it.[/edit] Link to comment Share on other sites More sharing options...
Cap'n Refsmmat Posted February 11, 2006 Share Posted February 11, 2006 That's not quite what I meant. I meant a footer div at the bottom, outside of the other two. Link to comment Share on other sites More sharing options...
Dak Posted February 11, 2006 Author Share Posted February 11, 2006 like this (the blue div)? I cant see how to drop the left div's bottom down to it. i tried putting the left, right, and footer divs all in a div, and tried setting the height of the left div to 100%, hoping it would fill the whole containing-div, but no. no it did not. balls is what i say. this is confusing Link to comment Share on other sites More sharing options...
Cap'n Refsmmat Posted February 11, 2006 Share Posted February 11, 2006 Ah, you have a border on it. Well, I frankly have no idea. I've gotten two-column layouts to work (the longer column has the border on it, and the footer has a border, so it looks like they're both of the same length) and such, but no three-column ones. Your best bet would be a table (!). Link to comment Share on other sites More sharing options...
Dave Posted February 11, 2006 Share Posted February 11, 2006 It's fairly easy to do, but it requires a bit of trickery. Personally I would float the left hand sidebar to the left, the right hand sidebar to the right. Then you can set up the content div to have the appropriate left and right hand side margins so that the content doesn't wrap around. To get the borders, create a container div that wraps all three of them, and then you can assign the various border sides etc to get the border layouts you want. I'll try and come up with an example if I get the time and you need it. But I'm fairly sure that's the general idea. Link to comment Share on other sites More sharing options...
Dak Posted February 12, 2006 Author Share Posted February 12, 2006 Hangon, wait.... ignore the borders, i'd just be happy knowing how to match the heights of the side bars. And cheers muchly both for the help Link to comment Share on other sites More sharing options...
Dave Posted February 13, 2006 Share Posted February 13, 2006 Well, there's no actual way of making the toolbars the same height. The fact of the matter is though that you don't need to, as long as you can make it look as though they are the same height. I will try and make an example for you a little bit later, but right now I'm fairly busy so I can't. If I don't get back to you, just PM me and I'll try to come up with something. Link to comment Share on other sites More sharing options...
Dak Posted February 13, 2006 Author Share Posted February 13, 2006 Thank you very much I don't know why, but this has been really stressing me out the fact that the "height: 100%" bit didn't make the div take up the whole height of the containing div just really annoyed me for some reason Usually i find it quite fun trying to figure stuff like this out. Link to comment Share on other sites More sharing options...
1veedo Posted February 13, 2006 Share Posted February 13, 2006 I dont really like CSS. Or at least not as a "replacement" for tables. It handles cool tricks well, like highligting (instead of Javascript), but it cant seem to format right. I leave the CSS version of my site up hopping that I'll fix it. So I guess I might as well ask. I want the site to look like this, more or less: http://1veedo.homelinux.com/index-2.php At the main site, the bottom gets pushed off. You can see it on the "short" page here, http://1veedo.homelinux.com/index.php?1veedo=articles . I found several sites telling me to make one big CSS table and then a bottom one to enclose things in but it never worked. I found a site that advertised exactally what I wanted to do yet for some reason firefox, konqueror, and IE show the same thing. Link to comment Share on other sites More sharing options...
bascule Posted February 13, 2006 Share Posted February 13, 2006 It can be done with JavaScript Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now