CODEWITHSUNDEEP
cssresponsive-design
iCyborg
iCyborg

Reputation: 4738

CSS alignment issue - not able to keep the div in same row when trying to make page responsive

I am trying to create a responsive design here http://bloggingtopsecrets.com/development/testblog/ but unfortunately not able to keep the "services" div elements in same row (all 3 should be in same row). Right now one of them is coming to new row which is making the .all-posts class to be on right hand side. How to fix this keeping the responsiveness of the theme ?

here is the jsfiddle code http://jsfiddle.net/icyborg7/b53zN/1/ (though you can check the whole site from above url too)

.all-posts {
background: none repeat scroll 0 0 #EBEBEB;
float: left;
margin: 0 0 0 11px;
width: 343px;
}
.services {
float: left;
margin-right: 20px;
margin-top: 30px;
text-align: center;
width: 358px;
}

Thanks

Upvotes: 0

Views: 103

Answers (2)

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

Hope this helps HTML 

     <div class="wrapper">
    <div class="services">
        <img src="http://bloggingtopsecrets.com/development/testblog/wp-content/uploads/2013/12/design.png">
            <h1>DESIGN</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
    <div class="services">
        <img src="http://bloggingtopsecrets.com/development/testblog/wp-content/uploads/2013/12/consultancy.png">
        <h1>CONSULTANCY</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
        <div class="services" >
        <img src="http://bloggingtopsecrets.com/development/testblog/wp-content/uploads/2013/12/maintenance.png">
        <h1>MAINTENANCE</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
        </div>

            <div class="all-posts">             

<h1 class="entry-title">
<a href="http://example.com" rel="bookmark">Example 0</a>
</h1>
<h1 class="entry-title">
<a href="http://example.com" rel="bookmark">Example 1</a>
</h1>
</div>

CSS

    .wrapper
{
    margin:0px auto;
    width:1200px;
    padding:0px;
}
.all-posts {
background: none repeat scroll 0 0 #EBEBEB;
float: left;
margin: 0 0 0 11px;
width: 343px;
}
.services {
float: left;
margin-right: 20px;
margin-top: 30px;
text-align: center;
    display:inline-block;
width: 358px;
}

Fiddle http://jsfiddle.net/b53zN/12/

Upvotes: 1

Ajith S
Ajith S

Reputation: 2917

Try,

<div class="services" style="display: inline-block; width: 20%;">
<div class="services" style="display: inline-block; width: 20%;">
<div class="services" style="display: inline-block; width: 20%;">

Remove float:left and change width: 125px !important in .service class

Upvotes: 1

Related Questions