Positioning Divs

[Lautarox]

This is what i want to do..

content and menu change sizes, I've tried dividing everything in 3 divs, the header, the center and the footer, the center had the content and the menu, but the menu was in a fixed position, and in matters of browsers compatibility it is a little difficult to set it clear..

Now I'm triying with float..

what would you recommend?

[rhodesa]

<style type="text/css">
#content {
  float: left;
  width: 500px;
}
#menu {
  float: right;
  width: 200px;
}
#footer {
  clear: both;
}
</style>
<div id="header"></div>
<div id="middle">
  <div id="content"></div>
  <div id="menu"></div>
</div>
<div id="footer"></div>

[phparray]

Here is another method using percentages instead of fixed widths.

 

/* CSS file */
body {
color:#fff;
}

#header {
width:100%;
height:110px;
background-color:#000;
margin-bottom:10px;
}

#content {
width:50%;
background-color:#000;
margin-left:10%;
margin-right:5%;
float:left;
}

#menu {
width:20%;
background-color:#000;
float:left;
}

.push {
clear:left;
}

#footer {
width:100%;
height:85px;
background-color:#000;
margin-top:10px;
}

 

 

<!-- Html file -->
<div id="header">Header</div>
<div id="content">Content</div>
<div id="menu">Menu</div>
<div class="push"></div>
<div id="footer">Footer</div>

[Lautarox]

phparray's method worked better, cause of the divs aligment, it was really ugly postioning the menu with float: right; what's clear for? I've also added a pusher on the left side of the content so it can change if the browser screen is small, something like..

<div class="c_center">

<div class="pusher"></div>

<div class="container">

<font color="#f4e21f"> <?php $content->load(); ?> </font>

</div>

<div class="rightbar">

<div class="rightmenu">

<? $pages->load(); ?>

</div>

<div class="archives">

<?  $blog->archives(); ?>

</div>

</div>

</div>

 

I've noticed I have another problem, this is my menu style

.rightbar {

min-height: 500px;

height:auto !important;

height: 500px;

width: 200px;

margin-left: 10px;

-moz-border-radius: 1em;

border-radius: 1em;

float: left;

border: #f4e21f 1px solid;

background-color: #2c2c2c;

}

When I resize the browser, it dissapears ¬¬

[phparray]

You need to use clear when you want block elements to stop floating.

 

Also using the percentages will make everything re-size per your browser size without anything additional being added.

 

 

[Lautarox]

Yeah but, I mean, it resizes and the div disappears, I want it to stop resizing and be there, not disappear when it gets smaller

[rhodesa]

it doesn't disappear, it should drop down lower on the screen. If you make the DIV (i called it middle before) fixed width, the the browser window won't be able to go smaller (it will add scroll bars) and the DIVs won't wrap

[dbrimlow]

This is a BIG RED FLAG to us right here!

 

<font color="#f4e21f"> <?php $content->load(); ?> </font>

 

CSS is all about removing old markup level style tags. If you still use font tags, then you are a beginner to css; do you use a valid DOCTYPE?

 

We need to see either a link to a beta page or your html page structure (complete from the doctype and html open and closing tags), AND your css.

 

If your page has no doctype and charset, is full of improper/deprecated tags, and doesn't follow proper markup rules (full of validation errors), then there is no point in trying to make the layout work.

 

Giving advice on layout and/or trying to debug code without seeing the html is basically assuming that you have zero errors and are using 100% valid html.

[Lautarox]

Yes it has a doctype and the font tag was just for testing purposes, I forgot to remove it, thanks I understood the fixed property

[Lautarox]

About the fixed property, I don't seem to get it working correctly, the center div must be 100% width, I just don't want things to change places when resizing..

Take a look

http://www.c4bikes.com.ar/index2.php

[Lautarox]

Well.. I missed about the doctype, which would be the correct one?

[dbrimlow]

Okay, at present you are using the worst doctype you can - a frameset. This is helping you to have over 80 errors at the moment.

 

Since your markup is already using self-closing tags, in your case I would recommend using xhtml strict:

 

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>C4Bikes.com.ar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

Why "strict"?

 

Because no one is ever going to learn proper html using "transitional". All transitional is is a way to keep using bad or deprecated html tags.

 

Once you change the doctype, you will have to validate the page and debug the errors. Yours will not be too bad, just old junk like markup level styling "border="0", "vspace=1" and "hspace=1" - these are done in the style sheet:

 

img {border:0; padding:1px; margin;1px}

 

You suffer from a bad case of "DIV-itus". You have "DIVS" all over the place, and use them for to contain raw text instead of proper text containing block level tags like - heading 1- 6, paragraph. You DO use list tags, at least.

 

Using line breaks instead of paragraphs, lists or headers is so archaic. I mean, we did that back in '94. It is easy to convert your divitus into proper semantic markup. Search engines LOVE seeing headers and paragraphs - it shows them a hierarchical structure to check for keywords.

 

"divs" should only be used as html layout "place holders". They contain the actual html tags in the context of the layout.

 

Your markup is nice and clean but is just screaming for proper "semantic" markup.

 

Yours is to fix.

For the most part any current class that contains text should be changed from div to either p, h1, - h6 or ul, ol, dl.

Any line break used to simulate margins or paddings should be removed, unless it is properly embedded WITHIN a p, h1 - h6 or <li> tag where you want to force a line break in the middle of text - not to create space.

 

For example:

 

this:

<div class="post_container">
<div class="post_title">Simpel Session 2009 Posiciones<br></div>
<div class="post_autor">Posteado por <a href="?go=home&t=4&s=Peta">Peta</a> el 18/1/2009 a las 12:28:30</div>
<div class="post_entrada">Recien salida del horno, la tabla de posiciones del Simple Session 2009 Estonia,<br />

<br />
<img src="/admin/images/post/garret.bmp"><br />
<br />
1 - Garret Reynolds - 371 - USA<br />
2 - Gary Young - 358 - USA<br />
3 - Dennis Enarson - 355 - USA<br />
4 - Rob Darden - 346 - USA<br />
5 - Ben Hennon - 345 - UK<br />
6 - Bruno Hoffman - 342 - GER<br />
7 - Bjorn Mager - 333 - GER<br />
8 - Morgan Wade - 331 - USA<br />
9 - Michael Beran - 330 - CZE<br />
<br />
<a href="http://bmx.transworld.net/2009/01/18/2009-simpel-session-qualifying-highlights-video/">Video de Eliminatorias</a></div><br>

Should be this:

<div class="post_container">
<h3 class="post_title">Simpel Session 2009 Posiciones</h3>

<p class="post_autor">
Posteado por <a href="?go=home&t=4&s=Peta">Peta</a> el 18/1/2009 a las 12:28:30</div><div class="post_entrada">Recien salida del horno, la tabla de posiciones del Simple Session 2009 Estonia,</p>

<p><img src="/admin/images/post/garret.bmp"></p>
<ol>
<li> Garret Reynolds - 371 - USA</li>
<li> Gary Young - 358 - USA</li>
<li> Dennis Enarson - 355 - USA</li>
<li> Rob Darden - 346 - USA</li>
<li> Ben Hennon - 345 - UK</li>
<li> Bruno Hoffman - 342 - GER</li>
<li> Bjorn Mager - 333 - GER</li>
<li> Morgan Wade - 331 - USA</li>
<li> Michael Beran - 330 - CZE</li>
</ul>
<p><a href="http://bmx.transworld.net/2009/01/18/2009-simpel-session-qualifying-highlights-video/">Video de Eliminatorias</a></p>
</div>

 

You are so close to being really semantic and valid while using SEO text and having a true table-less layout.

 

Once you fix these little things, cross-browser, CSS positioned layout will be MUCH easier.

 

Never consider it working just by looking at your screen, browser and PC.

 

Check it on public computers, friends, parents, etc. - and don't just settle for how it looks in a browser. The code is just as important as what it displays - for many reasons, but chiefly for SEO. Search Engine bots "naturally" rank semantic markup better.

 

Dave