Honesty Rocks! truth rules.

More Css3 Making columns

HOME      >>       Websites and Web Designing

mrdee

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.


darko100

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>


mrdee

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.


Baniboy

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 :lol: It took some time to load and I had the volume pretty high. :D

mrdee

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.


darko100

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.


Baniboy

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.


mrdee

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.


mrdee

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?

Baniboy

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.


mrdee

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.

Baniboy

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;}


mrdee

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.


Baniboy

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.


mrdee

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.


Baniboy

It looks right now when I use Firefox 4 to view it so it may be that earlier firefoxes somehow mess it up. Remember to try your site out in a webkit browser when you test browser compatibility as well. Google Chrome, for example. I'd also recommend making the text background lighter gray or completely white.


mrdee

I have downloaded and installed the latest version of Google Chrome, and here too, the site seems to display flawlessly.So, I can consider now (or at least, so I hope) step number 2 (maybe the final step): adding some cosmetic tweaks.I am very grateful to everyone who put me on my way, and if you feel you hav missed out something, please do not hesitate to keep the advice coming.Thank you again.


darko100

It looks very cool :) You can just change the font to Arial instead of the standard one (actually not defined).And , you asked why there is no sign # in aside. That's because we want CSS to find the tag without id or class , but using its name. So to style all DIVs or EMBEDs you need to use div{style here...} or embed{style here...}You can also set ID like <div id="mydivid" and style it with #mydivid{style here...} :) But that means only one element can use the ID (because it is identifier). While you can use class to group more elements , like <input type="text"> <input type="button"> :) Also you should check URL anchors. Let's say you have a big scrolling webpage , and you can add a empty div on the end with ID "end". That way you can make a link <a href="#end">Click here</a> which will go to the place where empty div is (the bottom).Hope i helped you.After you finish learning HTML/CSS you can start using JavaScript and experiment with document's DOM using frameworks as jQuery.


Baniboy

It's a good thing you mentioned typography, darko. Now I have an opportunity to shamelessly self-advertise. :D I have written an article about typography on websites. Well this is much better than mine are usually, so that's why I'll recommend it: Website Typography Tips. Look for the "Font" and "Manipulate" section in the article. The default that is used in browsers when no font is declared is usually the Times New Roman font, which is hard to read because it has all those little things coming out of the letters. That combined with a computer screen, and it won't be very reader-friendly. Arial, Helvetica and Tahoma would be all good for your site. Personally I would go with

html {font-family: Tahoma, Arial, Helvetica;}

The browser uses the first one in the list, if it's not installed, then it moves on to try the next one and so on. That was probably useless though, if you know how the font-family property works.

mrdee

That was probably useless though, if you know how the font-family property works.

Well, no, Baniboy, I wouldnt say that.It is good that the people sending help my way are giving their explanations in some detail.

It either shows me things I didn't know, or sometimes, it is a good refresher too.

It also sometimes reminds me about things I used to know but that got pushed to the back of my mind over time.

But, yes, some valuable things that I have read about typography, at least I am learning every step of the way.

Thanks again.