13 Replies - 28404 Views - Last Post: 20 June 2011 - 03:28 PM

#1 newwebdev   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 20-June 11

How can I collapse borders for div tags?

Posted 20 June 2011 - 01:28 PM

I've a main div tag that includes 4 sub div tags (namely header, left, content, and footer). I want to separate the left and the content sections (div tags) with a border in between them. So I need to either put a right border for the left div, or a left border for the content div. Depending on the quantity of the material inside these sections, I get one of the following cases.

CASE I:

-------------------------------
| Header |
-------------------------------
| Left row 1 || Content row 1 |
| Left row 2 || |
| Left row 3 | |
| | |
-------------------------------
| Footer |
-------------------------------


CASE II:

-------------------------------
| Header |
-------------------------------
| Left row 1 || Content row 1 |
| || Content row 2 |
| | Content row 3 |
| | |
-------------------------------
| Footer |
-------------------------------


Here is how my CSS file looks like:
div.left{
  float:left;
  border-right:1px solid gray;
  border-collapse:collapse;
  width:160px;
  margin:0;
  padding:1em;
  }

div.content{
  margin-left:190px;
  border-left:1px solid gray;
  border-collapse:collapse;
  padding:1em;
  }



Is This A Good Question/Topic? 0
  • +

Replies To: How can I collapse borders for div tags?

#2 newwebdev   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 20-June 11

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 01:35 PM

Sorry, the figure looks messy. I'm providing an image this time to sketch the problem

Attached File(s)

  • Attached File  1.bmp (163.82K)
    Number of downloads: 798
  • Attached File  2.bmp (163.82K)
    Number of downloads: 390

Was This Post Helpful? 0
  • +
  • -

#3 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 01:46 PM

You should post your HTML and full CSS to better help you figure out where your problem lies...usually you should start with the following:

html, body
{
    height:100%;
}



This will set the height of the html and body tags so your div tags know what height to calculate against.

Edit: reading your post again (read it hastily), you might just set the border of one or the other to none if all you are trying to do is have a single border between the two areas.

This post has been edited by souptoy: 20 June 2011 - 01:49 PM

Was This Post Helpful? 0
  • +
  • -

#4 newwebdev   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 20-June 11

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 02:02 PM

View Postsouptoy, on 20 June 2011 - 01:46 PM, said:

Edit: reading your post again (read it hastily), you might just set the border of one or the other to none if all you are trying to do is have a single border between the two areas.


If I put only a single border (either right to the LEFT div, or left to the CONTENT div), then I'm having a short vertical border that doesn't go all the way down to the footer area.

Here is my complete CSS file:

body {
	//font-family: Arial, Verdana, Helvetica, sans-serif;
	font: 0.8em/1em Arial, Verdana, Helvetica, sans-serif;
	/*background-image: url('../images/paper.gif');*/
}

h1{
	font-size: 1.2em;
}

div.container{
  width:995px;
  margin:0 auto;
  border:1px solid gray;
  line-height:150%;
}
div.header{
  padding:0.5em;
  color:white;
  background-color:gray;
  clear:left;
}
div.footer{
  padding:0.5em;
  color:black;
  background-color:Lavender;
  clear:left;
}

div.left{
  float:left;
  border-right:1px solid gray;
  border-collapse:collapse;
  width:160px;
  margin:0;
  padding:1em;
  }
  div.left ul {
	list-style: none;
  }
  div.left a {
	text-decoration: none;
  }
  #dateParag {
	font: 11px/15px Georgia, Times New Roman, Times, serif;
  }
div.content{
  margin-left:190px;
  border-left:1px solid gray;
  border-collapse:collapse;
  padding:1em;
}

.note{
  font: 12px/15px Arial, Verdana, Helvetica, sans-serif;
}



This post has been edited by newwebdev: 20 June 2011 - 02:05 PM

Was This Post Helpful? 0
  • +
  • -

#5 BiffBaffBoff   User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 02:04 PM

Hi there,

As souptoy suggested, please post your full code or a link to the website, that way we can help you better.
Was This Post Helpful? 0
  • +
  • -

#6 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 02:05 PM

Again, post your full HTML and CSS...sounds like a height issue but we need more to work with.
Was This Post Helpful? 0
  • +
  • -

#7 newwebdev   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 20-June 11

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 02:16 PM

Okay, here is what I got from W3's web site (which has the same problem).
BTW, I'm testing this with FireFox.

<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
border-right:1px solid gray;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
//border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net!</p>
<p>W3Schools - The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net!</p>
</div>

<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>

</body>
</html>




This post has been edited by newwebdev: 20 June 2011 - 02:17 PM

Was This Post Helpful? 0
  • +
  • -

#8 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 02:28 PM

First off, W3Schools is horrible. See here.

Next, you need to make sure you validate against W3C here.

Finally, here's a solution that works in Chrome 12, Firefox 4, and IE 7/8 (9 should work but can't test on this box)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        html, body
        {
            height:100%;
        }
        div.container
        {
            width:100%;
            margin:0px;
            border:1px solid gray;
            line-height:150%;
        }
        div.header,div.footer
        {
            padding:0.5em;
            color:white;
            background-color:gray;
            clear:left;
        }
        h1.header
        {
            padding:0;
            margin:0;
        }
        div.left
        {
            float:left;
            width:160px;
            /*border-right:1px solid gray;*/
            margin:0;
            padding:1em;
        }
        div.content
        {
            margin-left:190px;
            border-left:1px solid gray;
            padding:1em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="header">W3Schools.com</h1>
        </div>
        <div class="left">
            <p>
                "Never increase, beyond what is necessary, the number of entities required to explain
                anything." William of Ockham (1285-1349)</p>
        </div>
        <div class="content">
            <h2>
                Free Web Building Tutorials</h2>
            <p>
                At W3Schools you will find all the Web-building tutorials you need, from basic HTML
                and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
            <p>
                W3Schools - The Largest Web Developers Site On The Net! The Largest Web Developers
                Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers
                Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers
                Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers
                Site On The Net! The Largest Web Developers Site On The Net!</p>
            <p>
                W3Schools - The Largest Web Developers Site On The Net! The Largest Web Developers
                Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers
                Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers
                Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers
                Site On The Net! The Largest Web Developers Site On The Net!</p>
        </div>
        <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
    </div>
</body>
</html>




As stated before, this is a height issue. Make sure you always set your DOCTYPE and character encoding.

This post has been edited by souptoy: 20 June 2011 - 02:29 PM

Was This Post Helpful? 0
  • +
  • -

#9 BiffBaffBoff   User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 02:43 PM

Actually the problem you got in the the w3Schools website is that in the code you posted, you have a border right to your left div which is not needed and the left border for the content div has // next to it for some reason? If you removed those it'll work fine.

But yes, dont use w3schools as its terrible.
Was This Post Helpful? 1
  • +
  • -

#10 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 02:51 PM

Either solution will work. Depends on how you want to tackle the problem. Points to Biff for helping out :)

This post has been edited by souptoy: 20 June 2011 - 02:52 PM

Was This Post Helpful? 0
  • +
  • -

#11 newwebdev   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 20-June 11

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 03:06 PM

View Postsouptoy, on 20 June 2011 - 02:28 PM, said:

        div.left
        {
            float:left;
            width:160px;
            /*border-right:1px solid gray;*/
            margin:0;
            padding:1em;
        }
        div.content
        {
            margin-left:190px;
            border-left:1px solid gray;
            padding:1em;
        }



As stated before, this is a height issue. Make sure you always set your DOCTYPE and character encoding.



It looks like instead of having a right border for the LEFT div, you have a left border for the CONTENT div. If I change your code to the following, then I'm still having the same problem.

        div.left
        {
            float:left;
            width:160px;
            border-right:1px solid gray;
            margin:0;
            padding:1em;
        }
        div.content
        {
            margin-left:190px;
            padding:1em;
        }



This is important because my web page will be dynamic, and depending on the amount of content I'll display either the left or the content section will have a taller height.

This post has been edited by newwebdev: 20 June 2011 - 03:08 PM

Was This Post Helpful? 0
  • +
  • -

#12 BiffBaffBoff   User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 03:10 PM

It's because the content div has more height than the left div. Thats why you apply the border to the content div as it has more height and you still get the same effect. The border stops because thats where the left div's height ends.

Edit: One way to "cheat" is to apply both a border right for the left div and a border left for the content div and have the two element's line-up.

div.left
{
float:left;
width:160px;
border-right: 1px solid grey;
margin:0;
padding:1em;
}
div.content
{
margin-left:192px;
border-left:1px solid gray;
padding:1em;
}

This post has been edited by BiffBaffBoff: 20 June 2011 - 03:15 PM

Was This Post Helpful? 0
  • +
  • -

#13 BiffBaffBoff   User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 03:25 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
div.container {
	width:100%;
	margin:0px;
	border:1px solid gray;
	line-height:150%;
}
div.header, div.footer {
	padding:0.5em;
	color:white;
	background-color:gray;
	clear:left;
}
h1.header {
	padding:0;
	margin:0;
}
div.left {
	float:left;
	width:160px;
	/*border-right: 1px solid grey;*/
	margin:0;
	padding:1em;
}
div.content {
	margin-left:190px;
	/*border-left:1px solid gray;*/
	padding:1em;
}
</style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1 class="header">W3Schools.com</h1>
  </div>
  <div class="left">
    <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
    <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
    <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
    <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
    <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
    <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
  </div>
  <div class="content">
    <h2>Free Web Building Tutorials</h2>
    <p>At W3Schools you will find all the Web-building tutorials you need,
      from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
    <p>W3Schools - The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net!</p>
    <p>W3Schools - The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net! The Largest Web Developers Site On The Net!</p>
  </div>
  <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    
$(function(){
	var leftHeight = $("div.left").height();
	var contentHeight = $("div.content").height();
	
	if(leftHeight > contentHeight) {
		$("div.left").css({"border-right" : "1px solid gray" });	
	}
	else {
		$("div.content").css({"border-left" : "1px solid gray" });
	}
});

    
    
    </script>
</html>




Alternatively you could use a javascript solution with jquery although this wont work in browsers that have javascript disabled, which is not many nowadays.

This post has been edited by BiffBaffBoff: 20 June 2011 - 03:44 PM

Was This Post Helpful? 0
  • +
  • -

#14 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: How can I collapse borders for div tags?

Posted 20 June 2011 - 03:28 PM

Biff is correct...to further that thought. You can also set the height of the content to be a certain minimum height. This isn't compatible with certain versions of IE.

div.content 
{
    min-height:[whatever size];
}


This post has been edited by souptoy: 20 June 2011 - 03:30 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1