To make the issue easier to analyze I have created this jsFiddle:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; padding-top: 30px; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; padding-top: 30px; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; padding-top: 30px; }
#footerContainer { position: absolute; bottom: 0; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
With the markup of top, middle, and bottom sections, problem is:
1- As you can see the footer colored in black is not really on the bottom of the page despite having position:absolute and bottom:0px on the footer div
2- More importantly, leftSection, middleSection and rightSection DIVs overlap with the header and footer DIVs, in fact, in this fiddle the only way to see the text displayed of the 3 middle sections is to have padding placed to avoid having it displayed underneath the header DIV.
I have tried placing top and bottom values of 30px on middleContainer to fix the overlap issue but this does not solve the problem, all I want is to keep headerContainer on top and footerContainer on the bottom while all the 3 middle sections adjust to 100% height. leftSection and rightSection have fixed width, but middleSection has flexible width and height.
http://jsfiddle.net/grc4/XTQuT/2/ does what I wanted exactly without specifying solid height values.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0;
height:100%;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px 0;
}
#leftSection {
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
}
#middleSection {
position: absolute;
background-color: yellow;
left: 175px;
right: 175px;
top: 0;
bottom: 0;
color: black;
}
#rightSection {
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
The "padding-top: 30px;" on your 3 inner elements is making them 30px taller than the height of the actual body, creating your problem.
Remove the top padding from those 3 elements, then make your header and footer relatively positioned, rather than absolute, and you should be set.
Like this: http://jsfiddle.net/BPJxD/28/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
Your problem was that you were using needless absolute positioning in headercontainer and footercontainer, solution
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
CSS:
body { margin:0; }
#mainContainer
{
position: absolute;
right: 4%; left: 4%;
height: 100%;
}
#headerContainer
{
width: 100%;
z-index: 10;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer { height: 100%; }
#leftSection
{
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection
{
position: absolute;
height: 100%;
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection
{
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer
{
position: relative;
bottom: 0; width: 100%;
height: 30px;
background: #323232;
color: white;
}
Reviewing your whole Fiddle I noticed that you are using absolute positioning on every div. This is plane wrong.
You should only absolute positioning when:
You need a container that is free of the document's usual formatting. Such as a popup or a floating box.
You need to use a div inside a parent div with fixed positioning, but this will only work if parent positioning is set to relative.
You can remove all 3 of
padding-top: 30px;
like
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
and change your html like this
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top:30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top:30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top:30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
I hope this can be helpful.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: relative; right: 4%; left: 4%; height: 100%; width:1000px; }
#headerContainer { width: 1000px; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; width:1000px; position:relative; display: table-cell;}
#leftSection { float: left; width:25%; background: #71ABD1; overflow: auto; color: black; padding-top: 30px; height: 100%;}
#middleSection { float: left; height:100%; width:50%; background-color: yellow; color: black; padding-top: 30px; }
#rightSection { float:left; height:100%; width: 25%; background: red; color: black; padding-top: 30px; }
#footerContainer { bottom: 0; width:1000px; height: 30px; background: #323232; color: white; float:left;}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer"> headerContainer </div>
<div id="middleContainer" >
<div id="leftSection"> leftSection </div>
<div id="middleSection"> middleSection </div>
<div id="rightSection"> rightSection
rightSection rightSection rightSection rightSection rightSection rightSection rightSection </div>
</div>
<div id="footerContainer" > footerContainer </div>
</div>
</body>
</html>
Related
I wrote such a code. I write this code so that .vertical_catch p: after is from the position where the element is absolutely placed to the bottom where the page content exists
body {
margin: 0;
}
.hero {
height: 100vh;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.vertical_catch {
position: absolute;
top: 58%;
left: 4%;
height: 100%;
}
.vertical_catch p {
font-size: 1.8vw;
color: #ffffff;
writing-mode: vertical-rl;
height: 100%;
}
.vertical_catch p:after {
z-index: 50;
margin: 1em 0;
content: "";
position: absolute;
left: 50%;
height: 100%; /* I want to get 100% height of page content */
display: inline-block;
width: 1.7px;
transform: translateX(-50%);
background-color: #fff;
}
.box {
width: 100%;
}
.minibox {
height: 100vh;
padding: 150px;
background-color: #333;
}
h1 {
margin: 40px 0px;
color: #fff;
text-align: center;
}
.content {
margin: 0 auto;
width: 50%;
color: #fff;
overflow-wrap: break-word;
}
<body>
<div class="hero"></div>
<div class="vertical_catch">
<p>TEXTTEXTTEXTTEXT</p>
</div>
<div class="box">
<section class="minibox">
<h1>heading1</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
<div class="box">
<section class="minibox">
<h1>heading2</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
</body>
However, height: 100% only worked up to 100vh, and could not extend the border to the bottom of the content.
According to the developer tool verification,in html and body, the height includes all page content, but the element of absolute arrangement could not obtain the height. height: 100% only worked up to 100vh.
How can I extend the border?
You are setting 100% height for ::after element; it will take up the full height of the p, its main element. Consider editing as below:
body {
margin: 0;
height: auto;
position: relative;
}
.hero {
height: 100vh;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.vertical_catch {
position: absolute;
top: 10%;
left: 4%;
height: 90%;
}
.vertical_catch p {
font-size: 1.8vw;
color: #ffffff;
writing-mode: vertical-rl;
height: 100%;
}
.vertical_catch p:after {
z-index: 50;
margin: 1em 0;
content: "";
position: absolute;
left: 50%;
height: 80%;
display: inline-block;
width: 1.7px;
transform: translateX(-50%);
background-color: #fff;
}
.box {
width: 100%;
}
.minibox {
height: 100vh;
box-sizing: border-box;
padding: 150px;
background-color: #333;
}
h1 {
margin: 40px 0px;
color: #fff;
text-align: center;
}
.content {
margin: 0 auto;
width: 50%;
color: #fff;
overflow-wrap: break-word;
}
<body>
<div class="hero"></div>
<div class="vertical_catch">
<p>TEXTTEXTTEXTTEXT</p>
</div>
<div class="box">
<section class="minibox">
<h1>heading1</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
<div class="box">
<section class="minibox">
<h1>heading2</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
</body>
body {
margin: 0;
height: auto;
position: relative;
}
.hero {
height: 100vh;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.vertical_catch {
position: absolute;
top: 10%;
left: 4%;
height: 90%;
}
.vertical_catch p {
font-size: 1.8vw;
color: #ffffff;
writing-mode: vertical-rl;
height: 100%;
}
.vertical_catch p:after {
z-index: 50;
margin: 1em 0;
content: "";
position: absolute;
left: 50%;
height: calc(100% - 388px);
display: inline-block;
width: 1.7px;
transform: translateX(-50%);
background-color: #fff;
}
.box {
width: 100%;
}
.minibox {
height: 100vh;
box-sizing: border-box;
padding: 150px;
background-color: #333;
}
h1 {
margin: 40px 0px;
color: #fff;
text-align: center;
}
.content {
margin: 0 auto;
width: 50%;
color: #fff;
overflow-wrap: break-word;
}
<body>
<div class="hero"></div>
<div class="vertical_catch">
<p>TEXTTEXTTEXTTEXT</p>
</div>
<div class="box">
<section class="minibox">
<h1>heading1</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
<div class="box">
<section class="minibox">
<h1>heading2</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
</body>
I want to create container that has two elements with colors given in the picture. The two are different divs and must stay side by side. How do I do it?
Here is my code:
<html>
<head>
<title>Testing</title>
<style>
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
</body>
</html>
You didn't set a height on the body of the document so setting a percentage on the divs won't do anything until you do. You also needed to float the sidenav div.
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
float: left
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
html,
body {
height: 100%;
}
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
Your code Updated!
body, html{
padding:0px;
margin:0px;
height:100%;
}
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
float: left;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
How about this:
<div class="container">
<div class="sidenav">
test
</div>
<div class="bgrnd">
test
</div>
</div>
CSS:
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
color: #fff;
float: left;
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
color: #fff;
float: right;
}
You can set .sidenav and .bgrnd to position: absolute; and position them accordingly from there. Also, you've set .container to: width: 50%; and height: 50%; which I presume you don't want.
.container {
height: 100%;
width: 100%;
}
.sidenav {
width: 25%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
}
.bgrnd {
width: 75%;
height: 100%;
position: absolute;
top: 0;
left: 25%;
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
</body>
</html>
How about using css-flex.
#main {
width: 100%;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
.div1 {
width: 25%;
height: 50px;
}
.div2 {
width: 75%;
height: 50px;
}
<div id="main">
<div class="div1" style="background-color:coral;">A</div>
<div class="div2" style="background-color:lightblue;">B</div>
</div>
<html>
<style>
#wrapper{
width: 960px;
margin: 0;
border:dashed yellow;
background-color: orange;
}
header{
float: left;
width: 960px;
border: dotted blue;
}
nav{
float: left;
width: 960px;
border: thin double pink;
}
article{
float: left;
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
#sec1{
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec1{
float: left;
width: 100%;
text-align: center;
}
#psec1{
float: left;
width: 100%;
}
#sec2{
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec2{
float: left;
width: 100%;
text-align: center;
}
#psec2{
float: left;
width: 100%;
}
</style>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
</article>
</div>
</body>
</html>
Wrapper will not surround article tag and contents. I'm not sure if this is just a simple math error on my part, or if the I need to adjust the margins and float it. Either way, please help me out here.
Changes done in the code:
Removed all float:left from the style.As it bring the child element out of its parent
Gave display:inline-block for all sections so that they can come in one row if width is available by behaving as an inline element.
removed the ids sec1,h1sec1,psec1,sec2,h1sec2 & psec2 and added classes sec,h1sec & psec as they were having common styles and we should always use unique id for each element.
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
}
header {
width: 960px;
border: dotted blue;
}
nav {
width: 960px;
border: thin double pink;
}
article {
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
.sec {
display: inline-block;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
.h1sec {
width: 100%;
text-align: center;
}
.psec {
width: 100%;
}
<html>
<style>
</style>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section class="sec">
<h1 class="h1sec">Section 1</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 2</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 1</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 2</h1>
<p class="psec"></p>
</section>
</article>
</div>
</body>
</html>
You just need a method of "clearing the floats"...a so-called "ClearFix"
There are number of methods discussed here.
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
overflow:auto;
}
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
overflow:auto;
}
header {
float: left;
width: 960px;
border: dotted blue;
}
nav {
float: left;
width: 960px;
border: thin double pink;
}
article {
float: left;
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
#sec1 {
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec1 {
float: left;
width: 100%;
text-align: center;
}
#psec1 {
float: left;
width: 100%;
}
#sec2 {
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec2 {
float: left;
width: 100%;
text-align: center;
}
#psec2 {
float: left;
width: 100%;
}
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
</article>
</div>
HTML:
<div id="outer1">
<div class="bg">
<div class="top"></div>
<div class="base"></div>
</div>
<div class="content"></div>
</div>
<div id="outer2">
<div id="bg">
<div class="top"></div>
<div class="base"></div>
</div>
<div class="content"></div>
</div>
CSS2:
div { width: 100%; }
#outer1, #outer2 {position: relative;}
#outer1 .top { height: 200px; background-color: blue; }
#outer1 .base { height: 200px; background-color: yellow; }
#outer2 .top { height: 200px; background-color: green; }
#outer2 .base { height: 200px; background-color: yellow; }
.content {
width: 160px; margin: 0 auto;
position: relative; bottom: 250px; height: 300px; background-color: white; border: 1px solid black;}
This is the fiddle
The white, black-bordered div (.content) is supposed to sit on the split-coloured background (.bg) (as it is).
Using relative positioning - but the space i've told it to move up by (250px), is still been taken by it's parent (#outer1). (there's a gap between to the two 'outer' divs - they should be touching)
I tried absolute positioning but because the content div is taller than the relative content, the height is not honoured. And becuase it's dynamic content I cannot give it a fixed height (although i did for illustration)
One option is javascript, another is using a background-repeater for the top half.
Can it be achieved with pure CSS2?
Edit: Complete rewrite...
Here is the new fiddle: http://jsfiddle.net/FSXj8/14/
Okay so I took the liberty to start from scratch. Here is the html
<div id="outer1" class="container">
<div class="content">
<div class="innerContent">hello world</div>
</div>
<div class="top"></div>
<div class="base"></div>
</div>
<div id="outer2" class="container">
<div class="content">
<div class="innerContent">hello world</div>
</div>
<div class="top"></div>
<div class="base"></div>
</div>
And here is the CSS
div {
width: 100%;
}
.container {
height: 400px;
display: table;
position: relative;
}
.top, .base {
position: absolute;
left: 0;
height: 50%;
z-index: 0;
}
.top {
top: 0;
}
.base {
bottom: 0;
}
#outer1 .top {
background-color: blue;
}
#outer1 .base {
background-color: yellow;
}
#outer2 .top {
height: 50%;
background-color: green;
}
#outer2 .base {
height: 50%;
background-color: yellow;
}
.innerContent {
min-height: 100px;
border: 1px solid black;
background-color: white;
width: 100px;
}
.content {
display: table-cell;
position: relative;
vertical-align: middle;
z-index: 1;
background-color: transparent;
height: 100%;
}
Not sure if this is what you want, you said something about not using absolute:
.content {
width: 100px; margin 0 auto;
position: absolute; margin-top:-250px; height: 100px; background-color: white; border: 1px solid black;}
http://jsfiddle.net/FSXj8/7/
I am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.
See image
Actually, many ways.
One of them:
html
<div class="wrapper">
<div class="line"></div>
<div class="wordwrapper">
<div class="word">or</div>
</div>
</div>
css
.wrapper {
position: relative;
width: 250px;
height: 300px;
border: 1px dashed #ccc;
margin: 10px;
}
.line {
position: absolute;
left: 49%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
z-index: 1;
}
.wordwrapper {
text-align: center;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -12px;
z-index: 2;
}
.word {
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
font: bold 12px arial,sans-serif;
background: #fff;
}
See example: http://jsfiddle.net/zmBrR/22/
Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.
http://jsfiddle.net/mstauffer/uyTB7/
HTML:
<div class="container">
<div class="side">Left side</div>
<div class="or">
<div class="or-line"></div>
<div class="or-label">Or</div>
</div>
<div class="side">Right side</div>
</div>
CSS:
.container {
padding: 1em;
}
.side, .or {
float: left;
height: 6em;
text-align: center;
}
.side {
width: 40%;
}
.or {
position: relative;
width: 20%;
}
.or-line {
float: left;
width: 50%;
border-right: 1px solid #aaa;
height: 6em;
}
.or-label {
background: #fff;
color: #aaa;
height: 1em;
left: 50%;
margin-left: -1.25em;
margin-top: 2em;
padding: .5em;
position: absolute;
text-transform: uppercase;
width: 1em;
}
Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.
this is the solution with flex box:
https://jsfiddle.net/1z0runv9/1/
.wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}
.or-separator {
display: flex;
flex-direction: column;
align-items: center;
color: #d3d7da;
}
.vertical-line {
border-left: 1px solid #d3d7da;
flex-grow: 1;
width: 1px;
}
<div class="wrapper">
<div class="or-separator">
<div class="vertical-line"></div>
<div>Or</div>
<div class="vertical-line"></div>
</div>
</div>
Put a <div> around the markup and use CSS like this:-
<div class="verticalLine">
some other content
</div>
in cSS:-
.verticalLine {
border-left:thick solid #ff0000;
}
OR you can try this:-
<style type="text/css">
#your_col {
border-left: 1px solid black;
}
</style>
<div id="your_col">
Your content here
</div>
You can use jquery to do the same thing. Import jquery cdn in your HTML document
select the required item and write a javascript code for that.
consider this example
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
<style type="text/css">
.completed{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>
</div>
<script type="text/javascript" >
`enter code here`
$("li").click(function () {
$(this).css("color","gray");
$(this).css("text-decoration","line-through");
});
or
$("li").click(function () {
$(this).toggleClass("completed");
});
</script>
</body>
</html>
In this example line is passed over the list(li) elements.
Regardless of the question asked, i am here going for a rather simple approach in both directions.
.demo-body{
height: 400px;
}
.line-wrapper{
background: black;
width: 2px;
height: 100%;
position: relative;
}
.line-wrapper .word{
position: absolute;
background: white;
top: 50%;
transform: translate(52%,-50%);
right: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.line-wrapper .word.vertical{
writing-mode: tb-rl;
}
<div class="demo-body">
<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
<div class="word">OR</div>
</div>
<br>
<!-- VERTICAL TEXT -->
<div class="line-wrapper">
<div class="word vertical">OR</div>
</div>
</div>
you can archive it by using flexbox for example
body {
position: relative;
height: 100vh;
}
.vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-10px);
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
color: #999;
}
.vertical .line {
width: 1px;
flex: 1;
background: #999;
}
<div class="vertical">
<div class="line"></div>
<div class="text">OR</div>
<div class="line"></div>
</div>