CSS layout

Ephracis · 04-01-2006, 03:46 PM

Hm.. I know this is not really a Linux-related question, and I am not sure if it even fits in programming but here goes anyway... Just because I like LQ.

I am trying to learn how to go from using tables to using css and divs with xhtml. So for my new website I wanted to start with making a three column layout, where I use two margins to the left and right with a dynamical width, and a main box in the middle with a fixed width.

I have tried googling after tutorials and guides but none of them tells me how to do this. All I get is how to put stuff to the right or left with float and stuff like that. Shouldn't this be a very basic, simple thing to accomplish?

I have created a site with the following html:
<div class="marg">left</div>
<div class="main">main</div>
<div class="marg">right</div>

But I can't figure out what to write in the css-file to get my desired result. Of course what I want to get is a site with a fixed width, using margins on both sides, a fairly common layout, although it seems to be impossible to find a tutorial that uses this layout.

The best result I got was when I used "float: left" with all divs and then used "width: 800px" just for main. The problem is that the two margins on the sides is not 'filling' all width.

Can someone please tell me what I am missing, cause I am starting to wonder what all this talk about divs+css is about? How can this be better then tables when a simple thing like this seems so hard? I hope I am the problem here.

xhi · 04-01-2006, 04:57 PM

this looks like a real good example

also, when i asked, google told me this

Ephracis · 04-01-2006, 05:11 PM

I've already read a number of those but they all just confuse me even more. I am not sure if I am on the right track but here's my current code:

index.htm

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>This Band's Site</title>
<link rel="stylesheet" type="text/css" href="sys/layout.css" />
</head>

<body>

<div class="margleft">left</div>
<div class="main">main</div>
<div class="margright">right</div>

</body>
</html>

sys/layout.css

Code:

div.margleft {
        border: 1px solid #777;
        left: 10px;
        position: absolute;
}
div.margright {
        border: 1px solid #777;
        right: 10px;
        position: absolute;
}
div.main {
        border: 1px solid #000;
        width: 800px;
        position: absolute;
}

And this is what it looks like:
http://217.31.180.216/band/

As you all can see, this is wrong and bad. But why? I just don't get it. This is just too complex for me.. Tables are easy to learn and understand. The movement from tables to divs seems more and more unnecessary.

xhi · 04-01-2006, 05:40 PM

>The movement from tables to divs seems more and more unnecessary.

well yeh at first. CSS can be frustrating to get going with, but once its up and rolling you will be far happier and you will be writing far less code than before CSS.. i prefer a two column layout just because i found it easier to do.. however if i were to use a three column i suppose i would try somthing like this.. (changes to your files)

Code:

#margleft {
        position: absolute;
        border: 1px solid #777;
        left: 10px;
        width:100;
}
#margright {
        position: absolute;
        border: 1px solid #777;
        right: 10px;
}

#center{
        position:absolute;
        border: 1px solid #000;
        width:75%;
        left:120;
}

Code:

<html>
  <link rel="stylesheet" type="text/css" href="a.css" />
  <body>    
    <div id="margleft">
       left
    </div>    
    <div id="center">
      center
    </div>    
    <div id="margright">
       sdfds
    </div>
</body>
</html>

that one example i posted, bigbaer.com. looks pretty good i would suggest looking at it closer.

Ephracis · 04-02-2006, 06:43 AM

Yeah, I hope it is like with other stuff: the harder to learn the better and more effective it will be.

But I still have a big problem. I tried your example code and there is two things with it.. First you define a width for the margleft, but what I want is to make both margs using dynamical width, filling each side of the fixed width center, making the center appear in the middle of the page.

The same goes for the site you linked to. They do what most other sites do: they use fixed size for the left and right columns and let the center fill the rest. I want to do the opposite. I want a box at the center of the page with a fixed width.

Another thing is that, as you see on my page, is that the center box shouldn't use absolute position since that always places it on top of the left margin. The best would be if I didn't have to use the left and right margins and could just use one center box, that would be of a fixed width and aligned to the center of the whole page.

Hope I am making myself clear enough, here.. Cause this is really giving me a headache and I just want to get on with it so I can start creating the website. I feel kinda stuck here.

EDIT:

Here is a site I think is somewhat on the right track: http://www.pixy.cz/blogg/clanky/css-3col-layout/
This site uses a fixed size for both margins and then let the center fill the space between the two. If I could only switch this, to make the margins dynamical and the center fixed instead.

EDIT2:

Maybe I should just use frames and make them cols=*,x,* instead? It seems much easier, even if I don't like frames that much. Cause this is taking just too long. Isn't there any way I can just make a fixed size box and put it in the middle of the page?

Jaqui · 04-02-2006, 02:42 PM

What I have done is work off the CSS from Stu Nichol's CSS PLAY site, he does allow that and has multiple layout options on it.

The only issue whith his css is that most of it is IE unfriendly, since IE doesn't recognise standards compliant css correctly.

He does have a couple of options in layouts that fit what you are looking for in there somewhere.

I'm personally using one of his "fixed" layouts on my own site.

Ephracis · 04-03-2006, 06:59 AM

Thank you! I had to copy the whole source and then delete parts of it step by step but I ended up with just the a simple fixed size box placed in the middle of the page. Thank you so much for the link.

Jaqui · 04-03-2006, 02:14 PM

No problem.

I figured you would find a layout that fit your needs there.