CODEWITHSUNDEEP
css
antonjs
antonjs

Reputation: 14328

Two columns and one footer divided by Border (Individual sides) using css

I want to create a robust css style that works whith almost all browser (included IE7, firefox 3) that show me two columns and one footer divided by dotted border. I was trying to implement the following code, but I have one problem: when I apply border-right-style:dotted; to left class A and B are not at the same horizontal level. please halp me to fix the css style.

Click here for the current example.

HTML 

<div class="container">
  <div clas="left">A</div>
  <div class="right">B</div>
  <div class="footer">C</div>
</div>

CSS

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
} 
.left{
    background:#ddd;
    float: left;
    width: 50%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 50%;
}
.footer {
    background: none repeat scroll 0 0 #eef;
    clear: both;
    border-top-style:dotted;
}

Upvotes: 1

Views: 549

Answers (8)

sandeep
sandeep

Reputation: 92853

@Antojs; padding & border add width to the element if the element in percentage it's create problem. So; can give width to one like this:

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
}
.left{
    background:#ddd;
    float: left;
    width: 50%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    overflow:hidden;
}

Now in .right if you give border & padding it's not effect anything & you can also use css3 box-sizing: border-box; but it's not supported by IE7

check this fiddle http://jsfiddle.net/euYTQ/30/

Upvotes: 1

Kokos
Kokos

Reputation: 9121

This is because 50% + 50% + 1px(the border) is higher than 100%. If your .container isn't going to change width's you could give them both a fixed pixel value.

However if your .container is going to change width's you could try adding another element that contains the border alone like so:

.border {
    height:100%;
    width:0;
    border-left:3px dotted #000;
    position:absolute;
    left:50%;
    top:0;
}

Don't forget to give .container a position:relative;.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253485

The problem that you're experiencing is that the border of the element is not contained within the defined width of that element; so the element is 50% of its parents width, but with an additional width added by the border.

If you reduce the width of the elements to, for example, 48%, then it seems to work as you'd like:

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
} 
.left{
    background:#ddd;
    float: left;
    width: 48%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 48%;
}

JS Fiddle demo.

Edited with update,

You could, for Firefox and Chromium (FF5.x and Chromium 12.x on Ubuntu 11.04) use:

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box; /* Left this in, but it doesn't seem to work... */
}

JS Fiddle demo.

Which incorporates the border width into the width of the element; with this approach you could retain the width: 50%; on the elements and borders would sort themselves out. Unfortunately it doesn't work on Opera or, presumably, IE.

Upvotes: 3

Jean-Charles
Jean-Charles

Reputation: 1720

Put your div right in the div left

 <div class="left">section left
        <div class="right">section right</div>
    </div>

and change a little the css

.left{
    background:#ddd;
    float: left;
    width: 50%;       
}
.right {
    background:#eee;
    float: right;
     border-left-style:dotted;  
}

Example : http://jsfiddle.net/euYTQ/28/

Upvotes: 0

Aleks G
Aleks G

Reputation: 57346

The reason A and B are on different levels is because they don't fit into one width. You have them each declared with width: 50% but one of the also has a border. Border width is added to the width of the div - thus the two divs plus the border don't fit into horizontal spacing.

For example, try putting width: 49% on each of them - and you'll see the difference. This is not ideal, as you don't always know the width of the viewport. If you can work with exact pixel widths, it would be easier. Try this CSS for a change:

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
} 
.left{
    background:#ddd;
    float: left;
    width: 374px;
    border-right:dotted 2px black;
}
.right {
    background:#eee;
    float: right;
    width: 374px;
}
.footer {
    background: none repeat scroll 0 0 #eef;
    clear: both;
    border-top-style:dotted;
}

Upvotes: 2

Alistair Laing
Alistair Laing

Reputation: 973

http://jsfiddle.net/euYTQ/18/

50% and 50% = 100% so no space for the border.

Upvotes: 0

James Allardice
James Allardice

Reputation: 166041

The problem is that the border adds width to the div with .left. As the container div appears to be of fixed width, you could simply give the .left and .right elements fixed width values too (or reduce their percentage widths), and make .left slightly narrower:

.left{
    background:#ddd;
    float: left;
    width: 372px;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 375px;
}

Here's an updated fiddle. I would also suggest reading up on the box model to get an idea of how borders, padding etc. add on to width.

Upvotes: 0

Graeme Leighfield
Graeme Leighfield

Reputation: 3005

Fixed

http://jsfiddle.net/euYTQ/19/

What you've got to remember is that a border counts + of the % assigned.

So say you have a box thats 100px's wide (100%), and you put one side with a 1px border (1%), thats actually 101%. So in your case, it was breaking to the next line of space, hence giving you your error.

In my fix i simply set the right container to 49%. Which would be great for fluid solutions, or if you have a fixed layout, set it to a fixed value.

Remember, padding is the same too... it will count + of the assigned size or percent.

Hope this helps!

Upvotes: 3

Related Questions