+ Reply to Thread
Results 1 to 7 of 7

Thread: I require your help with divs!

  1. 07-04-2006 05:39 AM #1
    randomize's Avatar
    randomize
    randomize is offline     x10 Lieutenant randomize is an unknown quantity at this point
    Join Date
    Mar 2006
    Posts
    337

    I require your help with divs!

    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" "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" 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


    Click the animation above to go to the site where they are created!

    \ /
    (.) (.)
    /_
    \_____/
    The Evil Guy will take over all Signatures. Please help him to do this by copying and pasting him into your Signature.
    Thank you For Helping Evil!
    Reply With Quote Reply With Quote
  2. 07-04-2006 08:37 AM #2
    The_Magistrate's Avatar
    The_Magistrate
    The_Magistrate is offline     x10 Elder The_Magistrate is an unknown quantity at this point
    Join Date
    May 2005
    Location
    PA
    Posts
    559

    Re: I require your help with divs!

    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 by The_Magistrate; 07-04-2006 at 08:39 AM.
    Getting Started | Terms of Service | Paid Hosting | Forum Rules | Free Server Status | Banned Countries

    If I have helped you through one of my posts, please click the
    blue checkbox on the right below my avatar to add to my reputation.
    Reply With Quote Reply With Quote
  3. 07-04-2006 11:04 AM #3
    randomize's Avatar
    randomize
    randomize is offline     x10 Lieutenant randomize is an unknown quantity at this point
    Join Date
    Mar 2006
    Posts
    337

    Re: I require your help with divs!

    It still doesnt work, and I have replaced it with your examples!

    http://codingfreakz.x10hosting.com/v1

    Regards,
    Randomize


    Click the animation above to go to the site where they are created!

    \ /
    (.) (.)
    /_
    \_____/
    The Evil Guy will take over all Signatures. Please help him to do this by copying and pasting him into your Signature.
    Thank you For Helping Evil!
    Reply With Quote Reply With Quote
  4. 07-04-2006 11:33 AM #4
    The_Magistrate's Avatar
    The_Magistrate
    The_Magistrate is offline     x10 Elder The_Magistrate is an unknown quantity at this point
    Join Date
    May 2005
    Location
    PA
    Posts
    559

    Re: I require your help with divs!

    Try adding this to both of the CSS classes:
    Code:
    width : 49%;
    That should slide them next to each other.
    Getting Started | Terms of Service | Paid Hosting | Forum Rules | Free Server Status | Banned Countries

    If I have helped you through one of my posts, please click the
    blue checkbox on the right below my avatar to add to my reputation.
    Reply With Quote Reply With Quote
  5. 07-04-2006 01:45 PM #5
    randomize's Avatar
    randomize
    randomize is offline     x10 Lieutenant randomize is an unknown quantity at this point
    Join Date
    Mar 2006
    Posts
    337

    Re: I require your help with divs!

    still not happening!

    Don't know why, this is really frustrating!


    Click the animation above to go to the site where they are created!

    \ /
    (.) (.)
    /_
    \_____/
    The Evil Guy will take over all Signatures. Please help him to do this by copying and pasting him into your Signature.
    Thank you For Helping Evil!
    Reply With Quote Reply With Quote
  6. 07-04-2006 03:29 PM #6
    The_Magistrate's Avatar
    The_Magistrate
    The_Magistrate is offline     x10 Elder The_Magistrate is an unknown quantity at this point
    Join Date
    May 2005
    Location
    PA
    Posts
    559

    Re: I require your help with divs!

    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.
    Getting Started | Terms of Service | Paid Hosting | Forum Rules | Free Server Status | Banned Countries

    If I have helped you through one of my posts, please click the
    blue checkbox on the right below my avatar to add to my reputation.
    Reply With Quote Reply With Quote
  7. 07-05-2006 03:19 PM #7
    randomize's Avatar
    randomize
    randomize is offline     x10 Lieutenant randomize is an unknown quantity at this point
    Join Date
    Mar 2006
    Posts
    337

    Re: I require your help with divs!

    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


    Click the animation above to go to the site where they are created!

    \ /
    (.) (.)
    /_
    \_____/
    The Evil Guy will take over all Signatures. Please help him to do this by copying and pasting him into your Signature.
    Thank you For Helping Evil!
    Reply With Quote Reply With Quote
+ Reply to Thread
« Previous Thread | Next Thread »

Similar Threads

  1. php ? include require
    By dharmil in forum Scripts & 3rd Party Apps
    Replies: 20
    Last Post: 08-27-2011, 07:32 PM
  2. Can some1 tell me if this is the legal IF 2.0?
    By pensoftware in forum Computers & Technology
    Replies: 9
    Last Post: 04-05-2006, 12:33 PM
  3. Require Password Reset
    By JJ_Estes in forum Free Hosting
    Replies: 2
    Last Post: 11-13-2005, 11:32 AM
  4. Yay! DIVS! :D
    By Conor in forum Graphics & Webdesign
    Replies: 10
    Last Post: 09-24-2005, 07:54 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

x10hosting free hosting for the masses
dedicated servers