Im trying to get two divs that are next to eachother automatically be the same height whatever is in them, but im struggling to get it to work!:/ http://benbullingham.co.uk/pb/index.php What we deliver for you and test are the divs that are next to eachother and that i want the same height etc, PBSL 2008 is the footer which is for some reason going above contentleft div, i think its to do with the height of contentright? Any help would be much appreciated!
float them both left or put the float right before the float left if u want them on the same line. getting them to be the same size isnt as easy as it should be, or as easy as it is with a table, if its just the background color block you want the same i would put a containing div around both of them with the color
Hi Kode, i have put them in one container but it didnt seem to make any difference. Content left is a PHP include as is header, content right will be different for all page but i want the contents 2 always be the same height other wise it will look quite silly
This kind of thing is always a bit flaky... height:100%; always seem a bit hit-or-miss. In theory...: Code: <div id="wrapper"> <div id="col1">your words</div> <div id="col2>more words</div> <div class="clear"></div> </div><!--/wrapper--> <style type="text/css"> #wrapper { height: 500px; } #wrapper > div { float: left; height: 100%; } /* alternately, #col1, #col2 - the '>' child selector sometimes acts up in ie6 */ .clear { clear: both; } </style> Just something done on the fly there, but it may be a decent starting point.
Firehed, your a god! Thanks alot that worked perfectly, what does that clear div do? Also does anyone know where i can find some free graphics online? I would really like the edges of the white box to be curved.
Glad to help out The clear div fixes a bug in which an empty div always seems to have a height of zero even if you specify a certain height in the CSS. When you float an element within another (as those child divs are), they don't really contribute to the height of their parent. If that makes sense... floats are weird that way. Anyways, the clear div sticks an empty element that is forced to sit underneath those by the clear property, which corrects that. However, be sure to check that one cross-browser. It should work so long as you set a specific height in the parent div, but it gets really weird when you get into overflowing text (which is how a traditional two-column table would work. Now keep in mind that for all intents and purposes, you could just set Code: #wrapper {background-color:#whatever;} and not worry about the height. This kind of thing only becomes an issue if you want different background colors on the two columns. In which case the easiest reliable way is to just set a 1x(width)px image as the background image on #wrapper. If this kind of thing doesn't work out, play around with these search results (yes, I always search on my own web programming-weighted google custom search) There are some rounded corner image generators around somewhere... http://www.roundedcornr.com/ for one.
Thanks for that link mate, would i just wrap this code around all of my div's to get it to work? Here's what it generated: Code: <div class="roundedcornr_box_711117"> <div class="roundedcornr_top_711117"><div></div></div> <div class="roundedcornr_content_711117"> </div> <div class="roundedcornr_bottom_711117"><div></div></div> </div>
EDIT: I hate firefox! It displays everything completly different to Safari, how can i make them display the same? Safari comes out how i want the site to look.
Good thing you haven't tested in IE then Honestly, all of the weird hacks to get rounded corners to work properly are really just that - hacks. There's a CSS3 spec for rounded corners, the border-radius property. You can set it in Firefox and Safari using -moz-border-radius and -webkit-border-radius respectively, but of course then there's zero IE support and even the two of them could vary slightly from version to version. It will certainly fall back better than any other approach, though. The back-end for a project I'm working on duplicates the look, feel, and general interaction of application preferences in OS X, and the styling to get it working properly is frankly stupid (and to complicate matters, it's using jQuery tabs which needs its own functional styling thrown in the mix). http://www.w3.org/TR/css3-background/#the-border-radius http://www.css3.info/preview/rounded-border/ If you're okay with IE users not getting any of that, then by all means use it - again, it's by far the easiest thing to get working, and has a cleaner fall-back than anything else. If not, there are several other rounded corner generators out there (I've seen better, I just don't feel like doing a ton of searching) that you may want to look into.
