Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1

Thread: Div Row Issues

  1. #1
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Unhappy Div Row Issues

    I hope someone here can lend a hand. This problem has been puzzling me for a while, and I am about to give up on the idea sadly... but if you have a solution, that would be great.

    I have a bunch of articles nested in a div... and another article an another div. I am needing two rows, but the capability to use margins on the articles for spacing.

    My problem arises when the elements are floating... the div container breaks down. I have tried using clear on the div, but that didn't do anything for me. table-cell works correctly, however I cannot use margins... and padding won't cut it.

    There is a live demo at http://www.diasporaart.com/da4/index.php

    Thank you in advance. ^_^

    The solution was to have the wrapper divs "overflow:auto;". That solved it.

    Some HTML
    Code:
    <div>
    <article class="skills_col">
    <header>
    <h3>Print</h3>
    </header>
    <ul>
    <li>Business Cards</li>
    
    <li>Brochures</li>
    
    <li>
    Programs</li>
    
    <li>
    Books</li>
    
    <li>
    Labels</li>
    
    <li>
    Signs</li>
    
    <li>
    Album Artwork</li>
    </ul>
    </article>
    
    <article class="skills_col">
    <header>
    <h3>Web</h3>
    </header>
    <ul>
    <li>Entertainment</li>
    
    <li>
    Web Presence</li>
    
    <li>
    eCommerce</li>
    
    <li>
    Social Networking</li>
    
    <li>
    SEO</li>
    </ul>
    </article>
    
    <article class="skills_col">
    <header>
    <h3>Branding</h3>
    </header>
    <ul>
    <li>Logos</li>
    
    <li>
    Letterheads</li>
    
    <li>
    Identities</li>
    
    <li>
    Promotional</li>
    
    <li>
    Style</li>
    </ul>
    </article>
    
    <article class="skills_col">
    <header>
    <h3>Collateral</h3>
    </header>
    <ul>
    <li>Invoicing</li>
    
    <li>
    Forms</li>
    
    <li>
    Email Templates</li>
    
    <li>
    Letterheads</li>
    
    <li>Digital</li>
    </ul>
    </article>
    
    <article class="skills_col">
    <header>
    <h3>Recording</h3>
    </header>
    <ul>
    
    <li>Live Concerts</li>
    
    <li>
    Studio Albums</li>
    
    <li>
    Speeches</li>
    
    <li>
    Foley</li>
    
    <li>
    Restoration</li>
    
    <li>
    Mixing</li>
    
    <li>
    Mastering</li>
    </ul>
    </article>
    
    <article class="skills_col">
    <header>
    <h3>&nbsp;</h3>
    </header>
    <ul>
    <li>Your Project</li>
    </ul>
    </article>
    </div>
    
    <div>
    <article class="skills_col">
    <header>
    <h3>Filler Row</h3>
    </header>
    <ul>
    <li>Filler text</li>
    </ul>
    </article>
    </div>
    Some CSS
    Code:
    section#uni-content div.uni-container div#content-c div {
    	width: 100%;
    	background: #00f;
    }
    
    section#uni-content div.uni-container div#content-c div article.skills_col {
    	width: 114px;
    	margin-left: 12px;
    	background: #f00;
    	float: left;
    }
    
    section#uni-content div.uni-container div#content-c div article.skills_col ul {
    	list-style: none;
    }
    Last edited by telekovar; 03-03-2012 at 10:18 AM. Reason: Resolved


 

Posting Permissions

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