13 replies [Last post]
breakfast3001
Offline
Regular
Last seen: 14 years 37 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Hello everyone,

I am trying to create a website (once again) and I have 4 major areas.
I have a "left column", a "right column", and in the center, I have two areas, namely the "header" and the "content" area.
Now I am trying to make sure everything gets placed correctly before I go further with my design, but it seems there is some problem with the vertical placement.
I am working with percentages.

The problem is the following: my header has a margin-top of .5% and a height of 15%. Now I want the content area to appear right under that, with a space of .5% between it. So I count: .5+ 15 + .5 = 16%
So the margin-top of my content div should be 16% right?
That doesn't seem to be right...

I have set my body-height to 96%, maybe it has to do something with that? I'm not sure why, but in my other post Stuart suggested I do this. If I don't set the height of the body at all, the heights of my divs don't change according to what I say they should be, so I guess it is necessary.

Can anyone help me, I want to figure this out first before going on.

And an additional question: is it possible when you want to have some padding, to have that like ... inside, so that the dimensions of your divs stay the same... ?

working example: http://users.skynet.be/fa777962/CSSWebsite/main.htm[/url]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Vertical DIV Placements

I might be wrong, but I don't see the point in using margins if you are using position:absolute. Use, left, top, right and/or bottom instead.

If you simply, remove the "margin-" from the absolutely positioned divs I think you will get pretty well what you are after.

I am not sure of the reasons behind using body {height:96%}. I would think
html, body {height:100%; margin:0; border:0; padding:0;} would be fine.

If you want your heights and widths to be pure - then the padding (& borders) on those divs needs to be zero. I am not recommending this, but it will work - you can put an inner wrap inside the div. Don't use, position:absolute or specify height and width, only specify appropriate padding and borders.

e.g.

.inner_wrap {  
/* padding and border styles only */
   border: 1px dashed red;
   padding:5px 10px;
}

/* use "#some_absolutely_positioned_layout_div .inner_wrap" for specific borders and padding */

<div id="some_absolutely_positioned_layout_div">
  <div class="inner_wrap">
  <!-- start content for this part of the layout -->
  <p>Lorem ipsum ... </p>
  <!-- end content for this part of the layout -->
  </div>
</div>

To be honest, you are better applying any padding to the individual elements inside the div. And applying any border to the div itself. As long as the sum of widths and heights of your layout divs is less than 100% you should be fine. If the screen layout goes wonky at widths below 200px - and you aren't aiming at palm helds and phones - you shouldn't worry too much.

As a complete alternative, you may want to consider...

body {background:url(images/faux-columns.gif) repeat-y;}
#left {float:left; width: 13%;}
#right {float:right; width:13%;}
#center {margin-left:14%; margin-right:14%; position:relative;}
#header {height:15%;}
#main {min-height:73%; _height:73%;}  /* refer note */
#footer {height:10%;}

<body>
  <div id='left'>left content</div>
  <div id='right'>right content</div>
  <div id='center'>
    <div id='header'>header content</div>
    <div id='main'>main content</div>
    <div id='footer'>footer content</div>
  </div> <!-- center -->
</body>

_height is an IE only hack, required since IE doesn't understand min-height but treats height in the same way other browsers treat min-height. Other browsers treat height in an inappropriate way for this layout.

for more information on faux-columns refer [url=http://www.alistapart.com/
]ALA[/url]

kira80
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

Vertical DIV Placements

To place an absolutely positionned element you usualy want to use top, right, left, bottom instead of martin-top, margin-right, margin-left, margin-bottom. Replace all the "margin-top" by "top", all the "margin-left" by "left", etc. for every absolutely positionned element in your css and it should work.

If you don't specify at least two of the following : top, right, left, bottom; then I think the position of an absolutely positionned element has to do with its static position in the flow as if it wasn't absolutely positionned (see the w3c specs for reliable info about this). Maybe that could explain your weird results with margins...

Concerning your additionnal question, no I don't think it is possible. The width and height of an element refer to the width and height of its content and the content doesn't include padding, border and margins (again see the w3c specs for reliable info about this).

Edit : Sorry chris, your reply wasn't there when I started to write mine (yes I'm slow lol )

breakfast3001
Offline
Regular
Last seen: 14 years 37 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Vertical DIV Placements

Thank you both! The replies were great.

I've got some additional questions though.
Say I want my header DIV to contain an image (which has fixed dimensions of course), how can I make it so, that the "content" area then just fills up the rest of the space? (if that is possible of course - but I doubt it)

That's about it, my questions I guess, you guys are helping me out great, and I can just say: thank you! Laughing out loud

kira80
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

Vertical DIV Placements

Sorry breakfast, I don't understand what you mean by "the "content" area then just fills up the rest of the space" ? You want to center the image in the header ? Could you be more precise about what you are trying to achieve ?

breakfast3001
Offline
Regular
Last seen: 14 years 37 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Vertical DIV Placements

Sure I can explain more!
I had two parts in the middle.
"header" and "content", both "divs".
Now, what I was wondering, is if there is a way to say like "header" has these fixed dimensions (say - 200px on 300px), and then depending on the screen height/width (=size Laughing out loud), the "content" div will be automatically sized, so the "whole" screen is filled...
I hope that is clear now ... (so, actually like you can do with frames: "200,*" or something ...)

kira80
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

Vertical DIV Placements

You mean something like this http://www.culture-anime.net/sandbox/test/main.htm , with the content div extending to the bottom of the page ?

Edit : the header doesn't have a fixed height in my example, but I want to be sure I properly understand what you mean...

Edit 2 : other example with a fixed height header : http://www.culture-anime.net/sandbox/test2/main.htm

breakfast3001
Offline
Regular
Last seen: 14 years 37 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Vertical DIV Placements

That is exactly what I need! Thank you so much!
You rock! :twisted:

kira80
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

Vertical DIV Placements

Ok !
I was still playing with a new version of the last example so I'm posting it http://www.culture-anime.net/sandbox/test3/main.htm

good luck for the rest

breakfast3001
Offline
Regular
Last seen: 14 years 37 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Vertical DIV Placements

Like I said, it works great! ... in FF ... in IE it doesn't seem to work.
Is there some kind of workaround ?
All help is highly appreciated! Laughing out loud

kira80
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

Vertical DIV Placements

...

I'm stupid. This is because I fixed the top and bottom attribute for the "content" div at the same time and IE doesn't like that (Opera doesn't like that either in some cases), I knew it. I'm very sorry. I'm thinking about an other solution.

kira80
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

Vertical DIV Placements

Here is another attempt : http://www.culture-anime.net/sandbox/test4/main.htm

I removed body{height: 95%;} but I had to add

html, body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

body{
	background-color: #DEE3EF;
}

because fixing the size of a parent element is needed if you want to use percentages to position a child.

To fix the problem with IE, I wrote this for the content div :

div#content{
	position: absolute;
	top: 108px;
	left: 14%;
	bottom: 3px; /*IE doesn't take this into account if you give a value for top*/
	width: 72%;
	_height: expression(document.body.clientHeight - 108 - 3);/*only IE sees this*/
	border: 1px solid #9EA7BC;
	background-color: #FFFFFF;
	overflow: auto;
}

I know, that css-expression is ugly but it works...if you want your css to stay valid, you can place that line in a css for IE only like this :

<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if IE]> <link rel="stylesheet" type="text/css" href="style_for_ie.css"/> <![endif]-->

If somebody has a better solution, please explain it...

Edit: are you really sure you need that central scrolling div ? Why not to use the window scrollbar ?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Vertical DIV Placements

or you could try that alternate example I posted before. It was set so #main used a min. height, but would expand if it required more content.

Smile

kira80
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

Vertical DIV Placements

I was assuming breakfast3001 really wanted that central scrolling div (he put an "overflow: auto;" in the css for #content).