SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question css div problem adding H tags

    So I have been hacking away trying to make an entire site out of CSS. The site is a hodgpodge of code found here and there, and I have learned a great deal...

    Here is the problem. I have a intro page with a photo on the right side and text on the left. The page works great!
    http://www.mankindinc.com/newsite/

    I am now going to make the secondary pages work (don't look at them now, they are old code).

    The problem I have is trying to figure out how to add additional H tags (H2, H3) in the content div and keep the photo on the upper right hand corner..... when I try, things seem to go haywire (photo aligns weird)

    Code so far HTML
    HTML Code:
    <div id="content">
       <h1>Community Based Support Living</h1>
       <p>
     	<img src="photo.jpg" alt="picture of house" class="rightimage"/>
     	Some very interesting copy here
       </p>
     </div>
    Css
    HTML Code:
    #content p{
       font-size: 12px;
       margin: 20px;
       text-align: Justify;
       }
       
       #content h1{
       font-size: 16px;
       color: #666666;
       padding: 0;
       margin: 20px;
       border-bottom: 1px solid #AAA;
       }
       
       #content h2{
       font-size: 14px;
       color: #003366;
       padding: 0;
       margin: 20px;
       }
       
       #content h3{
       font-size: 12px;
       color: #003366;
       padding: 0px;
       margin: 0px 20px;
       }
       
       .leftimage{
       float: left;
       margin-right: 10px;
       border: 1px solid #000000;
       }
       
       .rightimage{
       float: right;
       margin-left: 15px;
       border: 1px solid #000000;
       }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You don't need to do anything other than keep the floated content higher in the html than the content you want it to float alongside.

    Your floated image needs to be the first thing on the line then any h tags that follow will wrap around the image. You will need to remove the image from the paragraph its in and place it above any other text that you were trying to place alongside.

    Paul

  3. #3
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch!


Bookmarks

Posting Permissions

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