Little Goat Posted May 16, 2006 Share Posted May 16, 2006 ah-ha! once again the "both coloumns the same length" problem.http://w3schools.invisionzone.com/index.ph...3755&hl=columns try this post.LG Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 (edited) sorry to be a b**ch and all but, i dont want a scrollbar on the content, just want it like my friends site http://drkhaven.com/anime,trigun .<{POST_SNAPBACK}> But aren't your friends using tables? :)Would definitely solve your problem... Edited May 16, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 But aren't your friends using tables? :)Would definitely solve your problem... <{POST_SNAPBACK}> lol ofc dan, thats why i wanted to do it in css :S its suppose to be better? in my opinion, html owns css Link to comment Share on other sites More sharing options...
justsomeguy Posted May 16, 2006 Share Posted May 16, 2006 They both have their strong points, the benefits of CSS became apparent pretty quickly when it came out and people had been using <font> tags and a bunch of crap to format their pages, and realized that stuff was a pain to change.If you want 2 columns that are the same height, you can try this. Think of your divs as boxes. You have 2 boxes there. Now put both boxes in a larger box that only holds the 2 smaller boxes. <div class="navigation">nav menu</div><div class="content">sweet content</div> <div class="container"><div class="navigation">nav menu</div><div class="content">sweet content</div></div> Now the height property (in theory) is supposed to make the element the height of the parent container (if you use percentages). So you set the height of both the navigation box and the content box to be 100%. .navigation{ height: 100%;}.content{ height: 100%;} In theory, that should make both boxes the same height (the height of the parent). The height of the parent should grow to fit the largest of the 2 boxes on the inside, and then the other box should grow to fit the parent.Got it? You have a good eye for design btw, the colors and image positioning are clear and well laid out, which is typically not something you see from a beginner. Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 16, 2006 Share Posted May 16, 2006 In theory, that should make both boxes the same height (the height of the parent). The height of the parent should grow to fit the largest of the 2 boxes on the inside, and then the other box should grow to fit the parent.<{POST_SNAPBACK}> Yeay, precisely Sort of better explained as I did here: What I mean, is if you force the shared parent of the navigation and the content to be with a certain height, the contentbox would get a scrollbar if it overflows that height. And when the navigation has the full amount of height its parent has, the empty area should be filled with the bakground of the navigation, I presume Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 Yeay, precisely Sort of better explained as I did here:<{POST_SNAPBACK}> kk well i tryed to do it :S but didnt do nothing, maybe i coded it wrong.#navleft{float: left;width: 178px;margin: 0;background-image:url(navbg.gif);background-repeat:repeat-y;height: 300px;padding: 5px;}.navigation{height: 100%;}/* you do not float the content it is like the container, it is what ever you dont use, you change the margin to lign it up */#content{margin-left: 188px;border-left: 0px solid black;background-image:url('conbg.gif');background-repeat: repeat-y;padding: 5px;height:300px;max-width: 36em;}.content{height: 100%;} and <div id="navleft"> <div class="navigation"> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p> </div></div> <div id="content"> <div class="content"> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> </div></div> Link to comment Share on other sites More sharing options...
justsomeguy Posted May 16, 2006 Share Posted May 16, 2006 OK, one of us got slightly confused. Since you already have two styles defined for the navleft and content IDs, you don't need a new navigation and content class. You can remove the .navigation and .content from the CSS. Change the height inside both #navleft and #content to be "height: 100%;" instead of "height: 300px;". Then change your HTML like so: <div id="container"> <div id="navleft"> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p><br> <p>Naviagtion bar left.</p> </div> <div id="content"> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> <p>Content box</p><br> </div></div> Later on you can add some properties to the #container style if you want to add things to the whole bunch. Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 lol that didnt work it just the usual problem again, a white gap under the shortest div. Link to comment Share on other sites More sharing options...
scott100 Posted May 16, 2006 Share Posted May 16, 2006 What about starting with a layout that works already and making your changes?http://www.alistapart.com/d/holygrail/example_3.html Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 thats called ripping, and if i dont learn it now, when will i ever learn it? Link to comment Share on other sites More sharing options...
justsomeguy Posted May 17, 2006 Share Posted May 17, 2006 Well, most people who learned CSS or HTML learned it by looking at what other people did and how they did it. Grab someone else's code and start changing things and playing around with it to get a feel of why they did what they did.That being said, the particular link above might not be the best example. It looks pretty bad in Opera. And it uses some terrible hacks for purposes I'm not quite sure of. * html #footer-wrapper { float: left; position: relative; width: 100%; padding-bottom: 10010px; margin-bottom: -10000px; background: #FFF; /*** Same as body background ***/ } It's great that they use a comment to explain why the background is white, but god forbid they explain why there is a negative 10,000 pixel margin. WTF? Surely CSS should be able to do something like this without resorting to hacks like that. But of course, if the W3C thinks that divs should never be the same height and that pages should never have a footer appear at the bottom of the screen, then you aren't going to have any luck. It's great to have one organization controlling all of the standards for the web, but.. on the other hand.. there's only one organization controlling all of the standards for the web. Link to comment Share on other sites More sharing options...
scott100 Posted May 17, 2006 Share Posted May 17, 2006 thats called ripping, and if i dont learn it now, when will i ever learn it?<{POST_SNAPBACK}> Well yeah look at the code and see how they got it to work, i learned alot from taking pages like that and changing values here and there and seeing what happened. Best way of learning it if you ask me (obviously knowing what each selector{property: value} is helps, but there not hard to figure out) 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