Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post

    Need Help With Floats!

    I'm trying to add a floating DIV [ this ] into the middle of a document [ this ] that already is full of floats and clears. It doesn't display properly, and wrecks the page. Here's my CSS document. Anyone know what I can do to fix this? The DIV is supposed to float to the right of the first paragragh but under the h1.

    Thanks in advance.
    - boko

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well it should come before that paragraph and just after the header and just make it float:right; the paragraph should wrap around it.

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    That's the thing. It totally warps the layout. This is what it looks like. It happens in both IE and Firefox.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for your CSS
    Code:
    /* Welcome to the CSS Document of the Harry Potter Encyclopedia. */
    
    /*-----------------------------------------------------------------------------------------------*/
    /*Main Styles*/
    body {
    margin:0px;
    padding-left:10px;
    background-color:#000000;
    font-family:arial,helvetica,sans-serif;
    color:#000000;
    font-size:14px;
    }
    
    DIV {
    }
    
    SPAN {
    }
    
    P {
    font-size:14px;
    }
    
    iframe {
    display:none;
    }
    
    
    /*-----------------------------------------------------------------------------------------------*/
    /*Header Styles*/
    
    h1,h2,h3,h4,h5,h6,h7 {
    font-weight:bold;
    }
    
    h1 {
    font-size:28px;
    text-align:left;
    }
    
    h2 {
    font-size:26px;
    text-align:left;
    }
    
    h3 {
    font-size:24px;
    text-align:left;
    }
    
    h4 {
    font-size:22px;
    text-align:left;
    }
    
    h5 {
    font-size:20px;
    text-align:left;
    margin-bottom:0px;
    }
    
    h6 {
    font-size:18px;
    text-align:left;
    margin-bottom:10px;
    margin-top:10px;
    }
    
    h7 {
    font-size:16px;
    text-align:left;
    }
    
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Link Styles */
    
    a:link {
    color:#800000;
    text-decoration:underline;
    }
    
    a:visited {
    color:#800000;
    text-decoration:underline;
    }
    
    a:active {
    color:#800000;
    text-decoration:none;
    }
    
    a:hover {
    color:#000000;
    text-decoration:underline;
    }
    
    a:visited:hover {
    color:#000000;
    text-decoration:underline;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Basic Styles */
    
    .floatleft {
    float:left;
    }
    
    .floatright {
    float:right;
    }
    
    .clear {
    clear:both;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Page-Specific Styles */
    
    /* -- -- -- -- -- -- -- -- -- -- -- -- -- */
    /* Home Page */
    
    .mainheader {
    text-align:center;
    }
    
    .rightmenu {
    font-size:12px;
    border: 1px black solid;
    background-color:#CCCCCC;
    width:150px;
    float:left;
    }
    
    .rightmenu .title {
    font-weight:bold;
    color:white;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
    background-color:#000066;
    padding-left:1px;
    padding-right:1px;
    }
    
    .rightmenu .searchtitle {
    font-weight:bold;
    color:white;
    border-bottom: 1px black solid;
    background-color:#000066;
    padding-left:1px;
    padding-right:1px;
    }
    
    .rightmenu p {
    margin:1px;
    }
    
    #updates p {
    margin-top:2px;
    margin-bottom:2px;
    }
    
    .updatetitle {
    font-weight:bold;
    text-align:left;
    border-bottom:1px solid black;
    margin-bottom:2px;
    padding-bottom:1px;
    }
    
    .updateinfo {
    text-align:right;
    font-style:italic;
    }
    
    /* -- -- -- -- -- -- -- -- -- -- -- -- -- */
    /* Book Pages */
    
    .lgbookcover {
    border:2px black solid;
    float:right;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Content Formatting */
    
    #header {
    margin:0px;
    padding:0px;
    }
    
    #castle_btm {
    margin-bottom:5px;
    float:left;
    }
    
    #interior {
    margin-left:166px;
    padding:10px;
    background-color:#FFFFFF;
    }
    
    #main {
    padding:5px;
    padding-top:0px;
    margin-bottom:7px;
    margin-top:0px;
    }
    #main p {
    margin:0;
    }
    #copy {
    background-color:#FFFFFF;
    text-align:center;
    padding:1px;
    }
    
    #copy P {
    font-size:12px;
    }
    
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Navigation Styles */
    
    #menu {
    background-color:#000033;
    width:150px;
    font-size:11px;
    clear:left;
    float:left;
    margin-bottom:10px;
    }
    
    #menu a:link {
    font-size:11px;
    color:#FFFFFF;
    text-decoration:none;
    }
    
    #menu a:visited {
    font-size:11px;
    color:#FFFFFF;
    text-decoration:none;
    }
    
    #menu a:active {
    font-size:11px;
    color:#99ccff;
    text-decoration:none;
    }
    
    #menu a:hover {
    font-size:11px;
    color:#99ccff;
    text-decoration:none;
    }
    
    #menu a:visited:hover {
    font-size:11px;
    color:#99ccff;
    text-decoration:none;
    }
    
    #menu ul {
    margin-left:0px;
    padding-left:0px;
    margin-bottom:0px;
    list-style:none;
    }
    
    #menu li {
    border-bottom:1px solid black;
    padding-left:2px;
    color:#FF9900;
    }

  • #5
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    Didn't work... What did you change? Just wondering.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It worked for me in FF. I made took out the position:absolute set a left margin to it set its background to white.

  • #7
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    It's about 10 pixels too far to the right for me.


  •  

    Posting Permissions

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