Hello! I wonder if someone can help me building a CSS-layout that look like this: http://img176.imageshack.us/img176/6509/layoutyv.jpg (please note that I want the boxes centered). I have tried for hours now but there always something that don't work (like some part of the layout don't work in IE, some of the CSS-boxes don't appear and so on). Earlier I have built all my websites with tables. I would be really, really, really grateful if someone could give me some help! /Cratylus
Hello, I do not know if I can be much help I am still Learning, I just got out of table layouts myself... But. I kinda have a CSS layout like that for my site. But its a Banner, Menu, (Content - Main, summary) and footer. and I have the coding like this. This is my Site - http://photographs-of-nature.webs.com/ body {background-color: #372b74; font-family: arial, verdana; margin: 10px; padding: 0;} p { font-family: arial, verdana; font-size: 14px; font-weight: bold;} h1 { color: white; font-family: arial, verdana; font-size: 20px; font-weight :bold;} #page {background-color: white; border: solid 3px #000; margin: 0 auto; padding: 2px; width: 900px} #banner {background-color: #ffffff; border: solid 1px #ffffff;} #links background-color: #372b74 height:38px; text-align:center; border: solid 1px #ffffff;} #content {border: solid 0px #000; float:left; background-color: #0064b1; text-align:center;} #main {float:left; display:inline; background-color: black; margin: 0 0 0 0px; padding: 10px; width:680px; min-height:300px; } #summary {color: black; padding: 10px; float:left; display:inline; width: 180px; height: 1%; } #footer {clear:both; width:890px; background-color: #57a5db; padding: 5px; font-size: 12px; text-align:center; border: solid 1px #ffffff; } I figure, You would need to put in another Summary, so you have x2 summarys and the Main, inside the Content. hope this helps thanks
Thanks moodey-aimee! I got one problem though: http://img339.imageshack.us/img339/46/layout2t.jpg If I put "too much" text in box 3 it will get a higher height than the two other boxes. Is there anyway to make so box 1 and 2 always get the same height as box 3?
hai Cratylus, you can try this tutorial _http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks Hope you can help your problem
Put div 1 2 and 3 in one container div Set div 1 2 and 3 height in CSS to 100% So whenever div 3 increase in height, it would cause the container to expand too. Since div 1 and 2 are set to 100% height, both div would expand to fill the remaining spaces on container div. Hope that helps.
Thanks for replying guys, its appreciated! How do I change the width of the columns? I don't get it. I don't get it to work, I get the same problem as before. I really don't understand why all people says that CSS divs are so much better and easier to maintain than the good old tables. With CSS divs you need like 10 times more code and if you change just a little thing (width or something...) the whole layout gets f*****d up. Is there any free software that simplify layout building with CSS divs?
All I can say, is keep practising and keep it simple for now, Trust me, I was a table html person too, I'm still new too all this Css, and I too find it hard to understand, when i started i didn't have a clue what I was doing, I didn't understand the div tags, or anything. have you try this site, - http://www.w3schools.com/css/default.asp it's quite useful, to play around on. with the samples. but yer, put the 3 boxs, the main, and side menus, in one Container Div tag. so you got like this in you html page: <div id="container"> <div id="banner"> your header or a banner for the site </div> <div id="links"> Menu for your links goes here </div> <div id="content"> Your main content, gets typed here </div> <div id="sidebar1"> Side menu 1 </div> <div id="sidebar2"> Side menu 2 </div> <div id="footer"> Bottem of the page, for copyright and that <div> </div> this div tag is to close the container right up the top.. Hope this helps. Again i'm still learning