mrdee 1 Report post Posted June 16, 2011 (edited) Hello,If you look at my news page on http://forums.xisto.com/no_longer_exists/ you will se that it is divided in 2 columns.The left one where the menu resides, and then the right one where I put all the articles ina separate box.As things are now, I have achieved this with two tables, but I would like to achieve the same layout using CSS3 rather than tables.Can someone show me how that is to be done, and also, if I am using CSS3, will all browsers see the page correctly?Or is there an alternative in an earlier CSS version to achieve the same layout?Still trying to get the grasp of the ins and outs of CSS3 ( and earlier).Thank you in advance for any advice. Edited June 16, 2011 by mrdee (see edit history) Share this post Link to post Share on other sites
darko100 1 Report post Posted June 17, 2011 (edited) Tables are not flexible at all. Here is a simple layout with 2 sides , using HTML5 and CSS3 (the newest technologies). <!DOCTYPE html><html><head><title>mrdee</title><style type="text/css">body{margin:0;background:#fff;}#container{width:810px;margin:100px auto 0;}aside{width:300px;min-height:500px;background:#eee;border:2px dashed #ddd;border-radius:5px;float:left;padding:5px;}#therest{float:right;width:460px;min-height:500px;background:#eee;border:2px dashed #ddd;border-radius:5px;margin-left:20px;padding:5px;}</style></head><body><div id="container"><aside>Here is my sidebar</aside><div id="therest">My content</div></div></body></html> Edited April 23, 2012 by moderator (see edit history) Share this post Link to post Share on other sites
mrdee 1 Report post Posted June 17, 2011 Darko100,YOU ARE A STAR!!!!Thank you so much for this, it works great and I think my layout looks better than before.I also like hat grey-blueish colour yo picked for the background and the slightly rounded corners.Of course I had to tweak the measures a little bit to make it take up the whole width of the page, but that was a good bit of practice.The only thing I am not sure about yet (all parameters in style sheets are not clear to me yet) is how I can decrease the gap between the sections a little bit, I fiddled a bit with the margin settings, but that did not make a lot of difference.I also like how you set a "relative" height, so that the frame etends as content is added.The content is not uploaded yet (I tested it in my browser through my HTML Editor) as I have to adjust all my pages first, but you can go and have a look at http://www.vlaanderen-flanders.org.uk/ and, if you wish, add a bit of feedback when it is done (should be later on tonight, I estimate in about 1 hout from now).Nevertheless, I think it is a great improvement and I am really grateful.At the risk of becoming a pain in the proverbial: could you also explain to me in what respect this system is more flexible than tables, ie. what the advantage of this system over tables are?Thank you again for your expert advice. Share this post Link to post Share on other sites
Baniboy 3 Report post Posted June 17, 2011 1. Can someone show me how that is to be done, and also, if I am using CSS3, will all browsers see the page correctly?2. Or is there an alternative in an earlier CSS version to achieve the same layout? 1. No, CSS3 isn't supported very well. And some browsers have come up with an idiotic idea of using specific properties for their browser only, like Firefox's own border radius property (moz-border-radius). It has been a while since I checked that so it might have changed now.2. Yes. And I already showed you in another thread you made. If you don't want to read that, google for "2-column layout with CSS".The HTML5 darko posted was more of a semantic web thing with the <aside> tag. If you want to use that, you'll have to change all of your HTML files to say that the code is HTML5. And darko, min-height and max-height properties don't work with IE. Yeah that sucks. One stupid browser has to come and ruin everything.CSS3 is more of a visual than structural update. At least from what I have seen. Rounded corners, gradients, text shadows and other stuff like that. I don't think CSS3 helps with column design. Anyway, all you have to do to get 2 columns side by side is to have the sidebar first in the HTML code, then apply float: left; ... Or right, if you want to have it on the right.On another note, mrdee. Your background music scared the crap out of me when I visited your site It took some time to load and I had the volume pretty high. Share this post Link to post Share on other sites
mrdee 1 Report post Posted June 17, 2011 (edited) There you go,in the mean time, the whole Dutch section has been uploaded with the "facelift".In the English section, the new News page has been uploaded so far, you can find this at http://forums.xisto.com/no_longer_exists/ think it looks quite cute.Thank you, Darko100.baniboy, I did read your tutorial again, and, I will work through the best possible solution, dont think I am not grateful for all the help everyone keeps givig me.I have tested the site in both Firefox and IE9 and they both seem to work, although, surprisingly, in IE9, my coloured scrollbars do no seem to work, although the CSS code is still thee, and I did change the DOCYPE to HTML5 for every file, at least i remembered that. Edited June 17, 2011 by mrdee (see edit history) Share this post Link to post Share on other sites
darko100 1 Report post Posted June 17, 2011 There you go, Â in the mean time, the whole Dutch section has been uploaded with the "facelift". Â In the English section, the new News page has been uploaded so far, you can find this at http://forums.xisto.com/no_longer_exists/ Â I think it looks quite cute. Â Thank you, Darko100. Â baniboy, I did read your tutorial again, and, I will work through the best possible solution, dont think I am not grateful for all the help everyone keeps givig me. Â I have tested the site in both Firefox and IE9 and they both seem to work, although, surprisingly, in IE9, my coloured scrollbars do no seem to work, although the CSS code is still thee, and I did change the DOCYPE to HTML5 for every file, at least i remembered that. Â No problem , glad you did it. BTW , you could also use percents to define width. For example , aside width: 30% , content width:70%; Â It looks nice. But the table borders look a little oldish , i can design something cooler for you for free. The use of tables is totally not needed in your case , just makes the markup a mess. You can use <article> tags to post each article , and add a solid border on bottom for every post. Share this post Link to post Share on other sites
Baniboy 3 Report post Posted June 18, 2011 Umm.. I'm viewing this on opera, so not sure if this is what you see, but the text on your content section comes in contact with the borders. You might want to add a padding of 10/15px to have some space there. Darko had some good ideas, too. You can use all of the HTML5 tags now, if you want to. Although I wouldn't go with the percentage thing. I would give the navigation an absolute size (say, 300px). The other div that contains your content will automatically fill in all available space. Because you might not want your navigation to expand more than necessary,And don't read that tutorial on my site, it's horrible. I have nested divs and stuff but the nested elements aren't padded so that you could see the structure, which makes it confusing. Read another one on the web instead. The only important thing that you have to remember when using the CSS float property is that when you float things, and then add something, like a footer beneath them, it won't work well. For this, you have to add clear: both; for the footer, which means it comes AFTER all floating elements. Share this post Link to post Share on other sites
mrdee 1 Report post Posted June 18, 2011 Thank you both for all the interesting help.Yes, I wanted to have a bit of a margin between the text and the edge of the box in my content window, but was not sure how to set that.And, Darko100, feel free to help me with a cooler border, I can do with all the help I can get, and I really appreciate all the support I am getting.One other thing I noticed was: both windows are a bit far away from the page title, although there are no extra </br> tags, is there any way I can get my windows a little bit higher up so I do not have that whole empty space between the title and my content?That would be a great improvement too (IMHO anyway).So, Baniboy, it looks like it sort of works in Opera too? I'll have a look too in a minute, I believe i have a copy of Opera on my laptop, so I will be checking it out.Once again, thanks for all the interesting tutorials. Share this post Link to post Share on other sites
mrdee 1 Report post Posted June 18, 2011 (edited) This is how I have adjusted the CSS code for now: <style type="text/css">body{margin:0;background:#fff;}#container{width:1250px;margin:100px auto 0;}aside{width:300px;min-height:500px;background:#eee;border:2px dashed #ddd;border-radius:5px;float:left;padding:5px;}#therest{float:right;width:900px;min-height:500px;background:#eee;border:2px dashed #ddd;border-radius:5px;margin-left:20px;padding:5px;}</style> I have tried adjusting the padding in #therest, but that does not create any space between the window edge and the tex, all it does is push my content window downwards, so it starts about half a page underneath the left one.By the way, I just noticed: should "aside" not be preceded by a # sign? Edited June 18, 2011 by mrdee (see edit history) Share this post Link to post Share on other sites
Baniboy 3 Report post Posted June 18, 2011 Oh yeah, that sometimes happens. What you have to do is create a new <div> container inside the "therest". Then you add padding to that. Before doing that, remove all padding from therest.The HTML5 aside tag is in itself a box element. Like a div tag, but with a more semantic meaning so that when computers are searching for relevant information, they can tell where the main content is, where the navigation is, etc making the search easier. So no, you don't need to have a # next to aside in CSS, it itself points to the <aside> HTML tag within the code.I found an error while scrolling your website down, it's where the article "02/05/2011Not worth mentioning in the national press, of course." is. There is some kind of spooky error with that in opera. I then visited your site with firefox 3.6 and that was even more weird. The two columns had piled up on each other instead of being next to each other. I don't know if you're doing maintenance at moment or something. I can't show you a screenshot, because the forum returns an error while I try to attach a file. Share this post Link to post Share on other sites
mrdee 1 Report post Posted June 18, 2011 (edited) Thank you for mentioning this,Baniboy.I had a look and noticed that a closing table tag had gone missing in the HTML code.I have corrected this and now it looks normal to me.About the padding, do you mean like this: #therest{float:right;width:900px;min-height:500px;background:#eee;border:2px dashed #ddd;border-radius:5px;margin-left:20px;<div>padding:20px;</div>}as that does not seem to make any difference.However, on second thoughts, I think you were referring to a new div within the code of my content box itself, something like:<article><div>Blablablablablablab</div</article>But where do I put the padding then?Sorry my questions are probably incredibly stupid, but that's ignorance for you. Edited June 18, 2011 by mrdee (see edit history) Share this post Link to post Share on other sites
Baniboy 3 Report post Posted June 18, 2011 I didn't quite understand what you added to the end of your code. I mean this: <div>padding:20px;</div>} That looks like HTML code within CSS. The browser will probably throw an error there.Yes, I meant that you should create a new div element inside the content. Then you add padding to that new div element.<div id="therest"><div id="paddingstuff">My Content</div></div> In the code above I have used paddingstuff as the div id. Then you add CSS to your CSS file/section.#paddingstuff {padding: 20px;} Share this post Link to post Share on other sites
mrdee 1 Report post Posted June 18, 2011 Yes, that seems to be doing the trick.However, in Firefox, some letters look a bit 'squashed' sometimes, but it does look much better with a bit of a margin on the left.Thank you. Share this post Link to post Share on other sites
Baniboy 3 Report post Posted June 18, 2011 The firefox problem still remains.Here's a screenshot http://forums.xisto.com/no_longer_exists/404.png removing float: right; from the "therest" div. It's not necessary, the div will automatically adjust to the right when the sidebar is floated to the left. It will also take up all available width unless you give it a value. Share this post Link to post Share on other sites
mrdee 1 Report post Posted June 18, 2011 (edited) Everything looks perfectly normal here in Firefox, IE and Opera.Go and have a look now and see if there is any change.You might have caught me during an upgrade or maintenance or something. Edited June 19, 2011 by mrdee (see edit history) Share this post Link to post Share on other sites
