CODEWITHSUNDEEP
csshtmlcross-browser
user2779544
user2779544

Reputation: 429

position two div having border inside a div

I have a outer div having two inner divs in that one div(leftDiv) has a left-border of 1px this cause the right div to be moved out of the outerDiv.

CSS

.outerDiv{
    display: block;
    background: none repeat scroll 0% 0% #FFF;
    height: 400px;
    margin: 1%;     
    width: 97.5%;
    border: 1px solid #D6D6D6;
    box-shadow: 1px 0px 13px -2px #D6D6D6;
    border-radius: 6px;
}
.leftDiv{
    height: 400px;
    width: 65%;
    float: left;
    border-right: 1px solid #D6D6D6;
}
.rightDiv{
    height: 400px;
    width: 35%;
    float: left;
    background:orange;      
}

JSfiddle:LINK

I need the rightDiv to occupy the complete remaining space of outerDiv

Upvotes: 1

Views: 101

Answers (8)

Venzentx
Venzentx

Reputation: 487

See changes, make display:inline of the divs and float correctly.

All browsers friendly

JSFiddle

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41842

Add margin-left: -1px to .rightDiv. 

.rightDiv{
    height: 400px;
    width: 35%;
    float: left;
    background:orange;      
    margin-left:-1px;
}

I added -1px margin to .rightDiv to cutoff the border-right space of the .leftDiv. which is 1px.

Working Fiddle

OR

Using positioning - Fiddle

OR

Using display: table-cell - Fiddle

Upvotes: 1

Albzi
Albzi

Reputation: 15609

So many different answers here, all of which are good. I'm just posting this one just as another alternative, but maybe not necessarily the best option.

I added an :after, so no actual code was changed in the way it looked.

This way, you don't need to make anything bigger, or smaller. Just add something on top of the current .leftDiv.

Add

position:relative;

to .leftDiv's css.

Then add this to the CSS:

.leftDiv:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:1px;
    background:#333;
    z-index:9999;
}

JsFiddle

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15807

use box-sizing: border-box 

 .leftDiv{
            height: 400px;
            width: 65%;
            float: left;
            border-right: 1px solid #D6D6D6;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

DEMO

Upvotes: 0

Spedwards
Spedwards

Reputation: 4492

Because 65% + 35% + 1px is higher than 100%, it shifts down.

Lower one of the percents by one and you have it working!

http://jsfiddle.net/267SR/3/

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Add this rule

.outerDiv div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Example fiddle: http://jsfiddle.net/267SR/2/

box-sizing: border-box; will include the border size inside the width of the div elements

Upvotes: 0

Arjun
Arjun

Reputation: 1439

you can use css3's calc property to deal with percentage and pixels both at a time.. use: 

.leftDiv{
    height: 400px;
    width: calc(65% - 1px);
    float: left;
    border-right: 1px solid #D6D6D6;
}

check this: http://jsfiddle.net/267SR/1/

Upvotes: 0

Iulian Anghel
Iulian Anghel

Reputation: 421

Here are two solutions:

  1. add margin-left:-1px; to .rightDiv - this is very cross-browser or
  2. add box-sizing: border-box to .leftDiv - this is supported on IE8 and above + modern browsers

Upvotes: 1

Related Questions