Cojawfee Posted June 1, 2006 Share Posted June 1, 2006 (edited) I'm getting really pissed off by the lack of control for height of elements in CSS. I am working on a redesign for my site, but like always, the little things get me. Here is the example. The problem is that parent elements don't expand to contain the child elements. The body is basically a bunch of offwhite with left and right borders. I have some divs to contain content. The problem is that when I put the text in the divs, their height is ignored and the body won't stretch to fit them. If I put the text straight into the body, it works fine. I would just do this, but I need the divs to create two columns. Can anybody think of a solution? If you need something explained better, just ask. I can't explain to save my life. Edited June 1, 2006 by Cojawfee Link to comment Share on other sites More sharing options...
Dr Doidberg Posted June 1, 2006 Share Posted June 1, 2006 Use tables. Link to comment Share on other sites More sharing options...
Cojawfee Posted June 1, 2006 Author Share Posted June 1, 2006 (edited) Tables are not for layout. Any decent web developer knows that. Edited June 1, 2006 by Cojawfee Link to comment Share on other sites More sharing options...
TheRoper Posted June 1, 2006 Share Posted June 1, 2006 You shouldn't treat the body as a div (i.e. applying height to it). Instead create a separate div (#container?) and apply those styles to it. Also, in your CSS file, those styles should be applied AFTER the styles that are applied to the divs contained within, since the height attribute cannot be inherited. Or something, I dunno, it's been a while, and I just woke up But certainly don't use tables, lol. $$$ MAKE MONEY WITH NEOBUX $$H Link to comment Share on other sites More sharing options...
facugaich Posted June 1, 2006 Share Posted June 1, 2006 First of all, you've got an error in your HTML. Look at the last "</div>", it doesn't have the matching opening tag. I think you got confused by the "top" div, which is closed on the same line. Also, as TheRoper said, use a "container" div instead of the body. You will need to redesign your layout and CSS, though. Link to comment Share on other sites More sharing options...
Dr Doidberg Posted June 2, 2006 Share Posted June 2, 2006 Tables are not for layout. Any decent web developer knows that. My websites I had used tables, they were databases though. I made beautiful websites with just tables, before css2 came out. Once that web archive thing gets back up ill post a link. There are times to use tables, and theres times to use css and times to use both. Your site can be done in tables just as simple, with no hassle at all, you seem to have some problems with it, something tables won't give you for something simple. Link to comment Share on other sites More sharing options...
TheRoper Posted June 2, 2006 Share Posted June 2, 2006 (edited) ^Tables are designed to be used for tabular data, thus the name. So yeah, for databases/spreadsheets/a-few-other-applications, they're fine (and they do infact work for layout). But they are not supposed to be used for layout. That's where DIVs (divisions) come in. edit: Spelling fix. Edited June 2, 2006 by TheRoper $$$ MAKE MONEY WITH NEOBUX $$H Link to comment Share on other sites More sharing options...
Luke Posted June 2, 2006 Share Posted June 2, 2006 My websites I had used tables, they were databases though. I made beautiful websites with just tables, before css2 came out. Once that web archive thing gets back up ill post a link. There are times to use tables, and theres times to use css and times to use both. Your site can be done in tables just as simple, with no hassle at all, you seem to have some problems with it, something tables won't give you for something simple. You're totally missing the point, tables are for tabular data. CSS, divs etc are the way to go about layout these days, they may be more fiddly but they also offer more control, more efficiency and with a little effort they'll do whatever you need. I haven't made a site using tables for layout for months now, and I have no intention of doing so. I'm not saying you can't make a very pretty site using tables, GTAForums uses tables for its layout - take a look at the code by the way, it's horrible to work with - but it's not the way you should go about doing it when there are tools that are designed for the job. There are indeed times to use tables - when you have tabular data. adam broke it. Link to comment Share on other sites More sharing options...
BenMillard Posted June 2, 2006 Share Posted June 2, 2006 (edited) You can style <body> and it's fine to do so. The <body> (should) always fill the viewport, though. Getting the illusion of equal height columns is possible using CSS, as long as you are smart about what you do. The Faux Columns technique works well for fixed-width designs but they obviously don't adapt to the increasing variety of screen sizes being used to browse the web. The Liquid Faux Columns technique works on fluid layouts (percentage width) and elastic layouts (either em width or percentage width with max-width). There's also the Sliding Faux Columns method. If your full height backgrounds can just be a solid colour and won't have borders, you can simple use background colours. Set a background for the main column and then set the other column's background on an something which contains both columns, such as <body>. I've done this on Calthorpe Park School and it works alright, but you can have problems if the main column is shorter than the other column(s). (Off-topic) The markup for the Conventional skins is a little better but the styling is more plain. If the staff would like to clean up the original skins while keeping the same visuals, I'd like to help out. Edited June 11, 2006 by Cerbera Link to comment Share on other sites More sharing options...
Cojawfee Posted June 3, 2006 Author Share Posted June 3, 2006 (edited) Thatnks Cerbera, I'll look into those. Edited June 3, 2006 by Cojawfee Link to comment Share on other sites More sharing options...
Snow Racer Posted June 7, 2006 Share Posted June 7, 2006 you can set a background image like BG image and css code html>body { background: #484E5D url('coja_bg.jpg') repeat-y fixed center top; } Link to comment Share on other sites More sharing options...
Cojawfee Posted June 10, 2006 Author Share Posted June 10, 2006 That's not exactly liquid. Link to comment Share on other sites More sharing options...
BenMillard Posted June 11, 2006 Share Posted June 11, 2006 IE doesn't understand the > selector, either. body {background: #484E5D url(coja_bg.jpg) repeat-y center top;} This would do the same thing. No need to fix it to the viewport since it is repeated down the page. Fixing background images can make some mainstream browsers get very laggy when scrolling. One of the Faux Columns methods would probably work best for what you need. 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