CODEWITHSUNDEEP
htmlcssalignment
IconixM
IconixM

Reputation: 13

Having 2 responsive Divs Side By side

So basically I am trying to make a page with 2 responsive columns, the same size side by side and instead of using px for measurement I'm sizing them using percentage. No matter what I do, setting both divs to have a margin of 5% and width of 40% they should sit side by side in a container with 'display: inline-block'. But for some reason it's not.

Here's the J-Fiddle demonstrating my issue. I have content above and below these divs on the page I'm working on... so they can't interfere with that, using, declaring float positions just seems to complicate things further.

http://jsfiddle.net/avh9s6pa/

If you guys could help I'd really appreciate it. It'll be something simple no doubt, but it's driving me nuts.

.post-reg-columns {
    width: 100%;
    display:block;

}

.firstcolumn {
    display: inline-block;
    max-width: 40%;
    margin:5%;
    padding:10px;


}

.firstcolumn button {

    color: #fff;
    background-color: #6496c8;
    text-shadow: -1px 1px #417cb9;
    border: none;
    font-size: 1.4em;
    font-family: 'Bree Serif', serif; 
    font-weight:bold;
    width: 100%;
    padding:15px;

}

.firstcolumn button:hover {
    background-color: #416386;

    }

.secondcolumn {
    display: inline-block;
    background:#fff7ca;
    max-width: 40%;
    margin:5%;
    padding:10px;

}



<div class="post-reg-columns">
        <div class="firstcolumn">
            <div class="title2"> Basic Listing </div>
            <a href="http://google.com"><button>Test Button</button></a>
            ewfwefw efwefwefw fwefwef wefwefwef wefwefwe fwefwef wefefw efwe fefwefwefw eiofj erio jweriojgjphi owriog jerioj gerijg ejfwefwef wefj weijfwe jfjiw efjwej wef weijf hello this is a test blah blah blah! My name is Chris Mayberry and this is a test
        </div>  

        <div class="secondcolumn">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod sollicitudin magna, sed placerat dui pretium quis. Vivamus sit amet velit nisi. Etiam consectetur mauris ligula, id fermentum felis fermentum ac. Phasellus pharetra a lorem ac dictum. Nullam vitae tempor ex. Mauris in vehicula augue. Maecenas sit amet porttitor enim, eu vehicula orci. Aliquam id nisl non sem mattis varius in sed nulla. Nulla ultrices fringilla erat, vitae tincidunt turpis malesuada vitae. Cras vehicula ex at arcu eleifend cursus. Sed varius dignissim risus eu fringilla.


        </div> 

    </div>

Upvotes: 1

Views: 2448

Answers (2)

CodeRomeos
CodeRomeos

Reputation: 2448

As per your code, both divs have 40% width which means total 80%. Further, 5% margin which mean 5*4 =20%. So total becomes 100% here. And in your second div it has also 5% margin which force it to break as (100%+20%) there is no more space. You need to remove margin:5%; from .firstcolumn.

Check this fiddel

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7721

Remove margin:5%; from .firstcolumn class.

Demo here

Update answer

.post-reg-columns {
    width: 100%;
    display:block;
    margin:5%
}

Demo Here

Upvotes: 0

Related Questions