(SOLVED) Basic HTML help - I must be missing something simple

Djiem · March 2009

Hi. I'm working on the layout of a webpage in which my friend is gonna add the actual PHP code that will make it work later. For the moment, I'm having trouble sizing the thing. I've been told to stop using tables and use divs instead because they allow more freedom and because tables are for noobs or people making a small list-like database.

So, my page has this code right now:

<head>
<link rel="stylesheet" type="text/css" href ="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
</head>

<body>
<div id="tout">

<div id="haut">

Haut

</div>

<div id="milieu">

<div id="gauche">

Gauche
Gauche
Gauche<br>
Gauche
Gauche
Gauche

</div>

<div id="droite">

Droite

</div>

</div>

</div>
</body>
</html>

And here's the CSS:

body{
margin:0px;
padding:0px;
text-align:center;
}
#tout{
position: relative;
margin:0px;
padding:0px;
width: 820px;
text-align: center;
overflow: hidden;
background-color: #FFFFFF; /*NOIR*/
border-right: solid black 10px;
border-left: solid black 10px;
}
#haut{
position: relative;
top: 0px;
left: 0px;
height: 150px; /*A DETERMINER */
width: 820px;
background-color: #FF0000; /*ROUGE*/
}
#milieu{
position: relative;
top: 0px;
left: 0px;
width: 820px;
background-color: #00FF00; /*VERT*/
text-align: left;
}
#gauche{
position: absolute;
top: 0px;
left: 0px;
width: 660px;
border-right: solid black 10px;
background-color: #0000FF; /*BLEU*/

}
#droite{
position: relative;
top: 0px;
left: 670px;
width: 150px;
background-color: #FFFFFF; /*BLANC*/
}

As it is now, there is a DIV called "tout" (all) that contains the rest of the content. The idea is that this DIV is centered in the body of the page so that it's always centered no matter the resolution. In that "tout" is the top div for the logo, called "haut". Below it is "milieu", which contains gauche and droite (left and right). There are colors in the background of each DIV right now to help me picture what's happening when I move values.

Right now, in my CSS, I added a 1000px height to #droite and #gauche so that they extend further than the text inside of them, and that they extend to the same length, but hardcoding is not the right way, I know it. My problem is that I want the #gauche and #droite DIV to always be of the same height, and that height is whichever of those two DIVs contain the most stuff in it. I'd also like #milieu and #tout to extend in height all the way down to #gauche or #droite (whichever's the longest due to content inside it) because there's a border on #tout which is supposed to encapsulate the whole site.

I've been using tables all my life (and have not a lot of experience in coding pages at all, or rather I'm really rusty), so I'm kind of at a loss as to what to do now.

Anyone knows what I'm doing wrong? Or do I need tables to do what I'm attempting?

The Emit · March 2009

The easiest way to make it appear that both divs are the same height is to set them both to no background, and have a div that encompasses both with whatever background you want. That way, regardless of whichever is longer, the div that encompasses them extends down to the height of the tallest one.

Something like.

Html would look something like:

<div id = "wrapper">
<div id= "droite">
</div>
<div id= "gauche">
</div>
</div>

CSS would be something like this:

#wrapper{
width: 1000px;
background:url('\img\background.jpg');
}

#droite{
width:500px;
background:none;
}

#gauche{
width:500px;
background:none;
}

That's extremely simple, but it contains the general idea. An outer div surrounding the other two. It'll extend to the height of the longest one and give the illusion that the other two are the same length. As long as you don't set borders or something on droite and gauche.

Hope this helps. It's rather quick and dirty.

Djiem · March 2009

Thanks, but in the OP there already is a wrapper. It's "milieu", and it's not doing the trick for some reason. It's like gauche and droite are actually sticking out of the wrapper. Also, I don't want to give it a fixed height (like 1000px or a background picture) because every page will be different.

EDIT: Oh wait, nevermind, I didn't put any picture in my wrapper. I'll work on this right away.

EDIT: What if I added a footer DIV? Testing that out right now.

EDIT: Solved, I just put the right DIV within the left one and worked out all the margins and stuff. Thanks.

Hypatia · March 2009

Okay, let's see here. Hm, where to begin.

Let's just start on the absolute thing. Don't use the position: absolute tag in your CSS. Absolute is great if you're going to want everything to show up in the exact same place every time, but that doesn't seem to be what you're looking for at all and absolute also screws up in some browsers.

For your tout div, the reason it isn't centering in your browser is because of your margin. You need to set that to: margin: 0px auto 0px auto; (ie: margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px;)

In order to make your milieu and tout extend to the length of your left and right divs you're going to need to swap around your divs a bit and add a clear.

Example:

[HTML]
<div id="tout">
<div id="haut">
<img src="/images/header.jpg" alt="" />
</div>

<div id="milieu">
<div id="gauche">
<div id="droite">
Lorem Ipsum on the right
</div>
Lorem Ipsum blah blah blah on the left
<div id="clear">
</div>
</div>
</div>
</div>
[/HTML]

The CSS for your clear should be:

body{
  margin:0px;
  padding:0px;
  text-align:center;
}

div#tout{
  margin: 0 auto 0 auto;
  padding: 0;
  width: 820px;
  background-color: #FFFFFF; /*NOIR*/
  border-right: solid black 10px;
  border-left: solid black 10px;
}

div#haut{
  padding: 0;
  margin: 0;
  height: 150px; /*A DETERMINER */
  width: 820px;
  background-color: #FF0000; /*ROUGE*/
}

div#milieu{
  padding: 0;
  margin: 0;
  width: 820px;
  background-color: #00FF00; /*VERT*/
  text-align: left;
}

div#gauche{
  padding: 0;
  margin: 0;
  width: 820px;
  background-color: #0000FF; /*BLEU*/
}

div#droite{
  float: right;
  position: relative;
  padding: 0;
  margin: 0;
  width: 150px;
  background-color: #FFFFFF; /*BLANC*/
}

div#clear {
  clear: both;
}

Your issues seem to mostly stemming from your thinking about each div as a cell in a table instead of sort of an elastic container, which probably doesn't tell you anything. It does take some time to learn how to think in terms of divs instead of tables.

A couple of things of note that I noticed/tips:

- You don't need to repeat yourself for so much of your styles. If you've already declared that the text is going to be centered in your body, you don't need to repeat it unless you're going to be changing it
- You don't need to keep putting the position as relative
- You do want to put padding and margin in each div because some browsers will arbitrarily add them for you if you don't declare them
- I'm not sure of why you were using top and left -- use padding and margin instead
- If you're trying for the same look in all browsers, I would highly recommend clearing all of your styles before you start doing anything. Browser will often add different stylings and unless you specifically declare stuff you don't want it tacking on extra stuff that will drive you crazy later or that will make it look funky. An example of a reset page is: located here. Just copy that into a separate file like "style_reset.css" and add it to your page before your other stylesheets.

Penny Arcade

Quick Links

(SOLVED) Basic HTML help - I must be missing something simple

Posts