Log in

View Full Version : Div problem need help


Null
12-14-2006, 03:59 PM
Hi,

As an excample I've added a html file with the divs in it so you can all see the code etc.

The problem, I have 3 divs (there are more but it concers these 3) called: leftbar, news and right bar. (see the html attachment). Now the leftbar and news div (middle div) are both properly alligned, but the right bar div has some issues. It's aligned good (right side) but it always stays BELOW the news div. What ever I try, I cant get it up like the left bar.

Also all 3 div should stay in the main div (pink)

Any help would be nice!

Null
dog
12-14-2006, 07:09 PM
Hi Null,

Can you please post your HTML for us to take a look at.

dog
Null
12-14-2006, 07:10 PM
It's in the zip
dog
12-14-2006, 07:15 PM
It's in the zip

I guessed it might be but if you post the HTML in the thread using the html button (one of the tools about the main text area) it would make it easier for everyone to see and discuss.
Null
12-14-2006, 08:12 PM
For the lazy *******s :D

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#wrapper {
border: 1px solid #black;
}

#main {
background-color: #FF00FF;
font-size: 1.2em;
width: 760px;
margin: 0 auto 25px;
position: relative;

}
#footer {
background: #ccc;
margin: auto;
color: #666;
font-size: 1.0em;
letter-spacing: 2px;
text-transform: uppercase;
padding-top: 10px;
clear: both;
text-align: center;
width: 760px;
border: 1px solid #black;
}


#leftbar {
float: left;
width: 150px;
overflow-x: hidden;
border: 1px solid #black;
}

#news {
float: left;
margin-left: 20px;
width: 420px;
border: 1px solid #black;
}

#rightbar {
margin-left: 610px;
width: 150px;
overflow-x: hidden;
border: 1px solid #black;
}
</style>

</head>
<body>
<div id="wrapper">



<div id="main">

<div id="leftbar">
leftdiv
</div>

<div id="news">
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
</div>

<div id="rightbar">
rightdiv
</div>


</div>

<div id="footer">

</div>
</div>
</body>
</html>
GhettoT
12-14-2006, 08:27 PM
I think I see your problem but I guess since I am in the lazy *******s gruop. I shouldn't waste any time posting it...;)
dog
12-14-2006, 09:21 PM
Hi Null,

Take a look at this code. I think this is acheiving what you were looking for:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
text-align: center;
}

#wrapper {
border: 1px solid black;
text-align: left;
width: 760px;
margin: 0 auto;
}

#main {
background-color: #FF00FF;
font-size: 1.2em;
width: 760px;
margin-bottom: 25px;
position: relative;
}

#footer {
background: #ccc;
margin: auto;
color: #666;
font-size: 1.0em;
letter-spacing: 2px;
text-transform: uppercase;
padding-top: 10px;
clear: both;
text-align: center;
width: 760px;
border: 1px solid black;
}

#leftbar {
float: left;
width: 150px;
overflow-x: hidden;
border: 1px solid black;
}

#news {
margin-left: 170px;
width: 420px;
border: 1px solid black;
}

#rightbar {
position: absolute;
top: 0;
left: 610px;
width: 150px;
overflow-x: hidden;
border: 1px solid black;
}

</style>

</head>

<body>

<div id="wrapper">

<div id="main">

<div id="leftbar"> leftdiv </div>

<div id="news">
middlediv middlediv middlediv middlediv middlediv
middlediv middlediv middlediv middlediv middlediv
</div>

<div id="rightbar"> rightdiv </div>

</div>

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

</div>

</body>

</html>



First point the main div shouldn't be using float of any sort because it's needed to define the height of the page.

Try previewing your original code in Firefox to get an idea of what I mean.

The right bar was positioning itself underneath the other divs so I've given it an absolute position to fix it to the top of the containing div (main).

Three more things I noticed. You didn't have any document type defined for your page so I've suggested one.

When defining a 'color' it is not correct to use
#black I'm suprised that IE accepts it, other browsers will ignore it. Try:
#000 or
black instead.

Last point: Your original code used:

margin: 0 auto 25px; As far as I know this is incorrect. To use short-hand CSS like this you need to give a value for all of the attributes, margin-top, margin-right, margin-bottom and margin-left. I tend to only define what is necessary so I've used only margin-left and it seems to do the trick.

I hope this helps.

dog

PS
I think I see your problem but I guess since I am in the lazy *******s group. I shouldn't waste any time posting it...
Yeah man, I know what you mean.