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>
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;
}
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>
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;
}
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>
Related
I have given my divs a min-width.
But if the width increases to more that this then the width should be percentage of the parent container.
I can't for the life of me figure out why I am unable to fix this silly thing.
Any help will be appreciated.
https://jsfiddle.net/q6u3sh5f/
In the fiddle above you can see the wrap's white border extends the width of the window but my divs have a mind of their own.
<html>
<body>
<div class = "wrap">
<div class="date">Date</div>
<div class="month">Month</div>
<div class="task">Task</div>
<div class="status">Status</div>
</div>
</body>
</html>
body {
background-color: #4efa6d;
}
.wrap {
width: 100%;
border: 1px solid white;
}
.date {
min-width: 60px;
width: 6.25%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.month {
min-width: 70px;
width: 6.25%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.task {
min-width: 540px;
width: 67.5%;
width: auto;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.status {
min-width: 100px;
width: 12.50%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
You can do using flex.(hope this is not an issue)
float has become old as of now.
I have moved px to random % for min-width feel free to modify this.
fiddle to playaround.
body {
background-color: #4efa6d;
}
.wrap {
width: 100%;
border: 1px solid white;
display:flex;
}
.date, .month {
min-width: 2%;
width: 6.25%;
border: 1px solid red;
margin: 5px;
padding:5px;
}
.task {
min-width: 10%;
width: 67.5%;
margin: 5px;
padding:5px;
border: 1px solid red;
}
.status {
min-width: 5%;
width: 12.5%;
border: 1px solid red;
margin: 5px;
padding:5px;
}
<html>
<body>
<div class = "wrap">
<div class="date">Date</div>
<div class="month">Month</div>
<div class="task">Task</div>
<div class="status">Status</div>
</div>
</body>
</html>
aligning divs between two divs
The two divs in between are not properly aligned with the two red divs on both sides.
I used “.menu:nth-child(2n){margin-top:-20px;}” as Monika suggested but still cannot get the result
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.men {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:green;
margin-top:-20px;
}
.main {margin-top:5%;
height:20px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;}
<div class="menu"><ul><li>The Flight</li> </ul></div>
<div class="main"></div>
<div class="mai"></div>
<div class="men"><ul> P<li>The Flight</li></ul></div>
screenshot after removing the line
According to your code, they're not aligning because you have a margin-top for .main, just remove the line.
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.men {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:green;
margin-top:-20px;
}
.main {
height:20px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;}
<div class="menu"><ul><li>The Flight</li> </ul></div>
<div class="main"></div>
<div class="mai"></div>
<div class="men"><ul> P<li>The Flight</li></ul></div>
This can be achieved by using pseudo class, please check the css below
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.menu:nth-child(2n){
margin-top:-20px;
}
.main {
height:20px;
width: 50%;
float:left;
padding:0px;
border:1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width:50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}`
I need "div2" to overlap/cover its two adjacent block. I can do it with "div1", but I cannot do it with "div3". Someone know how to do it? Please see my code below with what I have a problem. Thanks!
HTML:
<div class="parent">
<div class="child_1">Some div1</div>
<div class="child_2">Some div2</div>
<div class="child_3">Some div3</div>
</div>
CSS:
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 620px;
margin: 20px
}
.child_1 {
position: static;
text-align:center;
display: inline-block;
margin-top:20px;
margin-left:10px;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
}
.child_2 {
position: relative;
text-align:center;
display: inline-block;
margin-left:-30px;
height: 80px;
width: 200px;
border: 3px solid blue;
background:;
left:-30px;
top:-10px;
}
.child_3 {
position: relative;
display: inline-block;
text-align:center;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
left:-30px;
}
.child_3 needs to have left:-60px; in order to overlap .child_2
you have to add the -30px from .child_2to child_3, so -30px -30px = -60px
ADDITION: To really get child_2 to COVER child_3, assing z-index:1 to child_2:
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 620px;
margin: 20px;
}
.child_1 {
position: static;
text-align:center;
display: inline-block;
margin-top:20px;
margin-left:10px;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
}
.child_2 {
position: relative;
text-align:center;
display: inline-block;
margin-left:-30px;
height: 80px;
width: 200px;
border: 3px solid blue;
background:;
left:-30px;
top:-10px;
z-index:1;
}
.child_3 {
position: relative;
display: inline-block;
text-align:center;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
left:-60px;
}
<div class="parent">
<div class="child_1">Some div1</div>
<div class="child_2">Some div2</div>
<div class="child_3">Some div3</div>
</div>
You need to increase the negative left value on child3, and you need you use z-index to position child2 on top
In below sample I simplified your code a little.
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 600px;
margin: 20px;
}
.child {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
margin: 20px;
text-align:center;
vertical-align: middle;
z-index: 1;
border: 3px solid yellow;
}
.child.nr1 {
background:yellow;
margin-right: -60px;
}
.child.nr3 {
background:yellow;
margin-left: -60px;
}
.child.nr2 {
height: 60px;
border: 3px solid blue;
z-index: 2;
}
<div class="parent">
<div class="child nr1">Some div1</div>
<div class="child nr2">Some div2</div>
<div class="child nr3">Some div3</div>
</div>
I need to position 3 divs like in the image below: so far I got close with "float", but I was not able to achieve this result specifically.
This is my current result:
<head>
<style>
#div-container {
width: 500px;
height: 500px;
border: 1px solid #000000;
}
.div1 {
width: 200px;
height: 100px;
border: 1px solid #d1d1d1;
}
.div2 {
width: 200px;
height: 100px;
float: left;
border: 1px solid #d1d1d1;
}
.div3 {
width: 100px;
height:200px;
float: left;
border: 1px solid #d1d1d1;
}
</style>
</head>
<body>
<div id="div-container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
This is what I'd like to do:
divs image
JSFiddle: http://jsfiddle.net/5zkctxb9/
This is one way to do it - wrap the two left hand divs in a div, and float it.
#div-container {
width: 500px;
height: 500px;
border: 1px solid #000000;
}
#inner {
width: 200px;
height: 200px;
border: 1px solid #d1d1d1;
float: left;
}
.div1 {
width: 198px;
height: 98px;
border: 1px solid #d1d1d1;
}
.div2 {
width: 198px;
height: 98px;
border: 1px solid #d1d1d1;
}
.div3 {
width: 100px;
height: 200px;
float: left;
border: 1px solid #d1d1d1;
}
<div id="div-container">
<div id="inner">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
<div class="div3">div3</div>
</div>
Add: margin-top:-100px; to div3. http://jsfiddle.net/xwdhppv5/
I have two divs with borders as the picture below shows.
How do I remove only the border where the 2 divs touch like the picture below shows?
Here is the html and css used in the top picture (js fiddle: http://jsfiddle.net/paulyoder/whsC4/19/)
<html>
<head>
<style type="text/css">
#sideBar {
float: left;
width: 75px;
height: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black
}
#balanceSheetSummary {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
}
body { padding: 10px; }
h2 { margin: 5px; }
</style>
</head>
<body>
<div id="sideBar">
<h2>Side Bar</h2>
</div>
<div id="balanceSheetSummary">
<h2>Content</h2>
</div>
</body>
</html>
You could do something like this: http://jsfiddle.net/sj2AD/1/
#sideBar {
float: left;
width: 75px;
height: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
background: red;
position: relative;
z-index: 2;
}
#balanceSheetSummary {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
background: red;
position: relative;
z-index: 1;
margin-left: -1px;
}
body {
padding: 10px;
}
h2 {
margin: 5px;
}
What I did was to add a negative margin to the right one so that the boxes overlap.
This does break, for example if the left div is higher than the right one.