SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spanning a Div across Multiple Divs with Text

    There may be no solution for the question or problem that I have, but if there is, it would be remarkable. CSS can do a lot. I hope that it can do this, but so far, I have sound no solution.

    I am looking for a way to span a single div containing an image or “blockquote” of sorts, across two text filled divs. I would like the text of these two divs the quote is spanning to flow nicely around the blockquote div. Ver y similar to what you would see in Illustrator or an InDesign Layout. I have an image below that illustrates what I’d like to do. CSS seems to be able to let you flow text around a div if that div is contained in another. But having the text of TWO divs flow around a single div seems impossible. Arbitrarily placing the div like this would also be hard. Can it be done, and if so, how?

    I understand this is just a programming issue on something relatively unimportant overall, but If someone could offer me a solution like this, I would be so happy that I literally would live a better life from here on out, because of just this. That is not an exaggeration.

    divexample.jpg

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Welcome to Sitepoint, Schweinsberg.

    Ver y similar to what you would see in Illustrator or an InDesign Layout.
    It's a very bad idea, and tak4e this from an Art director, to base web layouts on the capabilities of print layout aps. Just food for thought.

    Your attachment is pending, and I am on my way out but I am guessing what you want is something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    		blockquote {width: 40%; font-family: Georgia, "Times New Roman", Times, serif;font-style: italic;  font-size:120%; line-height:1.35;}
    
    blockquote {padding-left:3em; padding-right:2em; }
    blockquote p:first-child{text-indent:-2.3em }
    blockquote p{font:inherit; position:relative; padding:0; margin:0;}
    blockquote p + p{ margin-top:1em;}
    blockquote p:first-child:before { content: "“ ";font-size: 300%;font-weight: bold; line-height:.3; position:relative; top:.5em; color:#FE9D00;;left:.15em}
    blockquote p:last-child:after {content: "”";font-size: 300%; font-weight: bold;position:absolute; top:100%; color:#FE9D00; line-height:.0;   }
    blockquote p:first-child:after {margin-left:.7em; }
     		</style>
    	</head>
    	<body>
    <blockquote>
    	<p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    	<p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </blockquote>
    	</body>
    </html>
    This works with any number of P tags within the block quote. You must have at least one P tag, which is fine since blockquote must contain at least one block level child anyway.

    for higher cross browser compatibility you may need to use classes instead of css3 pseudo classes (such as first-child, last-child). think of this example as proof of concept.

    hope that helps

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello Schweinsberg, welcome to Sitepoint

    I haven't seen the screenshot yet but it sounds like you're looking for CSS columns or CSS regions.
    Columns divide a single div into columns and allow the text to flow between them.
    http://jsfiddle.net/nimbu/UprmV/

    Regions give you a lot more flexibility over the different blocks you want the text to flow between, however it's only experimental at this stage and supported in the WebKit nightly so can't really be used yet.
    http://adobe.github.com/web-platform...s/css-regions/

    Hope it helps,

  4. #4
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark, does the columns attribute work on Internet Explorer? Last time I checked it did not. Phenoix Iwill try your solution when I get home.

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    We had a quiz recently that did something similar to what you seemingly want to do: http://www.sitepoint.com/forums/show...nter-revisited Check the solutions in post #36.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by kohoutek View Post
    We had a quiz recently that did something similar to what you seemingly want to do: http://www.sitepoint.com/forums/show...nter-revisited Check the solutions in post #36.
    Yes I was going to suggest that quiz also and here was the code for my original.
    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 type="text/css">
    body { background:#ccc; }
    .wrap {
    	width:70%;
    	margin:auto;
    	overflow:hidden;
    	border:5px solid #000;
    	background:#fff;
    	position:relative;
    }
    .col1, .col2 {
    	width:48%;
    	float:left;
    	margin:1%;
    	background:#eee;
    	text-align:justify;
    }
    .col2 { float:right }
    p {
    	padding:5px;
    	margin:0 0 1em;
    }
    .col1:before, .col2:before {
    	float:right;
    	width:1px;
    	height:100px;
    	content:" ";
    }
    .col2:before { float:left }
    .col1 div {
    	float:right;
    	clear:right;
    	height:154px;
    	width:95px;
    }
    .col2 p:first-child:before {
    	float:left;
    	clear:left;
    	height:154px;
    	width:90px;
    	content:" ";
    }
    .col1 div img {
    	width:165px;
    	position:absolute;
    	border:10px solid #fff;
    	left:50%;
    	margin:0 0 0 -93px;
    	top:115px;
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="col1">
    				<div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus.  Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
    		</div>
    		<div class="col2">
    				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus.  Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
    				<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
    		</div>
    </div>
    </body>
    </html>
    It's only IE8+ at the moment and the element in the middle needs to be a fixed height and width. IE7 and under support could be achieved by using extra elements instead of the :before and :after rules (or an expression to imitate :after).

    It works by shimming floats and preserving space. The quiz has the full details and explanations.

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Schweinsberg View Post
    Mark, does the columns attribute work on Internet Explorer? Last time I checked it did not. Phenoix Iwill try your solution when I get home.
    No it doesn't work in ie9 or below. That wouldn't stop me from using it though.
    It's just a slightly different layout, making a page display the same in every browser should not be the aim.
    The aim should be to do the simplest thing possible to achieve the results you want, then save the complexity for the browsers that require it.
    If it's just aesthetic differences and the content is still accessible that's fine with me.

    In any case, you need to get the float(s) in the middle like in the quiz so columns won't help you here.


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
  •