SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating and negative margins result in no wrap text. Why?

    Hi, I'm working on a responsive site (mobile first). I have pullquotes within my body copy, which, on the mobile layout appear at the end of my paragraph, which is what I want. When viewed on larger screens, I have the pull quotes floated to the right. BUT, I would like them also to be moved up so they are almost aligned with the top of the paragraph. But when I add a negative margin, it moves the quote up but the copy does not flow around it. How can I move the pullquote up while have the body copy flow around it?

    http://www.ashleykirk.ca/AB6/about.html

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,386
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't achieve both with floats because floats must come first in the html when you want content to wrap around. If you use position:relative and top:-150px then that will do nothing in essence because relative elements always occupy their original position. They just look as though they are somewhere else as the space they originally occupied is always preserved as though the element had not moved.

    If you instead use a negative top margin on the float this just drags the float on top of any content in the way. The content will not adjust because only content that follows a float is affected by the float as I mentioned earlier.

    The only option I can see is to either float the text and the pullquote but you would need to give both widths and of course the text will never wrap underneath. Or do similar with table-cell (ie8+).

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style typr="text/css">
    .row { display:table }
    .text, .pullquote {
    	display:table-cell;
    	vertical-align:top;
    }
    .pullquote {
    	border-left: 1px solid #CCCCCC;
    	color: #66D2A0;
    	font-size: 1.1em;
    	margin: 20px;
    	padding: 0 10px;
    	text-align: center;
    	width: 145px;
    }
    </style>
    </head>
    
    <body>
    <h1>IE8+ only</h1>
    <div class="row">
    		<p class="text">Welcome to Alderbuds Child Care Centre, a not-for-profit child care centre in the City of Toronto, licensed in accordance with the Day Nurseries Act. Choosing a quality child care program for your child is a very important decision, and we are pleased that you are interested in learning more about our centre.</p>
    		<p class="pullquote">We would love to meet you! To see the centre and learn more, <a href="contact.html">contact us</a> to setup a tour.</p>
    </div>
    </body>
    </html>


Tags for this Thread

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
  •