CODEWITHSUNDEEP
htmlcss
Shivam Mitra
Shivam Mitra

Reputation: 1052

Div borders overlap with float elements

I am trying to design a layout for a project. I have two div containers(leftnav and rightnav) which are floated on left and right. I have to divide the central part into two. "Mailbar" is the upper div in that central region. The problem is that applying borders to "mailbar" div overlaps with the floating div. I want to prevent it from overlapping.

#main {
  margin: 0px;
  height: 150px;
  border: 1px solid black;
}
#leftbar {
  float: left;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid black;
}
#rightbar {
  float: right;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid black;
}
#mailbar {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid black;
}
<body>
  <div id="main">
    <div id="leftbar"> </div>

    <div id="rightbar"> </div>

    <div id="mailbar"> </div>
  </div>
</body>

Upvotes: 5

Views: 1893

Answers (4)

Felix A J
Felix A J

Reputation: 6470

Remove width: 100%; and add overflow: auto; for #mailbar.

#main {
  margin: 0px;
  height: 150px;
  border: 1px solid black;
}
#leftbar {
  float: left;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid black;
}
#rightbar {
  float: right;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid black;
}
#mailbar {
  /*width: 100%;*/
  height: 50%;
  border-bottom: 1px solid black;
overflow: auto;
}
<body>
  <div id="main">
<div id="leftbar"> </div>

<div id="rightbar"> </div>

<div id="mailbar"> </div>
  </div>
</body>

Upvotes: 2

Maciej Paprocki
Maciej Paprocki

Reputation: 1379

If you have fixed container as in this case. You can just use position absolute.

See example below. 

#main {
	margin:0px;
	height:150px;
        position:relative;
	border:1px solid black;
}
#leftbar {
	float:left;
	width:250px;
	height:100%;
        position:absolute;
        left:0;
        top:0;
	overflow-y: auto;
	border-right: 1px solid black;
}

#rightbar {
	width:250px;
	height:100%;
        position:absolute;
        right:0;
        top:0;
	overflow-y: auto;
	border-left: 1px solid black;

}
#mailbar {
   
        left:250px;
        right:250px;
	position:absolute;
        border-bottom:1px solid #000;
        height:50%;
}
<body>
<div id = "main">
<div id = "leftbar">
</div>

<div id = "rightbar">
</div>
<div id="mailbar"></div>
</div>
</body>

Upvotes: 0

vakho papidze
vakho papidze

Reputation: 465

try like this: use box-sizing:border-box; for child divs; and calc for middle div

 #main {
      margin: 0px;
      height: 150px;
      border: 1px solid black;
    }
    #leftbar {
      float: left;
      width: 250px;
      height: 100%;
      overflow-y: auto;
      border-right: 1px solid black;
      box-sizing:border-box;
    }
    #rightbar {
      float: right;
      width: 250px;
      height: 100%;
      overflow-y: auto;
      border-left: 1px solid black;
      box-sizing:border-box;
    }
    #mailbar {
      width: calc(100% - 500px);
      float:left;
      height: 50%;
      border-bottom: 1px solid black;
      box-sizing:border-box;
    }

Upvotes: 0

Troyer
Troyer

Reputation: 7013

You can use % to define the width of the navbars, then the remaining % to mailbar and add the width of the left navbar to mailbar as margin-left.

For example:

https://jsfiddle.net/3jjpasum/2/

#main {
    margin:0px;
    height:150px;
    border:1px solid black;
}
#leftbar {
    float:left;
    width: 15%;
    height:100%;
    overflow-y: auto;
    border-right: 1px solid black;
}

#rightbar {
    float:right;
    width:15%;
    height:100%;
    overflow-y: auto;
    border-left: 1px solid black;
}
#mailbar {
  margin-left: 15%;
    width:70%;
    height:50%;
  background-color: red;
    border-bottom: 1px solid black;
}

Upvotes: 2

Related Questions