Current location: Hot Scripts Forums » General Web Coding » CSS » Div Problems


Div Problems

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 09-07-08, 06:56 PM
connor connor is offline
Wannabe Coder
  
Join Date: Apr 2005
Location: Knob Noster, Mo
Posts: 228
Thanks: 1
Thanked 0 Times in 0 Posts
Lightbulb Div Problems
When you have 2 divs side by side Im floating one to the left and the other to the right how would I get the one to the right to align at the top instead of the center of the other div?
__________________
Connor Strandt
JCS Photography
www.JCStrandt.com
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 09-08-08, 08:32 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
You need to post the code so we can see what you are working with.
__________________
Jerry Broughton
Last edited by job0107; 09-08-08 at 08:37 AM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #3 (permalink)  
Old 09-10-08, 10:48 PM
connor connor is offline
Wannabe Coder
  
Join Date: Apr 2005
Location: Knob Noster, Mo
Posts: 228
Thanks: 1
Thanked 0 Times in 0 Posts
Exclamation
Here is my div functions
PHP Code:

    function half($title,$content,$ntitle,$ncontent){ // Must be used with nav

        echo "<div class='spacer'></div>";

        echo "<div style='clear: both;'></div>";

        echo "<div class='half-title'>&nbsp;&nbsp;".$title."</div>";

        echo "<div class='spacer'></div>";

        echo "<div class='half-content'>".$content."</div>";

        echo "<div class='spacer'></div>";

}

function nav($title,$content){ // Must be used with half

        echo "<div class='spacer'></div>";

        echo "<div class='nav-title'>&nbsp;&nbsp;".$ntitle."&nbsp;&nbsp;</div>";

        echo "<div class='spacer'></div>";

        echo "<div class='nav-content'>".$ncontent."</div>";

        echo "<div class='spacer'></div>";

} 
And here is my CSS
CSS Code:
  1. div.half-title{
  2.     width:408px;
  3.     color:#b9b9b9;
  4.     font-family:Verdana, Arial, Helvetica, sans-serif;
  5.     font-size:12px;
  6.     font-weight:bold;
  7.     background-image:url("images/half_block_title.gif");
  8.     background-position:center;
  9.     background-repeat:no-repeat;
  10.     padding-bottom:1px;
  11.     padding-top: 1px;
  12.     float:left;
  13. }
  14. div.half-content{
  15.     width:406px;
  16.     color:#333333;
  17.     font-family:Verdana, Arial, Helvetica, sans-serif;
  18.     font-size:10px;
  19.     border-width:1px;
  20.     border-style:solid;
  21.     border-color:#767676;
  22.     padding-bottom:1px;
  23.     float:left;
  24. }
  25. div.nav-title{
  26.     width:213px;
  27.     color:#b9b9b9;
  28.     font-family:Verdana, Arial, Helvetica, sans-serif;
  29.     font-size:12px;
  30.     font-weight:bold;
  31.     text-align:right;
  32.     background-image:url("images/nav_block_title.gif");
  33.     background-position:center;
  34.     background-repeat:no-repeat;
  35.     padding-bottom:1px;
  36.     padding-top: 1px;
  37.     top:auto;
  38.     float:right;
  39. }
  40. div.nav-content{
  41.     width:211px;
  42.     color:#333333;
  43.     font-family:Verdana, Arial, Helvetica, sans-serif;
  44.     font-size:10px;
  45.     text-align:right;
  46.     border-width:1px;
  47.     border-style:solid;
  48.     border-color:#767676;
  49.     padding-bottom:1px;
  50.     float:right;
  51. }
Now what I want is nav-title and nav-content to align at the top with half-title and half-content instead of the middle. Any ideas?
__________________
Connor Strandt
JCS Photography
www.JCStrandt.com
Last edited by UnrealEd; 09-11-08 at 02:26 AM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #4 (permalink)  
Old 09-11-08, 07:11 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
It won't float because the over all width is 1242px.
The average available screen width on a 1024 X 768 screen is about 900 to 950px.
The float property floats the element to the edge of the available width.
If there isn't enough space to float it into, then it will put it on the next line.
So, you need to either make your elements narrower or give the screen more width.
The only problem with making the screen wider is, you can't.
But you can make the available screen width wider by using a div wrapper set to the desired width.
The drawback of using this solution is that the user will need to scroll the screen to see the whole width.

But it can be done like this:
PHP 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>

<style>

div.half-title{

    width:408px;

    color:#b9b9b9;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:12px;

    font-weight:bold;

    background-image:url("images/half_block_title.gif");

    background-position:center;

    background-repeat:no-repeat;

    padding-bottom:1px;

    padding-top: 1px;

    float:left;

}

div.half-content{

    width:406px;

    color:#333333;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10px;

    border:1px solid #767676;

    padding-bottom:1px;

    float:left;

}

div.nav-title{

    width:213px;

    color:#b9b9b9;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:12px;

    font-weight:bold;

    text-align:right;

    background-image:url("images/nav_block_title.gif");

    background-position:center;

    background-repeat:no-repeat;

    padding-bottom:1px;

    padding-top: 1px;

    float:right;

}

div.nav-content{

    width:211px;

    color:#333333;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:10px;

    text-align:right;

    border:1px solid #767676;

    padding-bottom:1px;

    float:right;

}

</style>

</head>

<body>

<?php

function nav($title,$content,$ntitle,$ncontent){

   echo "<div class='half-title'>&nbsp;&nbsp;$title</div>

         <div class='half-content'>$content</div>

         <div class='nav-title'>&nbsp;&nbsp;$ntitle&nbsp;&nbsp;</div>

         <div class='nav-content'>$ncontent</div>";

}

echo "<div style='width:1242px;'>";

nav("Half_title","Half_content","Title","Content");

echo "</div>";

?>

</body>

</html>
__________________
Jerry Broughton
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #5 (permalink)  
Old 09-11-08, 07:14 PM
connor connor is offline
Wannabe Coder
  
Join Date: Apr 2005
Location: Knob Noster, Mo
Posts: 228
Thanks: 1
Thanked 0 Times in 0 Posts
There is no problem with the float on the left and right its not lining up where I want it to at the top of the page.
__________________
Connor Strandt
JCS Photography
www.JCStrandt.com
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #6 (permalink)  
Old 09-11-08, 07:25 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
I guess I don't understand.
You are going to have to explain it better.
__________________
Jerry Broughton
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #7 (permalink)  
Old 09-11-08, 07:35 PM
connor connor is offline
Wannabe Coder
  
Join Date: Apr 2005
Location: Knob Noster, Mo
Posts: 228
Thanks: 1
Thanked 0 Times in 0 Posts
I have attached a file on what it looks like, but I want "Navigation" to be up where it says "Hello" just on the right side of the page, it is on the right side, just not at the top where I want it.
Attached Images
File Type: jpg Untitled-1.jpg (7.8 KB, 75 views)
__________________
Connor Strandt
JCS Photography
www.JCStrandt.com
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #8 (permalink)  
Old 09-11-08, 07:49 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
Oh, you mean like this:
PHP 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>
<style>
div.half-title{
    width:408px;
    color:#b9b9b9;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    background-image:url("images/half_block_title.gif");
    background-position:center;
    background-repeat:no-repeat;
    padding-bottom:1px;
    padding-top: 1px;
    padding-left:10px;
    float:left;
}
div.half-content{
    width:406px;
    color:#333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    text-align:left;
    border:1px solid #767676;
    padding-bottom:1px;
    float:left;
}
div.nav-title{
    width:213px;
    color:#b9b9b9;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    text-align:right;
    background-image:url("images/nav_block_title.gif");
    background-position:center;
    background-repeat:no-repeat;
    padding-bottom:1px;
    padding-top: 1px;
    padding-right:10px;
    float:right;
}
div.nav-content{
    width:211px;
    color:#333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    text-align:right;
    border:1px solid #767676;
    padding-bottom:1px;
    float:right;
}
</style>
</head>
<body>
<?php
function nav($title,$content,$ntitle,$ncontent){
   echo "<div class='half-title'>$title</div>
         <div class='nav-title'>$ntitle</div>
         <br style='clear:both;' />
         <div class='half-content'>$content</div>
         <div class='nav-content'>$ncontent</div>";
}
nav("Half_title","Half_content","Title","Content");
?>
</body>
</html>
__________________
Jerry Broughton
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #9 (permalink)  
Old 09-13-08, 03:50 PM
connor connor is offline
Wannabe Coder
  
Join Date: Apr 2005
Location: Knob Noster, Mo
Posts: 228
Thanks: 1
Thanked 0 Times in 0 Posts
That just made my whole layout not look right and it still didn't fix my problem.
__________________
Connor Strandt
JCS Photography
www.JCStrandt.com
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks

« displaying text over image | div css »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] delay on html element properties? UnrealEd JavaScript 5 05-05-08 04:23 AM
[SOLVED] Change content in a DIV with links in another DIV s1yfa JavaScript 3 05-04-08 05:10 AM
Possitioning a DIV problems godonholiday HTML/XHTML/XML 2 08-30-06 03:27 PM
Can't Understand java script maverickminds JavaScript 1 07-16-06 02:23 PM
More problems with scrollable div Goon JavaScript 1 09-24-04 05:39 AM


All times are GMT -5. The time now is 11:29 AM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.