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 5 of 5
  1. #1
    me2
    me2 is offline
    New Coder
    Join Date
    Oct 2007
    Posts
    88
    Thanks
    8
    Thanked 3 Times in 3 Posts

    floating div breaks div

    the div classed incontent is broken when i put floating divs in it is there a way around it

    html
    Code:
    <div class="content">
    	<div class="roundtop">
    		<img src="/images/topleft.php" alt="" width="20" height="20"></img>
    		<span class="heading">test</span>
    	</div>
    <div class="incontent">
    <div class="forum_poster">test</div>
    <div class="forum_post">test</div>
    </div>
      <div class="roundbot">
    
       <img src="/images/botleft.php" alt="" width="20" height="20"></img>
       <div class="botborder"> </div>
      </div>
    </div>
    css
    Code:
    div.content{
    	position: relative;
    	top: -30px;
    	left: -8px;
    	padding-bottom: 10px;
    }
    div.content div.incontent{
     padding: 5px 15px;
     border-left: 2px solid rgb(50, 110, 50);
     border-right: 2px solid rgb(50, 110, 50);
     color:#111111;
     background-color: rgb(247, 247, 247);
     font-family: Calibri;
    }
    .roundtop{ 
     background: url(/images/topright.php) no-repeat top right;
     background-color: rgb(50, 110, 50);
     padding-bottom: 2px;
    }
    .roundbot{
     background: url(/images/botright.php) no-repeat top right;
    }
    div.botborder{
     height: 20px;
     background-color: rgb(247, 247, 247);
     border-bottom: 2px solid rgb(50, 110, 50);
     margin-left: 20px;
     margin-right: 20px;
     margin-top: -21px;
     position: relative;
     top: 0px;	
    }
    div.content span.heading{
     color: white;
     font-family: Verdana,Tahoma,Arial,Sans-Serif;
     font-size: 16px;
     font-weight: 600;
     text-transform: capitalize;
     letter-spacing: .5px;
    }

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Could you be more specific about what you mean by "incontent is broken when i put floating divs in it"?

    Pasting your code into a blank page looks OK except that the div with a class 'forum_post' just shows the first letter (t) rather than the word 'test'. The classes forum_poster and forum_post are not defined. Nothing is being explicitly floated.

    John Rostron

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    div.content div.incontent{
     padding: 5px 15px;
     border-left: 2px solid rgb(50, 110, 50);
     border-right: 2px solid rgb(50, 110, 50);
     color:#111111;
     background-color: rgb(247, 247, 247);
     font-family: Calibri;
    }
    You do realize that 1) you haven't set up a backup font family and 2) practically no one has Calibri except those that have Office 2007?

  • #4
    me2
    me2 is offline
    New Coder
    Join Date
    Oct 2007
    Posts
    88
    Thanks
    8
    Thanked 3 Times in 3 Posts
    Whoops i forgot to post this bit of css..

    Code:
    .forum_poster{
    	width: 20%;
    	float: left;
    	z-index: 3;
    }
    .forum_post{
    	width: 80%;
    	float: right;
    	z-index: 3;
    }
    Also Calibri was around in office 2003 i changed it to my default font at school and my home computer once i had used office 2007 but i would add a backup font.. would verdana look good

  • #5
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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