keeping divs on same line

PHPDevil · August 18, 2012

Im having problems with keeping two divs on the same line.

i tried to use all this float stuff but i hadn't had any luck.

<?php
print <<<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='SQL DEVIL" content='ZONE WARS' />
<meta name='Keywords' content='cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations'/>
<meta name='Description' content='CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS' />
<title>Zone Wars</title>
<style type='text/css'>
body
{
  background: #000000 url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left;
  margin:0 auto;
  text-align:center;
  overflow: hidden;
}
div.centered
{	
  text-align: left; 
  margin: 0 auto; 
  width: 800px; 
  border: 0px solid white; 
}
div.logintext
{
position: relative;
left: 500px;
background-color: black;
width:300px;
color: #fff;
}
#nav 
{
  width: 100%;
  float: left;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  background-color: #000000; 
}
#nav li 
{
  float: left; 
}
#nav li a 
{
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #333; 
}
#nav li a:hover 
{
  color: #c00;
  background-color: #000; 
}
div.logintop
{
  padding-top: 5px;
}
div.logintop2
{
  padding-top: 5px;
  float: left;
}
.clear { clear: both;}
input{
font:normal 14px Tahoma;
color:#ffffff;
height: 20px;
background-color: #1c1b1b;
border-color: #242424;
}
</style>

</head>

<body>
<div class='centered'>
  <!-- Navigation Bar start -->
  <ul id="nav">
     <li><a href="#">Home </a></li>
     <li><a href="#">Register</a></li>
     <li><a href="#">Forgot Password</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Terms and Conditions</a></li>
  </ul>
  <!-- Navigation Bar End -->

<img src='bannertest.jpg' />
<br />
<div class='logintop'>
<div align='right'>
<img src='toppart.png' />
</div>
</div>

<div class='logintext'>
<input type="text" name="username" id="username" size='35px' value="Enter your Username" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="password" name="password" id="password" size='35px' value="Enter your password" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<div class='logintop'>
<input type='submit' name='submit' /><input type="button" value="Forgot Password" />
</div>
</div>
<div align='right'>
<img src='topbot.png' />
</div>

<div class='logintop2'>
<div align='left'>
<img src='topabout.png' />
</div>
</div>
<div class='clear'></div>
</div>
</body>
</html>
EOF;

?>

mixmaster · August 18, 2012

Im having problems with keeping two divs on the same line.

i tried to use all this float stuff but i hadn't had any luck.

<?php
print <<<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='SQL DEVIL" content='ZONE WARS' />
<meta name='Keywords' content='cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations'/>
<meta name='Description' content='CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS' />
<title>Zone Wars</title>
<style type='text/css'>
body
{
  background: #000000 url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left;
  margin:0 auto;
  text-align:center;
  overflow: hidden;
}
div.centered
{    
  text-align: left; 
  margin: 0 auto; 
  width: 800px; 
  border: 0px solid white; 
}
div.logintext
{
position: relative;
left: 500px;
background-color: black;
width:300px;
color: #fff;
}
#nav 
{
  width: 100%;
  float: left;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  background-color: #000000; 
}
#nav li 
{
  float: left; 
}
#nav li a 
{
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #333; 
}
#nav li a:hover 
{
  color: #c00;
  background-color: #000; 
}
div.logintop
{
  padding-top: 5px;
}
div.logintop2
{
  padding-top: 5px;
  float: left;
}
.clear { clear: both;}
input{
font:normal 14px Tahoma;
color:#ffffff;
height: 20px;
background-color: #1c1b1b;
border-color: #242424;
}
</style>

</head>

<body>
<div class='centered'>
  <!-- Navigation Bar start -->
  <ul id="nav">
     <li><a href="#">Home </a></li>
     <li><a href="#">Register</a></li>
     <li><a href="#">Forgot Password</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Terms and Conditions</a></li>
  </ul>
  <!-- Navigation Bar End -->

<img src='bannertest.jpg' />
<br />
<div class='logintop'>
<div align='right'>
<img src='toppart.png' />
</div>
</div>

<div class='logintext'>
<input type="text" name="username" id="username" size='35px' value="Enter your Username" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="password" name="password" id="password" size='35px' value="Enter your password" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<div class='logintop'>
<input type='submit' name='submit' /><input type="button" value="Forgot Password" />
</div>
</div>
<div align='right'>
<img src='topbot.png' />
</div>

<div class='logintop2'>
<div align='left'>
<img src='topabout.png' />
</div>
</div>
<div class='clear'></div>
</div>
</body>
</html>
EOF;

?>

------------------------

Edited August 18, 2012 by mixmaster

mixmaster · August 18, 2012

which ones are you trying to keep on same line ?

PHPDevil · August 18, 2012

Sorry forgot to mention that.

This one:

<div class='logintop'>
<div align='right'>
<img src='toppart.png' />
</div>
</div>

<div class='logintext'>
<input type="text" name="username" id="username" size='35px' value="Enter your Username" onfocus="if(this.value==this.defaultValue)this.val  ue='';" onblur="if(this.value=='')this.value=this.defaultV  alue;"/>
<input type="password" name="password" id="password" size='35px' value="Enter your password" onfocus="if(this.value==this.defaultValue)this.val  ue='';" onblur="if(this.value=='')this.value=this.defaultV  alue;"/>
<div class='logintop'>
<input type='submit' name='submit' /><input type="button" value="Forgot Password" />
</div>
</div>
<div align='right'>
<img src='topbot.png' />
</div>

with this one:

<div class='logintop2'>
<div align='left'>
<img src='topabout.png' />
</div>
</div>
<div class='clear'></div>
</div>

The example with a url is http://www.makeapc.co.uk/test.php

Trying to keep the about banner on the same line as Login

Sign In

keeping divs on same line

Recommended Posts

PHPDevil

mixmaster

mixmaster

PHPDevil

Join the conversation

Browse

Activity

Hosting