CODEWITHSUNDEEP
csshtml
JasonDavis
JasonDavis

Reputation: 48973

Structuring Div's with CSS

I am trying to format a list of links with some css, I am having trouble though.

Please look at the image below...

enter image description here

<div class="tag-list">
    <a href="/tag/htaccess" >.htaccess</a>
    <a href="/tag/css-2" >css</a>
    <a href="/tag/database-2" >database</a>
    <a href="/tag/design-pattern">design pattern</a>
    <a href="/tag/mysql" >mysql</a>
    <a href="/tag/pdo" >PDO</a>
    <a href="/tag/php-2">php</a>
    <a href="/tag/server-2">server</a>
    <a href="/tag/web-design">web-design</a>
</div>

the code...

<style>
.tag-list a {

    color: #FFF; 
    text-transform: uppercase !important;
    background:#444;
    padding: 4px 6px 4px 6px;
    -moz-border-radius:3px;
    border-radius:3px;
    font:.8em Helvetica,Arial,sans-serif;
    margin: 1px 0px 0px 0px!important;
    display: block
}
</style>

My goal is to get this list of links to LOOK like that except they should only be the width of the text + padding instead of the full width. I have tried wrapping each link in the div, wrapping the div around the block of links like I have in the code above, If I wrap EACH link in a seperate div and remove the display: block it will show them as the proper width for each link and each on a new line, the only problem with that is that the margin does not work to let me space them out top and bottom.

I'm sure this is a simple fix for someone who knows more about css

jsbin.com link

Thanks for any help

Desired end result something like this... enter image description here

When adding float: left; clear: both; it makes my other divs show up under it like this...enter image description here

Upvotes: 2

Views: 92

Answers (4)

Jason McCreary
Jason McCreary

Reputation: 73031

These easiest thing to do would be at add a float property. This essentially shrink wraps elements. I've also added a clear property to get them to stack.

.tag-list a {
    color: #FFF; 
    text-transform: uppercase !important;
    background:#444;
    padding: 4px 6px 4px 6px;
    -moz-border-radius:3px;
    border-radius:3px;
    font:.8em Helvetica,Arial,sans-serif;
    margin: 1px 0px 0px 0px!important;
    display: block;
    float: left;
    clear: both;
}

I believe this is what you want: http://jsfiddle.net/thnT8/

Note: I'd encourage you to utilize better markup, such as an unordered list. Not only it is more semantic, but it would allow better hooks and avoid the use of floats.

UPDATE

Per the comments and my note above, here's the code: http://jsfiddle.net/84g6Q/1/

Upvotes: 3

kinakuta
kinakuta

Reputation: 9037

You can avoid using floats and clears by making it a list and changing the display of your anchor tags to inline-block: http://jsfiddle.net/hZLzZ/

Upvotes: 2

Mark Kramer
Mark Kramer

Reputation: 3214

You set the display to block, that means it will span across it's entire container. Just remove the display: block, float the elements left, add clear:both to get them to stack, and set the right padding to what you want:.

Here it is using your code: http://jsbin.com/ecoxay/2/edit

Upvotes: 1

Lucas
Lucas

Reputation: 10646

Replacing display: block; with:

float: left;
clear: both;

Should work.

Upvotes: 2

Related Questions