CODEWITHSUNDEEP
css
Asim Zaidi
Asim Zaidi

Reputation: 28354

aligning the buttons in the div

I have the issue where I want to show only 2 link buttons in the middle of blue div next to the image.

I want something like this

link1   {space} link2
{space}
link3    {space} link 4

currently it is like this

link1
link2
link3
link4

here is my code HTML

<div class="list-wrapper">
<div class="my-background">
    <div class="div1" style="float:left;"> </div>

        <span class="buttons">
         <a class="buttonStyling" href="test.com"><b>Link 1</b></a>
        <a class="buttonStyling" href="test.com"><b>Link 2</b> </a>
         <a class="buttonStyling" href="test.com"><b>Link 3</b> </a>
        <a class="buttonStyling" href="test.com"><b>Link 4</b> </a>
        </span>
</div>​

CSS

.my-background{
    background-color: #8af0fc;
    height: 204px;
}
.div1 {
    height: 205px;
    background:  url(http://www.dynamicdrive.com/dynamicindex4/lightbox2/horses.jpg) no-repeat;
    background-size: 435px;
    font-weight: normal;
    font-family: futura, arial, sans-serif;
    text-align: center;
    width:256px;
    margin-bottom: -20%;
}
.buttons .buttonStyling{

    display: block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    width: 35%;
    float:right;

}

.buttonStyling {

    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(225, 225, 225, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%);     color: #333;
}

here is jsfiddle

http://jsfiddle.net/cUWn8/4/

Upvotes: 1

Views: 279

Answers (3)

PseudoNinja
PseudoNinja

Reputation: 2856

Clean it up and set max widths on your .buttons span, Give this a try: jsFiddle

Upvotes: 0

Forty-Two
Forty-Two

Reputation: 7605

  1. Get rid of the floats
  2. Add display: inline-block
  3. Add margins for the spacing you need

Use this css

.buttons .buttonStyling{

    display: inline-block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    width: 35%;
   margin: 0 50px 50px 0; //or however much space you want
}

Here's the fiddle with the above changes

Upvotes: 2

tuff
tuff

Reputation: 5163

Try this: http://jsfiddle.net/cUWn8/5/

Basically, don't carpet-bomb everything with float and instead only apply it to the even buttons, that will produce the positioning you described. To get the vertical space between (1 and 2) and (3 and 4), add margin-top to buttons after #2. Also, all buttons need to be display: inline-block.

The key CSS changes are:

.buttons .buttonStyling { display: inline-block; }
.buttonStyling:nth-of-type(even) { float: right; }
.buttonStyling:nth-of-type(2) ~ .buttonStyling{ margin-top: 50px; }

plus the removal of existing float property on .buttons .buttonStyling and inline on div1.

Upvotes: 0

Related Questions