SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text will Not float-left of the image

    header is float right.
    txtleft if float left

    What I'm looking for is that the txtleft is to the left of the header image.

    Right now the text is to the left of the image but below the bottom horizontal line of the image. In other words, the text does not flow up the left side of the image?

    thanks . . . rick

    Code:
    <div id="maincontent">
        
        <div class="header">
    		<img src="css/images/fairwayhomes.jpg" name="slide" width="470" height="250" alt="picture slide show"/>
    	</div>
        <div class="txtleft">COTO DE CAZA
          Arguably the most eclectic collection of home styles and lifestyles. Set behind 24/7 guarded gates, Coto de Caza offers two excellent golf courses with many fairway home site communities and ultimate equestrian estates. The village is just as the namesake describes - a village, set among oak trees covered rolling hills with trails for 
          equestrian, hiking, mountain bike riding or just strolling along with friends. There is no Mello Roos taxes in the Village! The sports park holds many activities throughout the year complete with baseball diamonds, sand pit volleyball courts and much more. Don't miss The Coto de Caza 4th of July Parade, it a stunner every year. </div>
    css code

    Code:
    .header	{float:right;
    		display:block;																					 	position:relative;	/* IE bug fix*/
    		margin-bottom:5px;
    		margin-left:56%;
    }
    
    
    .txtleft       	{float:left;
    		margin-right:56%;
    		text-align:justify;
    		line-height:140%;
    		font-size: 90%;				/* info text above the map */
    		color:#FFF;
    		display: block;
    		width:auto;
    		position:relative;
    }

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Right now the text is to the left of the image but below the bottom horizontal line of the image
    From looking at the CSS it shows that you have margin-left:56%; on the right float and margin-right:56%; on the left float.
    Sounds like you've exceeded the available space and forced the left float to drop.

    On a side note: divs are block elements by default, you don't have to declare that in your styles. A float also generates a block box as well.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspected that.

    I tried changing the left-margin to 80% just to see the effect.

    The text did shrink to the left side of #maincontent but it did not flow to the top of the page.

    How do I fix this?

    Thanks . . . Rick

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your dealing with the box model here so you need to make sure that your total margins and content width do not exceed the available space.

    As it is, those 56% margins combined together made 112% of margins. You need to reduce them greatly!

    Set up some BG colors on the floats so you can see what their generated widths are or set a max-width on them. Floats are shrink wrap elements so their content determines their width when no width is set.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it fixed by placing elements above my #maincontent div and using these in my html page.

    .lessspace {margin-top:6%;}
    .smallspace {margin-top:8%;}
    .morespace {margin-top:12%;}

    It works really well.

    thanks . . . Rick


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
  •