CSS Help: Fixed Width 2 Column & Rounded Edges CSS design problem

Vyoma · June 9, 2006

As I have stated elsewhere in the forum, I am venturing on designing my blog again from the scratch. At present, it uses a lot of tables to achieve a rounded look, that I want to avoid and use pure CSS.

Like any other design procedure, I began by going for a rough mock up of the blog. The colours at present did not actually matter, as I was only concerned with the layout. I wanted a fixed width two colum layout, where all of them had rounded corners. Here is a mock-up of what I want:

Posted Image

Another thing I forgot to mention in the above image is both the content box and side-bar box are fixed width. Only the height of these two boxes need to be variable.

In case of achieving the rounded corners alone for a fixed width box, all I need to do is incorporate a top image and a bottom image with proper colours. For example a blue rounded box on white background would need to have the following at the top:

Posted Image

and the following at the bottom:

Posted Image

That is how much I came to realize with respect to rounded corners for fixed width columns.

As far as having a two-column fixed width structure, I think the following code should do:

The CSS code as:

<style>body {  text-align: center;  background-color: #000;  }#container {  margin: 0 auto;  width: 700px;  background-color: #fff;  } #content {  width: 480px;  float: left;  margin-right: -160px;  padding: 10px;}#sidebar {  margin: 0;  margin-top: 10px;  width: 160px;  float: right;  padding: 10px;}</style>

The HTML code would be:

<body>  <div id="container">  <div id="content">  .....All of the content goes here.....    </div> <!-- /content -->  <div id="sidebar">  ... side bar content here....  </div> <!-- /sidebar -->  </div> <!-- /container --></body>

Thats about it how much I have figured out. Now, say, I have the background images of the corners, how should I be putting it in the CSS? I am able to place only one (either the top or the bottom) for a particular column. How do I put both the top and bottom images to a column - say sidebar for this example. I know there is some concept out there about wrappers, but I do not know exactly how do I go about it.

So, could anyone please help me out here?

pyost · June 9, 2006

There is a simple way of solving this problem. Create 3 new CSS elements and set their width to the sidebar width. Also, two of them should have a fixed height, too. Here's why - this way you can make the sidebar out of 3 parts, where the first and the last would be on the top/bottom and have the rounded image as their background. As for the middle one, it would be for content. The same should do for the main column. However, I warn you, I'm not that good at CSS and there is a big chance that this won't work or will not work in (stupid) Internet Explorer.

Vyoma · June 14, 2006

There is a simple way of solving this problem. Create 3 new CSS elements and set their width to the sidebar width. Also, two of them should have a fixed height, too. Here's why - this way you can make the sidebar out of 3 parts, where the first and the last would be on the top/bottom and have the rounded image as their background. As for the middle one, it would be for content. The same should do for the main column. However, I warn you, I'm not that good at CSS and there is a big chance that this won't work or will not work in (stupid) Internet Explorer.

I tried that, but do we not need to hook it up with some HTML tag? I am not that good (I am not any good, actually) with CSS, so could some one explain it to me?

Vyoma · June 14, 2006

OK. I know I am making a double post here, but I conveyed it to a moderator and he said it was fine. Well, I am too eager to explain how I got it working!

Here goes the CSS. You may see that I have put most of it what was earlier:

<style>body {  text-align: center;  background-color: #000;  }#container {  margin: 0 auto;  width: 700px;  background-color: #fff;  background-image: url('container_bottom.gif');  background-position: bottom;  background-repeat: no-repeat;  } #containertop {  background-image: url('container_top.gif');  background-position: bottom;  background-repeat: no-repeat;  }#content {  width: 480px;  float: left;  margin-right: -160px;  padding: 10px;}#sidebar {  margin: 0;  margin-top: 10px;  width: 160px;  float: right;  padding: 10px;  background-image: url('sidebar_bottom.gif');  background-position: bottom;  background-repeat: no-repeat;}#sidebartop {  background-image: url('sidebar_top.gif');  background-position: bottom;  background-repeat: no-repeat;  }</style>

And in the HTML:

<body>  <div id="container">  <div id="containertop"></div>  <div id="content">  .....All of the content goes here.....    </div> <!-- /content -->  <div id="sidebar">  <div id="sidebartop"></div>  ... side bar content here....  </div> <!-- /sidebar -->  </div> <!-- /container --></body>

For before and after images of the use of this design, check out this permenant link, at my blog.

As you can see, I have not put the rounded edge for the content part and have only put it for the full container and the sidebar. But the same technique, I suppose can be used to put rounded corner for the content column too.

That was about all I did, to get the things done. (Note that the above code may require a bit of twiddling with the padding and margins depending on the image widths). The solution involved no hooking the background pictures to any other tags or something like that. I do not know the ramifications of this yet, as I have not tested it in other browsers than a particular version of IE. I do not even know why I used a ID instead of a class. As I said earlier, I am not that well versed in CSS, but this seems to work.
Edited June 14, 2006 by Vyoma (see edit history)

vizskywalker · June 15, 2006

If javascript isn't beyond you, look at Nift Corners. It is a method of using pure CSS and Javascript to create rounded corners without images which decreases download time. Most curved corner images are at least a couple kilobytes. So if on your website you have 14 boxes with rounded corners, even if each corner image is only 1 kilobyte, you've just increased a visitor with a 56K modem, which most people on the internet still have, by a full second. If you use a dull top, bottom or side image to cover two corners at once, then the smallest size wil probably be around 3 kilobytes, so although you have half as many images, you wind up with a 1.5 second page load increase. With javascript and css and caching, you can have a less than one second increase one time only.

~Viz

Vyoma · June 15, 2006

I am afraid I wont be able to use Javascript, as I am using a free host to host my blog. For the images I use Imageshack to hotlink.Another thing is, for now, I have not yet known CSS enough to use CSS+Javascript.But tell me, I am better off than using tables now, am I not?

szupie · June 15, 2006

Wow, your layout is completely broken in Firefox. None of the top corner images are showing up, and the #container div has shrunk up to the top of the page. There are only 3 changes you need to make to your page to fix it:

First, let's take care of the ugliest problem: The shriveled up #container. Since both the #content and #sidebar are floating, they don't take up any space inside the container. The container doesn't know what the actual height of those 2 divs, so you need to create a clearer div. A clearer div is located right after those 2 divs and before the container. It can tell where those 2 divs end, and it pushes the bottom of the container down.

So, what you need to do is to add <div id="clearer"> </div> right after </div>  (Yes, include the ).

Then, in the CSS codes, add the following code so that #clearer is pushed down by its preceding elements.

#clearer {  margin: 0;  padding: 0;  height: 0;  clear: both;}

The most important rule there is clear: both;. It's the line that makes the whole thing work. The first 3 lines are just for aesthetic reasons -- i.e., to make it take up as little space as possible.

OK, now the white background is fixed, but the topcorners are still messed up! This is actually an easy thing to fix. The problem is that your #containertop and #sidebartitle divs are too small, therefore we don't get to see the background picture. All you have to do is add some padding to it, and it'll show up!

In the CSS code for both your #containertop and #sidebartitle, add this line:

padding: 10px 0 0 0;

I count that as 2 changes.

I've tested it out in Firefox, and it looks just like it does in Internet Explorer. It also works on Opera.

Vyoma · June 15, 2006

szupie, thanks for pointing that out.

And thanks a lot for giving a solution.

When I gave my blog for review to some of my friends, they said it was a total havoc in Firefox. I was working like a frenzied rat trying to figure it out.

One major disadvantage I had was that I could not get the Firefox downloaded and installed at the moment.

Anyway, I have done the 'two' changes you have indicated, and uploaded the template to my blog.

Could you please check it up again in Firefox and could you please let me know if it is doing fine now?

URL: http://www.blogcharm.com/splat/

szupie · June 15, 2006

Yeah, it now looks perfect in all three of the browsers I've mentioned before. I will also check to see if it's ok on Mac later, when I have time.Edit: It also works on Safari and Firefox Mac. However, I couldn't find where to download IE:Mac, so I couldn't tested that out.

Edited June 16, 2006 by szupie (see edit history)

Vyoma · June 16, 2006

So, now it works on IE, Opera, Firefox and on Mac. Good. Because here is my Browser Split up got from Visitor Analysis:

Posted Image

55% Firefox

35% MS Internet Explorer 6.0

5% Mozilla

2% MS Internet Explorer 7.0

1% Netscape 7.1

1% Opera

1% MS Internet Explorer 5.5

Now you may really understand why I freaked out when they said it did not work with Firefox. Thanks for the help, szupie.

Sign In

CSS Help: Fixed Width 2 Column & Rounded Edges CSS design problem

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information