Help with DIVs & CSS [Archive]

iUnknown

17-02-2008, 08:18 PM

Hello,

I'm trying to learn how to code layouts in DIVs and CSS. I first used SS's stickied tutorial to do my first CSS box, which worked well. Now I'm trying to teach myself to do layouts. I'm doing well, but I want to be able to add a javascript to make an iframe expand in the main content box. However, when I add lines <br> or <p> </p> to the content box, it makes white appear above and below the left and right. I have a div for the right and left (ids: #leftbot and #rightbot) that I would like to expand with the middle content box, but I'm not sure how to do this. I might of just done something wrong in the coding or there is something I need to add (that's why I need help!).

I've got it all in one container, then the left 3 boxes in a left container and content in middle container and right 3 boxes in right container. The CSS looks like this:

<style type="text/css">

</style>

Body code:

<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="top"></div></td>
</tr>
</table>
<div id="left">
<div id="navtop"></div>
<div id="leftmid">
<p>Nav here</p>
<p> </p>
<p> </p>
<p>yes</p>
<p>it's all expandable</p>
<p>:D </p>
<p> </p>
</div>
<div id="navbot"></div>
<div id="radiotop"></div>
<div id="leftmid">
<p>Radio text</p>
<p>yeah baby </p>
<p>whatever</p>
<p>u</p>
<p>want</p>
<p>here</p>
<p>lolz</p>
<p> </p>
</div>
<div id="radiobot"></div>
<div id="grouptop"></div>
<div id="leftmid">
<p>harhar</p>
<p>mm</p>
<p>sexily expanding</p>
<p>woohoo </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="groupbot"></div>
<div id="leftbot">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="middle">
<div id="contenttop"></div>
<div id="contentmid">
<p>hi</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="right">
<div id="statstop"></div>
<div id="rightmid">
<p>radio stats</p>
<p>here</p>
<p>yeah</p>
<p>ok?</p>
<p> </p>
<p>song and stuff</p>
<p>yeah</p>
<p>ok cool</p>
<p> </p>
<p>  </p>
</div>
<div id="statsbot"></div>
<div id="linktop"></div>
<div id="rightmid">
<p>link us</p>
<p>can</p>
<p>go</p>
<p>here</p>
</div>
<div id="linkbot"></div>
<div id="newstop"></div>
<div id="rightmid">
<p>news here</p>
<p>title then date</p>
<p>or</p>
<p>however you</p>
<p>want it</p>
<p>so yeah</p>
<p>news - the layout now expands </p>
<p>lol</p>
<p> </p>
<p>pretty..</p>
<p> </p>
<p> </p>
<p> </p>
<p>.. big </p>
</div>
<div id="newsbot"></div>
<div id="rightbot">
<p> </p>
<p class="style1"> </p>
<p class="style1"> </p>
</div>
</div>
<table cellpadding="0" border="0" cellspacing="0" height="26"><tr><td><div id="footer1"></div><div id="footer2"></div><div id="footer3"></div></td></tr></table>
</div>

If there is any more information I need to provide to make it clearer or to help, then let me know. I would love if anyone could help me with this and +rep will be given. I know there are probably more glitches in the coding and I can fix them later, but this is my main one :P

MrCraig

17-02-2008, 08:31 PM

Woah deja vuu :S

Try adding

background-repeat:repeat-y;

To the CSS of your rightbot and leftbot

iUnknown

18-02-2008, 06:11 PM

Woah deja vuu :S

Try adding

background-repeat:repeat-y;
To the CSS of your rightbot and leftbot

Thanks Craig :D I'm on my way to victory with this now - but you didn't completely sort it :P Now the bottom is expanding and there aren't any white patches appearing BUT the leftbot and rightbot aren't expanding with it. Wonder if you can help me with this - or anyone for that matter.

+rep to your Craig, thanks again.

MrCraig

18-02-2008, 07:38 PM

try changing it to..

background-repeat:repeat;

iUnknown

18-02-2008, 08:47 PM

Still not making any difference, here is the new code (I have been fiddling a little as I realised the bottom section/footer wasn't appearing (which I have got working now).

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">

</style>
</head>

<body>
<br />
<table align="center" width="923">
<tr>
<td>
<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="top"></div></td>
</tr>
</table>
<div id="left">
<div id="navtop"></div>
<div id="leftmid">
<p>Nav here</p>
<p> </p>
<p> </p>
<p>yes</p>
<p>it's all expandable</p>
<p>:D </p>
<p> </p>
</div>
<div id="navbot"></div>
<div id="radiotop"></div>
<div id="leftmid">
<p>Radio text</p>
<p>yeah baby </p>
<p>whatever</p>
<p>u</p>
<p>want</p>
<p>here</p>
<p>lolz</p>
<p> </p>
</div>
<div id="radiobot"></div>
<div id="grouptop"></div>
<div id="leftmid">
<p>harhar</p>
<p>mm</p>
<p>sexily expanding</p>
<p>woohoo </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="groupbot"></div>
<div id="leftbot">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="middle">
<div id="contenttop"></div>
<div id="contentmid">
<p>hi</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="right">
<div id="statstop"></div>
<div id="rightmid">
<p>radio stats</p>
<p>here</p>
<p>yeah</p>
<p>ok?</p>
<p> </p>
<p>song and stuff</p>
<p>yeah</p>
<p>ok cool</p>
<p> </p>
<p>  </p>
</div>
<div id="statsbot"></div>
<div id="linktop"></div>
<div id="rightmid">
<p>link us</p>
<p>can</p>
<p>go</p>
<p>here</p>
</div>
<div id="linkbot"></div>
<div id="newstop"></div>
<div id="rightmid">
<p>news here</p>
<p>title then date</p>
<p>or</p>
<p>however you</p>
<p>want it</p>
<p>so yeah</p>
<p>news - the layout now expands </p>
<p>lol</p>
<p> </p>
<p>pretty..</p>
<p> </p>
<p> </p>
<p> </p>
<p>.. big </p>
</div>
<div id="newsbot"></div>
<div id="rightbot">
<p> </p>
<p class="style1"> </p>
<p class="style1"> </p>
</div>
</div>
</div>
<table width="923" border="0" align="left" cellpadding="0" cellspacing="0">
<tr><td height="26"><img src="leftbot2.png" width="212" height="26" /><img src="contentbot.png" /><img src="rightbot2.png" width="201" height="26" /></td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
This is uploaded at: http://youngmusicscene.co.uk/habboplex/

It looks fine at that example but if I added another line in the content box, it would make white gaps appear BELOW the left and right sections. Nothing is appearing above the left and right sections (what you fixed) so they are staying in place. But, the footer gets pushed down as it should, so luckily there shouldn't be any future problems as the layout is working properly apart from this. Thank you for your help so far, and when we find the final solution I will give more +rep as thanks :)

MrCraig

18-02-2008, 08:56 PM

:S i dont see anything wrong with it..

iUnknown

18-02-2008, 09:03 PM

I think it is very probably to do with the left, middle and right DIVs, possibly the:

float: left;
position: relative;

bit. Which is exactly the same for the middle div and the only difference with the right one is that it floats right... But I think having two floating left isn't right maybe? But I don't know what to do about that :S and it's very possible that I'm missing or have done the code wrong for one of those DIVs.

Thanks again for the help so far;

IF ANYONE ELSE COULD TRY AND HELP TOO THAT'D BE GREAT!

iUnknown

18-02-2008, 10:02 PM

Sorry for double post, can no longer edit:

Maybe this can help? http://validator.w3.org/check?uri=http%3A%2F%2Fyoungmusicscene.co.uk%2Fhab boplex%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Don't know how to fix those errors.. pretty simple advice I need IT SEEMS.

Also new code (I changed the main theme of coding a bit):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">

</style>
</head>

<body>
<br />
<table align="center" width="923">
<tr>
<td>
<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div><img src="top.png" /></div></td>
</tr>
</table>
<div id="left">
<div><img src="navtop.png" /></div>
<div id="leftmid">
<p>Nav here</p>
<p> </p>
<p> </p>
<p>yes</p>
<p>it's all expandable</p>
<p>:D </p>
<p> </p>
</div>
<div><img src="navbot.png" /></div>
<div><img src="radiotop.png" /></div>
<div id="leftmid">
<p>Radio text</p>
<p>yeah baby </p>
<p>whatever</p>
<p>u</p>
<p>want</p>
<p>here</p>
<p>lolz</p>
<p> </p>
</div>
<div><img src="radiobot.png" /></div>
<div><img src="grouptop.png" /></div>
<div id="leftmid">
<p>harhar</p>
<p>mm</p>
<p>sexily expanding</p>
<p>woohoo </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div><img src="groupbot.png" /></div>
<div id="leftbot">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="middle">
<div><img src="contenttop.png" /></div>
<div id="contentmid">
<p>hi</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="right">
<div><img src="statstop.png" /></div>
<div id="rightmid">
<p>radio stats</p>
<p>here</p>
<p>yeah</p>
<p>ok?</p>
<p> </p>
<p>song and stuff</p>
<p>yeah</p>
<p>ok cool</p>
<p> </p>
<p>  </p>
</div>
<div><img src="statsbot.png" /></div>
<div><img src="linktop.png" /></div>
<div id="rightmid">
<p>link us</p>
<p>can</p>
<p>go</p>
<p>here</p>
</div>
<div><img src="linkbot.png" /></div>
<div><img src="newstop.png" /></div>
<div id="rightmid">
<p>news here</p>
<p>title then date</p>
<p>or</p>
<p>however you</p>
<p>want it</p>
<p>so yeah</p>
<p>news - the layout now expands </p>
<p>lol</p>
<p> </p>
<p>pretty..</p>
<p> </p>
<p> </p>
<p> </p>
<p>.. big </p>
</div>
<div><img src="newsbot.png" /></div>
<div id="rightbot">
<p> </p>
<p class="style1"> </p>
<p class="style1"> </p>
</div>
</div>
</div>
<table width="923" border="0" align="left" cellpadding="0" cellspacing="0">
<tr><td height="26"><img src="leftbot2.png" width="212" height="26" /><img src="contentbot.png" /><img src="rightbot2.png" width="201" height="26" /></td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>

Edit: (added spoiler) &:

Ignore that now, even newer code (with classes):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">

</style>
</head>

<body>
<br />
<table align="center" width="923">
<tr>
<td>
<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div><img src="top.png" /></div></td>
</tr>
</table>
<div id="left">
<div><img src="navtop.png" /></div>
<div class="leftmid">
<p>Nav here</p>
<p> </p>
<p> </p>
<p>yes</p>
<p>it's all expandable</p>
<p>:D </p>
<p> </p>
</div>
<div><img src="navbot.png" /></div>
<div><img src="radiotop.png" /></div>
<div class="leftmid">
<p>Radio text</p>
<p>yeah baby </p>
<p>whatever</p>
<p>u</p>
<p>want</p>
<p>here</p>
<p>lolz</p>
<p> </p>
</div>
<div><img src="radiobot.png" /></div>
<div><img src="grouptop.png" /></div>
<div class="leftmid">
<p>harhar</p>
<p>mm</p>
<p>sexily expanding</p>
<p>woohoo </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div><img src="groupbot.png" /></div>
<div id="leftbot">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="middle">
<div><img src="contenttop.png" /></div>
<div class="contentmid">
<p>hi</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="right">
<div><img src="statstop.png" /></div>
<div class="rightmid">
<p>radio stats</p>
<p>here</p>
<p>yeah</p>
<p>ok?</p>
<p> </p>
<p>song and stuff</p>
<p>yeah</p>
<p>ok cool</p>
<p> </p>
<p>  </p>
</div>
<div><img src="statsbot.png" /></div>
<div><img src="linktop.png" /></div>
<div class="rightmid">
<p>link us</p>
<p>can</p>
<p>go</p>
<p>here</p>
</div>
<div><img src="linkbot.png" /></div>
<div><img src="newstop.png" /></div>
<div class="rightmid">
<p>news here</p>
<p>title then date</p>
<p>or</p>
<p>however you</p>
<p>want it</p>
<p>so yeah</p>
<p>news - the layout now expands </p>
<p>lol</p>
<p> </p>
<p>pretty..</p>
<p> </p>
<p> </p>
<p> </p>
<p>.. big </p>
</div>
<div><img src="newsbot.png" /></div>
<div id="rightbot">
<p> </p>
<p class="style1"> </p>
<p class="style1"> </p>
</div>
</div>
</div>
<table width="923" border="0" align="left" cellpadding="0" cellspacing="0">
<tr><td height="26"><img src="leftbot2.png" width="212" height="26" /><img src="contentbot.png" /><img src="rightbot2.png" width="201" height="26" /></td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>

Seen on http://youngmusicscene.co.uk/habboplex/

MrCraig

19-02-2008, 04:25 PM

try removing those two lines of code then and see what happens...

And validator is just w3 standards. nothing to do with coding working.

iUnknown

19-02-2008, 08:35 PM

Sorry... which lines?

MrCraig

19-02-2008, 09:12 PM

The

float: left;
position: relative;

That you thought might be the problem as i see how they could interfere.

iUnknown

19-02-2008, 10:16 PM

Now they aren't placed anywhere, so they're just ontop of each other instead of next to each other. Hmm :S