I require your help with divs!

randomize

randomize

New Member
Messages
674
Reaction score
0
Points
0
Hey guys,

I am currently rebuilding my website with divs, instead of tables.

However I have a problem.

I want the two small boxes to be inline with each other.

http://www.codingfreakz.x10hosting.com/v1/

look at the boxes. I want them beside each other.

Here is the css that I am using:

Code: 
body
{
 background-color: #333333;
 font-family: Tahoma;
 font-size: 12px;
 color: #FFFFFF;
 margin: 10px;
}
.navdiv
{
 background-color: #666666;
 position: absolute;
 width: 200px;
 height: auto;
 border: 1px solid #FFFFFF;
}
.contentdiv
{
 background-color: #666666;
 position: absolute;
 margin-left: 215px;
 width: 600px;
 height: inherit;
 border: 1px solid #FFFFFF;
}
.login
{
 background-color: #999999;
 width: 200px;
 border: 1px solid #000000;
 margin-left: 5px;
 position: relative;
}
.form
{
 background-color: #999999;
 border: 1px dashed #000000;
 font-size: 12px;
 font-family: Tahoma;
}
.ads
{
 background-color: #999999;
 width: 200px;
 border: 1px solid #000000;
 margin-left: 5px;
}
.news
{
 background-color: #999999;
 width: 200px;
 border: 1px solid #000000;
 margin-left: 210px;
 position: relative;
}

Here is the page code

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style/main.css" type="text/css" />
</head>
<body>
<div class="navdiv">
<b>Site Navigation</b>

</div>
<div class="contentdiv">
 <br />
 
 <div class="ads">
 <?php include("../ads.php");?>
 </div>
 
 <br />
 
 <div class="login">
 
 <strong>Login:</strong>
 
 <form>
 <input type="text" value="Username" class="form">
 <br />
 <input type="password" value="Password" class="form">
 <br />
 <input type="button" value="Login" class="form">
 </form>
 
 </div>
 
 <div class="news">
 <b>Site News</b>
 </div>
</div>
</body>
</html>

It is a bit of a long post, so could you please help me!

Regards,
Randomize
 
The_Magistrate

The_Magistrate

New Member
Messages
1,118
Reaction score
0
Points
0
Code: 
.login
{
 background-color: #999999;
 width: 200px;
 border: 1px solid #000000;
 margin-left: 5px;
 position: relative;
 float : left; 
}

.news
{
 background-color: #999999;
 width: 200px;
 border: 1px solid #000000;
 margin-left: 210px;
 position: relative;
 float : right;
}

Make sure you use another div with a style of clear : both; after both boxes. If you don't the bounding div might not be the right size. If you don't understand now, you'll get it when you see what happens to the bounding div.
 
Last edited:
The_Magistrate

The_Magistrate

New Member
Messages
1,118
Reaction score
0
Points
0
Try adding this to both of the CSS classes:
Code: 
width : 49%;

That should slide them next to each other.
 
randomize

randomize

New Member
Messages
674
Reaction score
0
Points
0
still not happening!

Don't know why, this is really frustrating!
 
The_Magistrate

The_Magistrate

New Member
Messages
1,118
Reaction score
0
Points
0
Your margins or padding may be too large, which would push the right div below the left one. Shrink the widths of both divs until they fit.
 
randomize

randomize

New Member
Messages
674
Reaction score
0
Points
0
Sorted that problem out!

Now I have another, the box beneath them is going beneath them! I might have set the CSS properties wrong or something,

http://codingfreakz.x10hosting.com/v1

You should see the updates, it is coming along allrite, and designing with divs is pretty easy I have discovered, except when your code doesnt ruddy work!

Regards,
Randomize
 
You must log in or register to reply here.
Top