CODEWITHSUNDEEP
htmlcss
eli.rodriguez
eli.rodriguez

Reputation: 490

complete border right in css

I have this HTML

.container_1
{
    width: 80%;
    border: 5px solid black;
    overflow: hidden;
}

.container_2
{
    float: left;
    border: 5px solid red;
    width: 100%;                    
}

.container_1
{
    width: 80%;
    border: 5px solid black;
    overflow: hidden;
}

.container_2
{
    float: left;
    border: 5px solid red;
    width: 100%;                    
}

<div class="container_1">
    <div class="container_2">
    Content 1
    </div>
    <div class="container_2">
    Content 2
    </div>    
</div>​

Fiddle http://jsfiddle.net/uZVnB/3/

The problem is that as you see in fiddle the border of .container_1 overlaps the border to the border of .container_2 , so is any form that show complete the border of both containers

Upvotes: 1

Views: 111

Answers (5)

Nagaraj Chandran
Nagaraj Chandran

Reputation: 228

Considering IE in mind, here is my solution.
The border will always be extra than the 100% width.

Here is the solution http://jsfiddle.net/uZVnB/41/
Hope this helps

Upvotes: 0

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

You can achieve it by using CSS attribute box-sizing:border-box;

SEE DEMO

CSS:

.container_1 {
    width:80%;
    border:1em solid;
    overflow: hidden;
}

.container_2 {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:100%;
    border:1em solid red;
}

Upvotes: 0

otakustay
otakustay

Reputation: 12395

  1. Remove float: left and width: 100%, since block element fills the entire width of its container, it works fine.
  2. If you have to use float: left style (although I don't think it is required since you have a width: 100% which makes float not behaving as it is defined), you could use box-sizing: border-box, but it only works for mordern browsers, lower version of IE does not support this property.
  3. You may also use position: absolute; left: 0; right: 0; to absolutely position it, but it also conflicts with float: left style and IE6 does not support it.

Upvotes: 0

NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5153

Change the width of .container_2 from 100% to 98%, and everything will be fine. When you set its width to 100%, naturally, it will expand to the maximum, and the borders will overlap.

Upvotes: 0

sandeep
sandeep

Reputation: 92803

Remove float & width from .container_2. Write like this:

.container_2
{
    border: 5px solid red;   
}

Check this http://jsfiddle.net/uZVnB/4/

Upvotes: 4

Related Questions