Reputation: 28354
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
Upvotes: 1
Views: 279
Reputation: 2856
Clean it up and set max widths on your .buttons span, Give this a try: jsFiddle
Upvotes: 0
Reputation: 7605
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
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