CSS Container Content Management

Discussion in 'CSS' started by gbabula, Nov 4, 2007.

  1. #1
    Is there anyway to break the text up into 3 equal groups? Or how can I break the box into 3 separate boxes that will display the content.

    [​IMG]

    The Html:

    <code>
    <div class="block2">
    <h2>
    Services
    </h2>

    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam blandit elementum lorem. Suspendisse potenti. Nunc tellus dolor,
    hendrerit nec, elementum faucibus, egestas mollis, dolor. Duis at erat. Nulla facilisi. Vestibulum leo massa, sodales ut, suscipit
    quis, rutrum vel, risus. Praesent ac nisl ac sapien porta semper. Duis pellentesque consequat velit. Fusce nibh massa, dictum in,
    imperdiet a, laoreet vel, enim. <b>Nam ullamcorper ligula quis lorem.</b> Integer hendrerit, libero a bibendum rhoncus, justo nibh gravida

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam blandit elementum lorem. Suspendisse potenti. Nunc tellus dolor,
    hendrerit nec, elementum faucibus, egestas mollis, dolor. Duis at erat. Nulla facilisi. Vestibulum leo massa, sodales ut, suscipit
    quis, rutrum vel, risus. Praesent ac nisl ac sapien porta semper. Duis pellentesque consequat velit. Fusce nibh massa, dictum in,
    imperdiet a, laoreet vel, enim. Nam ullamcorper ligula quis lorem. Integer hendrerit, libero a bibendum rhoncus, justo nibh gravida
    </p>
    </div>
    </code>

    The Css:
    <code>
    div.block2 {
    clear: both;
    background: #182752;
    color:#FFF;
    text-align:right;
    margin-top:10px;
    margin-bottom:10px;
    padding:8px;
    }
    </code>
     
    gbabula, Nov 4, 2007 IP
  2. JeffHood

    JeffHood Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Something like this?

    <style>
    	#divOne{
    		width:128px;
    		float:left;
    		padding:16px;
    		border:solid 1px black;
    	}
    	
    	#divTwo{
    		width:128px;
    		float:left;
    		padding:16px;
    		border:solid 1px black;
    	}
    	
    	#divThree{
    		width:128px;
    		float:left;
    		padding:16px;
    		border:solid 1px black;
    	}
    </style>
    
    <div>
    	<div id="divOne">blah blah</div>
    	<div id="divTwo">rah rah</div>
    	<div id="divThree">haw haw</div>
    </div>
    HTML:
    Borders added to show each element's position and add text formatting stuff.
     
    JeffHood, Nov 4, 2007 IP
  3. gbabula

    gbabula Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That's perfect, thank you Jeff that made my day a lot easier.
     
    gbabula, Nov 5, 2007 IP