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.
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 would like to create a navbar that looks like this: https://www.audacityteam.org/
I tried this but I think this doesn't look right. The border from the notch is on top of the left and right placeholders when it shouldn't be. Also I think I made this too complicated; can this be done with fewer div elements?
:root {
--background: black;
--accent: silver;
}
body {
margin: 0;
}
.placeholder {
float: left;
height: 20px;
width: 30%;
background: var(--background);
border-bottom: 3px solid var(--accent);
}
.right {
float: right;
}
.container {
position: absolute;
left: 25%;
border-top: 50px solid var(--background);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 40%;
}
.container-accent {
position: absolute;
left: 24.8%;
border-top: 53px solid var(--accent);
border-left: 53px solid transparent;
border-right: 53px solid transparent;
height: 0;
width: 40%;
transform: scale(1.008, 1.008);
}
<div class="placeholder"></div>
<div class="placeholder right"></div>
<div class="container-accent"></div>
<div class="container"></div>
I want to create a 2 column liquid layout with a nav bar on the left side that should have a height of 100%, a header that should have a width of 100% and a content section that should have a height and width of 100% as well, and there should be a margin on all sides of 10 or 20 pixels, and also in between the header, nav and content boxes. Here is my fiddle:
https://jsfiddle.net/d2Lnq6sd/1/
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
Now as you can see the nav bar is not 100% in height and the content section is too wide. My final result should look like this:
http://imageshack.com/a/img921/9425/UYp8Ah.png
Tried finding help on google on this issue but I still don't get what I should use, relative or absolute positions and which to use for which attribute. any pointers?
You're good to go: http://codepen.io/8odoros/pen/vKxVYv?editors=1100
nav bar is 100% in height
the content section is not too
wide
html, body {
height:calc(100% - 60px);
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
height:100%;
box-sizing:border-box;
}
header {
float:left;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
box-sizing:border-box;
}
nav {
float:left;
margin-top:20px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
box-sizing:border-box;
}
section {
float:right;
margin-top:20px;
height:100%;
padding: 10px;
width:calc(100% - 220px);
background-color: green;
border: 1px solid black;
box-sizing:border-box;
}
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Try this code and see demo:
CSS:
body {
color: #fff;
font-family: verdana;
}
header {
background-color: red;
border: 1px solid black;
height: 75px;
width: 100%;
}
nav {
background-color: blue;
border: 1px solid black;
float: left;
margin: 2% 0;
min-height: 300px;
padding: 10px;
width: 20%;
height: 100%;
}
section {
background-color: green;
border: 1px solid black;
float: right;
position: absolute;
right: 10px;
top: 100px;
width: 75%;
}
See Fiddle Demo
Alright so I changed a few things:
https://jsfiddle.net/d2Lnq6sd/9/
body,html {
height:100%;
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
width: 73%;
float: left;
height:auto;
}
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
aside {
float:left;
width:20%;
margin-top:15px;
margin-left:5px;
height: 100%;
background-color: blue;
border: 1px solid black;
}
section {
width: 100%;
background-color: green;
border: 1px solid black;
}
I have moved your navigation into an aside tag, this is just HTML 5 syntax Link
By using floats and keeping the positions as they were you are able to create the desired effect. To get the width to 100% I would recommend playing with the padding and margins to get it to a 20% + 80% ratio.
Hope this helps :)
Do you need like this ,
Html:
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Css:
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
}
header {
position: relative;
height: 75px;
width:675px;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 300px;
bottom:200px;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
you can see the link:https://jsfiddle.net/d2Lnq6sd/11/
You can position nav as fixed, use below to get an idea.
nav {
position: fixed;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
margin-top: 76px;
}
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'm about to make a website but I'm getting stuck on the css. For some reason, there's a space between the video slideshow and the side bar. Can anyone tell me why this is?
Below is a picture of what my web browser displays when given the code.
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='header'>
<p>Header</p>
</div>
<div id='picture_gallery'>
<p>Picture Gallery</p>
</div>
<div id='nav_bar'>
<p>Nav Bar</p>
</div>
<div id='vision_statement'>
<p>Vision Statement</p>
</div>
<div id='video_slideshow'>
<p>Video Slideshow</p>
</div>
<div id='sidebar'>
<p>Side Bar</p>
</div>
<div id='footer'>
<p>Footer</p>
</div>
</body>
#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#vision_statement {
border: 1px solid black;
display: inline-block;
float: left;
height: 50px;
width: 33%;
text-align: center;
}
#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;
width: 33%;
text-align: center;
}
#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 33%;
text-align: center;
}
#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
Change some in your css Define box-sizing:border-box;
as like this
#sidebar, #vision_statement, #video_slideshow{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#vision_statement {
border: 1px solid black;
display: inline-block;
float: left; // add this float:left
height: 50px;
width: 33%;
text-align: center;
}
#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;float: left; // add float:left
width: 33%;
text-align: center;
}
#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 34%; // add width :34%
text-align: center;
}
#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
clear:both; // add this clear both;
}
Demo
Its working fine now.. Jus set the position:absolute to your sidebar style..
Here is the updated code for css:
#sidebar {
border: 1px solid black;
display: inline-block;
position:absolute;
height: 50px;
width: 32%;
text-align: center;
}
Demo
You need to set the widths of the elements as 33.3333% or something similar, because 33% on each leaves a gap of 1%.
The issue you are having with them not fitting with that width is because of the 1px border you have set. With the traditional box model, a border is not contained within the 33.33% width, so it means the actual width is 33.33% + 1px.
To fix this, you can use the border-box box model. I use it all the time -- works much better.
Read here as to why and what it does:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Simply add:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
to your css file. Then change the widths of the three elements to
width:33.33%;
This will make all of the boxes exactly the same width and have them all fit on the same line.