Printable View
Hey, someone recently coded my layout and it's not working properly:
http://www.xeoro.net/_skyhabv51/
the 3rd box on the left keeps going down.
also you have to put a set amount of content in the main box otherwise there will be a gap at the end.
+rep to any help :)
Just put the main content aria div below the rest of the left aligned ones, You have the first two before it, the next oens after, so there automaticaly clearing the bottom of the content aria div which for the lower ones is above em :)
Ok, I'll do that tomorrow but I still think there's the problem of the gap but I'll update tomorrow.
Thanks.
In firefox theres a gap between the second and 3rd box, which is to large and doesnt fit? i though that was what the problem is. I then described the solution.
Aka, it now
It theoerticaly fixed, aka i moved a few div layers aroundHTML Code:<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div align="center">
<div id="conttop"></div>
<div id="container">
<div id="boxcont">
<div id="banner"></div>
<div id="rstatstop"></div>
<div id="rstats">
The really cool radio stats <strong>would</strong> go here.
</div>
<div id="rstatsbot"></div>
<div id="navtop"></div>
<div id="ctop"></div>
<div class="leftboxes">
The really cool nav <strong>would</strong> go here.
</div>
<div id="maincontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd asdasd .</p>
<br /><br />
</div>
<div class="leftbottom"></div>
<div id="lupdates"></div>
<div class="leftboxes">
The really cool updates <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="contentbot"></div>
<div id="rplayer"></div>
<div class="leftboxes">
The really cool radio player <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="sstats"></div>
<div class="leftboxes">
The really cool site stats <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
</div>
</div>
<div id="contbot"></div>
</div>
</body>
</html>
(probably wrong as i didnt check and you div hyerachie is messed up, so i may have dumped it in the wrong place)HTML Code:<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div align="center">
<div id="conttop"></div>
<div id="container">
<div id="boxcont">
<div id="banner"></div>
<div id="rstatstop"></div>
<div id="rstats">
The really cool radio stats <strong>would</strong> go here.
</div>
<div id="rstatsbot"></div>
<div id="navtop"></div>
<div id="ctop"></div>
<div class="leftboxes">
The really cool nav <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="lupdates"></div>
<div class="leftboxes">
The really cool updates <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="contentbot"></div>
<div id="rplayer"></div>
<div class="leftboxes">
The really cool radio player <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="sstats"></div>
<div class="leftboxes">
The really cool site stats <strong>would</strong> go here.
</div>
<div class="leftbottom"></div> <div id="maincontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd asdasd .</p>
<br /><br />
</div>
</div>
</div>
<div id="contbot"></div>
</div>
</body>
</html>
Seems to have sorted one problem out but created another:
http://www.xeoro.net/_skyhabv51fix/
Code:<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div align="center">
<div id="conttop"></div>
<div id="container">
<div id="boxcont">
<div id="banner"></div>
<div id="rstatstop"></div>
<div id="rstats">
The really cool radio stats <strong>would</strong> go here.
</div>
<div id="rstatsbot"></div>
<div id="navtop"></div>
<div id="ctop"></div>
<div class="leftboxes">
The really cool nav <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="lupdates"></div>
<div class="leftboxes">
The really cool updates <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="rplayer"></div>
<div class="leftboxes">
The really cool radio player <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="sstats"></div>
<div class="leftboxes">
The really cool site stats <strong>would</strong> go here.
</div>
<div class="leftbottom"></div> <div id="maincontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd asdasd .</p>
<br /><br />
</div>
<div id="contentbot"></div>
</div>
Now, bottom of container missing and big gap:
http://www.xeoro.net/_skyhabv51fix/
Lol, oops i forgot to move the top down with it :p I think it put it in the right place, Make sure the two divs aint set to clear anything though, or it will sit below the side ones all together, also make sure the left bar elements are all floated correctlyQuote:
Originally Posted by Xeoro
HTML Code:<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div align="center">
<div id="conttop"></div>
<div id="container">
<div id="boxcont">
<div id="banner"></div>
<div id="rstatstop"></div>
<div id="rstats">
The really cool radio stats <strong>would</strong> go here.
</div>
<div id="rstatsbot"></div>
<div id="navtop"></div>
<div class="leftboxes">
The really cool nav <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="lupdates"></div>
<div class="leftboxes">
The really cool updates <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="contentbot"></div>
<div id="rplayer"></div>
<div class="leftboxes">
The really cool radio player <strong>would</strong> go here.
</div>
<div class="leftbottom"></div>
<div id="sstats"></div>
<div class="leftboxes">
The really cool site stats <strong>would</strong> go here.
</div>
<div class="leftbottom"></div> <div id="ctop"></div> <div id="maincontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd asdasd .</p>
<br /><br />
</div>
</div>
</div>
<div id="contbot"></div>
</div>
</body>
</html>
Kind of there :P
http://www.xeoro.net/_skyhabv51fix/
Problems all sorted now.
Thanks Carl, +Rep.