CSS Margin property - just don't get it...

S

Soulcatcher

New member
Ok, i tried to do very simple 3-column website design using only divs and css. Here is the code:

--------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>The Beer House</title>
<style type="text/css" media="screen">
#header {background-color:red; min-height:50px; _height:50px;}
#footer {background-color:yellow; min-height:50px; _height:50px;}

#outer {background-color:green;}
#inner {background-color:blue;margin-right:200px;}

#left{background-color:blue; width:200px; float:left;}
#right{background-color:green; width:200px; float:right;}
#center{background-color:white; min-height:800px; _height:800px; margin-left:200px;}
p{text-align:center; margin:0px 0px 0px 0px}
.text{margin-top:60px; text-align:center}
</style>
</head>
<body>
<div id="header">
<div class="text">This is header</div><br/></div>
<div id="outer">
<div id="right"><div class="text">Right column</div></div>
<div id="inner">
<div id="left"><div class="text">Left column</div></div>
<div id="center"><div class="text">Center column<br />This is center column</div></div>
</div>
</div>
<div id="footer"><div class="text">This is footer</div></div>
</body>

</html>
----------------------------------------

As you can see, each column-div and footer/header-div has a div with some text. Each such div has class "text"

In stylesheet section i define this "text" class to have 60px of margin-top.

Question - why it results in those gaps between left, right, center cloumns and footer/header? These text divs are _inside_ other divs - so margin-top should just put some space between text div and its parent, there shouldnt be any gap between parent div and neighbouring div...

Of course, if i remove margin-top:60px from the text class in stylesheet everything is fine. But this means that i cant use, say, <p> or any other tags that set margins :)

cssmu6.png
 
Last edited:
That is a strange layout/nesting of div's (at least to me)

I'm not quite sure what is going on with your order of div's and margins. To do a 3 column layout in css, generally you have your left/right floats first in the code, then your center div with margins applied to left and right.

Try a Google search on css 3 column layout, there are tons of good examples. Just remember, ALL CSS based column systems have limitations.

I did a little playing around in Dreamweaver with your layout, I took out your .text classes to see the layout more clearly, check it out maybe this will lead you in the right direction. I can't account for the margin problem you are having until I understand how the layout works.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>The Beer House</title>
<style type="text/css" media="screen">
#header {background-color:red; height:50px;}
#footer {background-color:yellow; height:50px;}

#outer {background-color:green;}
#inner {background-color:blue;margin-right:200px;}

#left{background-color:blue; width:200px; float:left;}
#right{background-color:green; width:200px; float:right;}
#center{background-color:white;margin-left:200px;}
p{text-align:center; margin:0px 0px 0px 0px}
.text{margin-top:60px; text-align:center}
</style>
</head>
<body>
<div id="header">
	This is header<br/>
</div>
<div id="outer">
    <div id="right">
        Right column
    </div>
    <div id="inner">
      <div id="left">
            Left column
      </div>
        <div id="center">
            Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column Center column <br />
            This is center column
      </div>
    </div>
</div>

<div id="footer">
	This is footer
</div>

</body>

</html>
 
Skynet said:
That is a strange layout/nesting of div's (at least to me)

I'm not quite sure what is going on with your order of div's and margins. To do a 3 column layout in css, generally you have your left/right floats first in the code, then your center div with margins applied to left and right.

Try a Google search on css 3 column layout, there are tons of good examples. Just remember, ALL CSS based column systems have limitations.

I did a little playing around in Dreamweaver with your layout, I took out your .text classes to see the layout more clearly, check it out maybe this will lead you in the right direction. I can't account for the margin problem you are having until I understand how the layout works.
Click to expand...

Sure, if you remove text class everything is fine :)

Well, it was a strange layout of divs to me too, until i finally wrapped my head about this :) The reason they are doing this is so that left and right columns appear to have the same height.

Your solution - to use just 3 divs - wont allow me to make this impression unless you use background images with the the same height (i think). I dont like that :) If you depend on the images then this means that you cant be flexible with your content - you always have to check that its height is less than the height of the images. But maybe i'm wrong...

What i'm doing here: for 3 columns, you need 2 div containers - outer and inner. You set the background for these 2 divs and place 2 div columns in inner container and inner container itself inside outer one. Then you add the last column div inside outer container, (but not inside inner one).

Then set margin for the inner div, say margin-right:200px - to make space for the right column and float right colum to the right and then deal with the columns inside inner container - float left column to the left etc. This way both left and right and center columns will appear to have the same height since they will be using inner and outer divs' backgrounds.

Keep in mind that this is very simple design, the columns will appear to have the same height only if middle column is the tallest :) Why? Because more content in the center column will increase its height thus increasing height of the inner container (so left column, which uses inner container's background will appear taller too) thus increasing height of the outer container (so right column, which user outer's background will appear taller too). But if you make right column the tallest you'll get this:

longrighteg9.png


If you want to see more complicated designs that fix this problem read here:
http://www.tjkdesign.com/articles/3cols.asp. And this is not the most complicated ones out there ;)

But of course, if you know how to do it better with much simpler design, please tell me. This, honestly, is driving me nuts :)

So do you think that div-based design isnt the best?

Anyway, if anyone can explain me why it looks like this if i use <p> tags or divs with margin-top i'll be very grateful:

marginjk2.png
 
Last edited:
I'll say this. I have not found a 3 column div/css based layout yet that does exactly what I want. I have tried MANY combinations, all of them had some type of caveat.

I drilled a hole by accident in one of my fingers so I'll reply later on your post, hard to type right now.
 
You must log in or register to reply here.
Back
Top