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/
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>
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>
I would like to a 4 blocks layout like this:
I've been trying things with float but I really don't master it.
How can I do that ?
Thanks
My HTML code:
<div id="colonne_gauche">1</div>
<div id="colonne_gauche2">2</div>
<div id="colonne_droite">4</div>
<div id="colonne_centre">3</div>
My CSS code:
#colonne_gauche
{
margin-top: 5px;
-float: left;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: red;
}
#colonne_gauche2
{
float: left;
margin-top: 5px;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: orange;
}
#colonne_centre
{
float: right;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
width: 310px;
height: 295px;
border: 1px solid #818181;
background: green;
}
#colonne_droite
{
float: right;
margin-top: 5px;
width: 220px;
height: 295px;
border: 1px solid #818181;
background: blue;
}
I just played a little with the floating and see what that does.
This should help you: DEMO.
HTML:
<div id="header">Header</div>
<div id="stackleft">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="stackright">
<div id="three">3</div>
<div id="four">4</div>
</div>
CSS:
#header {
width: 960px;
padding: 50px 0px;
color: black;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#one {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#two {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#three {
width: 310px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#four {
width: 220px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#stackleft, #stackright {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/xam558e3/
Using DIV's inside of other DIV's you can easily control how they appear, and where they appear. You should look up the box model, it may shed some light for you on this.
<div style="width:310px">
<div style="width:303px; height: 100px; background-color: #6495ed;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:303px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
</div>
I am trying to show a div in a table cell over a div in another cell.
The HTML looks like:
<table>
<tr>
<td>
<div class="b"></div>
</td>
<td>
</td>
</tr>
<tr>
<td><div class="c"></div>
</td>
<td>
</td>
</tr>
And style:
td {
border: 1px solid #000;
width: 50px;
height: 30px;
}
.b {
width: 100px;
height: 80px;
background: #f90;
border: 1px solid #f60;
margin-bottom: -50px;
z-index:3;
}
.c {
width: 100%;
height: 100%;
background: #390;
border: 1px solid #f60;
z-index:-3;
}
I tried several ways but in vain. Do you have any suggestions?
I'm not sure if i get it right but i end in this solution:
td {
border: 1px solid #000;
width: 50px;
height: 30px;
}
.b {
width: 100px;
height: 30px;
background: #f90;
border: 1px solid #f60;
top:47px;
z-index:3;
position:absolute;
}
.c {
width: 100%;
height: 100%;
background: #390;
border: 1px solid #f60;
z-index:-3;
}
fiddle
.b {
width: 100%;
height: 240%;
background: #f90;
border: 1px solid #f60;
z-index: 99;
position: relative;
margin-top: 25px;
}
.c {
width: 100%;
height: 100%;
background: #390;
border: 1px solid #f60;
position: relative;
}
Adjust the width & height of first div as per your needs
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.