DIV positioning: header & 3 columns

[alexthecatta]

HELP!! PLEASE!!

I have a problems with DIV positioning.

The screenshot.gif shows u the page as it is now.
And here is the CSS code:

.body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.5em;
}
#divHeader {
width: 870px;
margin-left: 5px;
}
#divBreadcrumb {
background-color: #FF0000;
height: 23px;
margin-left: 5px;
width: 870px;
}
#divCont {
width: 870px;
margin-left: 5px;
}
#divCont #divLeft {
position: absolute;
top: auto;
background-color: #999999;
margin: 0px;
width: 150px;
}
#divCont #divCenter {
width: 714px;
margin-left: 155px;
background-color: #00FF00;
}

Problems come with divLeft and divCenter: divLeft's width is 150px, plus a 5px lleft margin...is that right that my divCenter has 155px left margin? I wanna have it right at the right side of divLeft. But has u can see from the image there's a little space between these 2 div.

Questions:
Should I position divLeft in an absolute way? If yes, what are the px measures for each side?

divLeft and divCenter are inside the divCont: is it OK that the code for these div is

#divCont #divLeft {?

thanks in advance! and Merry Christmas
PLease help me...

[_Aerospace_Eng_]

Check out this example (http://bonrouge.com/3c-hf-fluid.php).

[jbdzyne]

Far's I know, you shouldn't use two #'s for your div names. Could be causing some serious hassles? If you want to see a working header w/three col's site, follow the link in my signature.

[_Aerospace_Eng_]

Far's I know, you shouldn't use two #'s for your div names. Could be causing some serious hassles? If you want to see a working header w/three col's site, follow the link in my signature.
If you are referring to this
#divCont #divLeft {
Its fine its just saying apply the style to the div with id="divLeft" inside of the div that has an id="divCont" but since you can only use an ID one time you can do this instead.
#divLeft

[jbdzyne]

:) That makes sense now, thanks!

[alexthecatta]

hi guys, thsnka a lot for your help.

I tried to do something, but still there's something wrong.

Here is the code of the CSS file:

.body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.5em;
}
#divMain {
position:relative;
min-height:100%;
margin-top: 5px;
margin-left: 5px;
width:870px;
}
#divBreadcrumb {
background-color:#FF0000;
}
#divLeft {
float:left;
width:200px;
text-align:center;
background-color: #666666;
}
#divCont {
position:relative;
margin-left:200px;
background-color:#009900;
}
#divRight {
float:right;
width:200px;
text-align:center;
background-color:#FFFF00;
}
#divCenter {
padding:5px;
margin-right:200px;
text-align:left;
}
* html #divMain {height:100%}
* html #divCont,
* html #divMain{
height:1px;
}

And as u see from the screen shot I attach, the result is better than the previous one but still not OK: the green div goes till the end of the line and the yellow div can not be on the same line of the green and gray one...but I do not understand what's wrong.

Abt the code: I understood the sens eof everything...except this last part
* html #divMain {height:100%}
* html #divCont,
* html #divMain{
height:1px;
}

thanks in advance
A.

[_Aerospace_Eng_]

In your html make the left div come first, then the right div and then the content div. Set a left and right margin on the content div to overcome the width of the left and right divs. Float the left div to the left, float the right div to the right. Don't float the content div. That last bit of code is targeting IE only. Since IE doesn't understand min-height but it does have a bug to where it will resize its container to fit the content it will be a 100% height if the content isn't enough to fill it up but if it is enough then it will expand. The part that makes them a height of 1px again is an IE only CSS hack, there is another bug in IE when floats are next to a non floated element. The trick is to set their height to 1px, not really sure why this works it just does. Again because IE expands its containing elements height the height of 1px is ignored but it fixes a bug so yeah that explains it. If that doesn't work then post your html as well.

[alexthecatta]

thanks a lot, your suggestions solved a great part of my probs :)

One more question: i've setted the height of the divCenter at 540px, like the divLeft. I've put some content in the divCenter and now it goes down...it seems it is "longer" than the measure I've put.

What do I do wrong this time?

Here I send u the code of the page
<!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>
<title>Polizia Locale - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../css/polizia.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="divMain">
<div id="divHeader">
<a href="default.htm"></a><a href="default.htm"></a><a href="default.htm"><img src="../img/jpg/visual_870x87.jpg" alt="Polizia Locale - Consorzio Breggia Lario" width="870" height="87" border="0" /></a></div>
<div id="divBreadcrumb"><a href="default.htm">Home Page</a> <a href="cittadino.htm">Cittadino</a> <a href="polizialocale.htm">Polizia Locale</a> <a href="comando.htm">Comando</a> <a href="sezioni.html">Sezioni Dedicate</a> <a href="contattaci.htm">Contattaci</a> <a href="faq.htm">Domande & Risposte</a></div>
<div id="divLeft">colocar aqui el contenido div left </div>
<div id="divCont">
<div id="divRight">&nbsp;</div>
<div id="divCenter">Benvenuto nel nuovo sito Internet della<br />
Polizia Locale - Consorzio Breggia Lario.<br />
<br />
In queste pagine troverai informazioni utili, notizie sull'attivit&agrave; della Polizia Locale, numeri di pronto intervento, moduli ecc. Il tutto a portata di click.<br />
Buona navigazione.<br />
<br />
Entra nel sito Mappa del sito<br />
<br />
</div>
<div id="divSpecifiche"><span class="specifiche">La versione completa del sito verra' rilasciata a breve.<br />
Sito ottimizzato per schermi con risoluzione 1024x768px.</span></div>
</div>
</div>
</div>
<div id="divClear"></div>
<div id="divFooter"><a href="mailto:cattaneo.a@gmail.com">webmaster</a></div>
</div>
</body>
</html>

And here I send the code of the CSS style:

.body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.5em;
}
#divMain {
position:relative;
min-height:100%;
width:870px;
}
* html #divMain {height:100%}
#divBreadcrumb {
background-image: url(../img/jpg/nav_bground.jpg);
background-repeat: repeat-y;
height:25px;
}
#divLeft {
float:left;
width:200px;
text-align:center;
background-color: #666666;
height: 540px;
}
#divRight {
float:right;
width:6px;
height:540px;
text-align:center;
background-image: url(../img/jpg/onepix_dx.jpg);
background-repeat: repeat-y;
}
#divCont {
position:relative;
margin-left:200px;
height: 540px;
}
#divCenter {
margin-right:6px;
text-align:center;
background-color: #FFFF00;
background-image: url(../img/jpg/sede40.jpg);
background-repeat: no-repeat;
background-position: center top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 2em;
font-weight: bold;
letter-spacing: normal;
vertical-align: middle;
word-spacing: 1em;
padding: 80px 30px 0px;
height: 540px;
}
#divClear {
clear:both;
height:2px;
width: 870px;
border: 2px solid #000000;
}
* html #divCont,
* html #divMain{
height:1px;
}
.specifiche {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 9px;
padding-bottom: 2px;
line-height: 1em;
letter-spacing: normal;
text-align:right;
word-spacing: normal;
font-weight: lighter;
bottom: 2px;
text-transform: uppercase;
}
#divFooter {
font-family: "Courier New", Courier, mono;
font-size: 1em;
line-height: normal;
color: #000000;
text-align: center;
vertical-align: middle;
}

And here teh screen shot...please help!
and happy new year
Ale

[ray326]

What do you want to do with the overflow, add a scroll bar? Add overflow:auto; to the div.

[alexthecatta]

i've tried overflow:auto; but nothing happens...still the DIV it's higher than 540px. :confused:

[alexthecatta]

OK, the DIV becomes higher (more than the size i've set) if I put some value for the top and/or bottom padding. Why? How can I use padding without having this nasty behaviour by the DIV?

Do i have to set the padding to the <p> tag and not to <div> tag?

help me please...

[ray326]

padding: 80px 30px 0px;
height: 540px;
That div will be 620px tall.

[alexthecatta]

ahhh....thanks a lot...feel so stupid :o

[alexthecatta]

again:

this time it's a problem with border.

I set size, color and style of the border for the divClear, but I can not see it. and everytime I go back in the control panel I don't find the values I've setted.

What's wrong this time?

[ray326]

Control panel?