Associate
- Joined
- 18 Oct 2002
- Posts
- 1,554
- Location
- Reading
Just having a bit of a play with a site I'm doing at the moment, but at the moment it's like I'm banging my head against a brick wall. basically here's the problem:
I have 2 DIV's, one floated left and one right. Unless I explicitly declare the height of each div to be the same (which I obviously don't want to do), I get nasty gaps like this when the content in either DIV flows to an extent where the DIV has to increase in size.
Relevant code:
HTML
CSS
files are also located at:
http://www.btinternet.com/~tobeone_355/hitdetect/
Any help with this would be much appreciated. Cheers.
I have 2 DIV's, one floated left and one right. Unless I explicitly declare the height of each div to be the same (which I obviously don't want to do), I get nasty gaps like this when the content in either DIV flows to an extent where the DIV has to increase in size.
Relevant code:
HTML
Code:
<body>
<div id="wrapper">
<div id="header">
<div id="login">
<fieldset>
<div id=inputstyle>
<label for="username">Username</label>
<input name="username" id="username" type="text" />
<br/>
<label for="password">Password</label>
<input name="password" id="password" type="text" />
<br/>
</div>
<div id=buttonstyle>
<input type="submit" value="log in"/>
</div>
<fieldset>
</div>
</div>
<div id="horinav">
<ul>
<li><a href="#">home</a></li>
<li class="adddiv"><a href="#">about</a></li>
<li class="adddiv"><a href="#">news</a></li>
<li class="adddiv"><a href="#">products</a></li>
<li class="adddiv"><a href="#">purchase</a></li>
</ul>
</div>
<div id="content">
<h2>About HitDetect</h1>
<p>Usu ex nominati conceptam, no quod vulputate definiebas eam. Tollit dicant epicurei ea sit, eos prima illud invenire et. Eu modo inani cetero pro. Tota fugit ea duo. At platonem principes mnesarchum sea, pri modus deleniti ut.</p>
<img src="Graphics/logo200.jpg"></img>
/* Random paragraphs */
</div>
<div id="nav">
<p>
<div class="box">
<h2>Breaking News...</h2>
<p>As HitDetect nears completion, forget your worries about getting scammed on Ebay!</p>
</div>
</p>
<p>
<div class="box">
<h2>Other News</h2>
<p></p>
</div>
</p>
</div>
<div id="footer">
<div id="footsig">
<p>web design by <a href="mailto:[email protected]?subject=HitDetect Website">Toby Walton</a></p>
</div>
</div>
</div>
</body>CSS
Code:
#nav {
width: 24%;
min-height: 500px;
float: right;
color: #FFFFFF;
margin: 0;
padding: 0;
background-color: #bdc6f6;
border-right: solid #6a6fab;
}
#content {
width: 74.9%;
min-height: 500px;
float: left;
color: #6a6fab;
background-color: #fffaee;
margin: 0px;
padding: 0px;
border-left: solid #6a6fab;
}files are also located at:
http://www.btinternet.com/~tobeone_355/hitdetect/
Any help with this would be much appreciated. Cheers.
