I have an issue with the following layout in css, as you can see from the image below the two floating elements to the far right have got a big space between them.
and I'm trying to get them to line up like
I'd rather not use negative margins to pull 'sidebar2' into the right spot and the 'mag link' has to separate from the second sidebar.
thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wraper clearfix">
<div class="container clearfix">
<header>header</header>
<div class="carousel">carousel</div>
<div class="posts">posts
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
</div>
<div class="sidebar1">sidebar1</div>
<div class="mag-link">mag link</div>
<div class="sidebar2">sidebar2</div>
</div><!-- container -->
<footer class="clearfix">footer</footer>
</div><!-- wraper -->
</body>
</html>
css
.wraper {
background-color: rgba(254,139,206,0.27);
width: 100%;
position: absolute;
margin: 0;
padding: 0;
}
.container {
background-color: rgba(253,184,65,0.27);
width: 1040px;
margin: 0 auto;
padding: 0;
}
header {
background-color: rgba(198,247,73,0.27);
margin: 0 0 16px 0;
padding: 0 16px 16px;
height: 292px;
}
.carousel {
background-color: rgba(96,250,193,0.27);
margin: 0 8px 16px 0;
height: 240px;
width: 720px;
display: inline-block;
overflow: hidden;
float: left;
}
.posts {/* page content */
background-color: rgba(94,93,250,0.27);
width: 512px;
float: left;
display: inline-block;
padding: 0;
margin: 0 8px 16px 0;
}
.post {
width: 290px;
height:200px;
}
.sidebar1 {
background-color: rgba(184,88,250,0.27);
display: inline-block;
padding: 0;
margin: 0 8px 16px 8px;
float: left;
position: relative;
width: 208px;
height:800px;
}
.mag-link {
background-color: #fd9e90;
width: 240px;
height: 200px;
margin: 0 0 16px 8px;
float: left;
position: relative;
bottom: 389px;
display: inline-block;
}
.sidebar2 {
background-color: rgba(251,244,57,0.27);
float: left;
width: 240px;
height:1100px;
margin: 0 0 16px 8px;
display: inline-block;
}
footer {
width: 100%;
background: #fd9e10;
height: 312px;
float: left;
}
.clearfix {
zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both;}
try this:
http://jsfiddle.net/A2XVQ/1/
i just remove some properties
HTML
<div class="container clearfix">
<header>header</header>
<div class="carousel">carousel</div>
<div class="posts">posts
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
</div>
<div class="sidebar1">sidebar1</div>
<div class="mag-link">mag link</div>
<div class="sidebar2">sidebar2</div>
</div><!-- container -->
<footer class="clearfix">footer</footer>
</div><!-- wraper -->
CSS
.wraper {
background-color: rgba(254,139,206,0.27);
width: 100%;
position: absolute;
margin: 0;
padding: 0;
}
.container {
background-color: rgba(253,184,65,0.27);
width: 1040px;
margin: 0 auto;
padding: 0;
}
header {
background-color: rgba(198,247,73,0.27);
margin: 0 0 16px 0;
padding: 0 16px 16px;
height: 292px;
}
.carousel {
background-color: rgba(96,250,193,0.27);
margin: 0 8px 16px 0;
height: 240px;
width: 720px;
display: inline-block;
overflow: hidden;
float: left;
}
.posts {/* page content */
background-color: rgba(94,93,250,0.27);
width: 512px;
float: left;
display: inline-block;
padding: 0;
margin: 0 8px 16px 0;
}
.post {
width: 290px;
height:200px;
}
.sidebar1 {
background-color: rgba(184,88,250,0.27);
display: inline-block;
padding: 0;
margin: 0 8px 16px 8px;
float: left;
position: relative;
width: 208px;
height:800px;
}
.mag-link {
background-color: #fd9e90;
width: 240px;
height: 200px;
margin: 0 0 16px 8px;
position: relative;
display: inline-block;
}
.sidebar2 {
background-color: rgba(251,244,57,0.27);
float: left;
width: 240px;
height:1100px;
margin: 0 0 16px 8px;
}
footer {
width: 100%;
background: #fd9e10;
height: 312px;
float: left;
}
.clearfix {
zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both;}
}
good luck
You need to place the content part (including the carousel, posts and the first sidebar) into one div and the two elements to the right (mag link and sidebar 2) into a second div and float them left.
HTML would look like that:
<div class="wraper clearfix">
<div class="container clearfix">
<header>header</header>
<div class="contentwrap">
<div class="carousel">carousel</div>
<div class="posts">posts
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
</div>
<div class="sidebar1">sidebar1</div>
</div>
<div class="sidebarwrapper">
<div class="mag-link">mag link</div>
<div class="sidebar2">sidebar2</div>
</div>
</div><!-- container -->
<footer class="clearfix">footer</footer>
</div><!-- wraper -->
Have a look at my fiddle: http://jsfiddle.net/jW6HW/
Related
I've been struggling with this for hours and cannot find the solution. I've made a simple layout to display two pairs of gauge+thermometer visualizations to show the temperatures uploaded by ESP8266. The basic layout is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container_main">
<div id="heading"><h1>The title</h1></div>
<div class="graph">
<div id="container">
<div id="inner">
<div id="gauge_div"></div>
<div class="below_gauge">Text #1</div>
<div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one.</div>
</div>
<div id="thermometer">
<canvas id="termometar_cnv" width="160" height="600"></canvas>
</div>
<div id="inner2">
<div id="gauge2_div"></div>
<div class="below_gauge">Text #2</div>
</div>
<div id="thermometer2">
<canvas id="termometar2_cnv" width="160" height="600"></canvas>
</div>
</div>
<div id="below">Description.
</div>
</div>
</div>
</body>
</html>
body {
background-color: #ddd;
}
h1 {
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#container {
height: 100%;
width: 100%;
display: table;
}
#inner {
vertical-align: middle;
display: table-cell;
}
#inner2 {
vertical-align: middle;
display: table-cell;
}
#gauge_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#gauge2_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#heading {
width: 100%;
margin: 0 auto;
text-align: center;
color: blue;
}
#below {
margin: 0 20px;
text-align: center;
color: blue;
}
.graph {
margin: 0 auto;
padding: 10px 0;
text-align: center;
color: blue;
border: thin solid #00F;
}
#container_main {
padding-right: 100px;
padding-left: 100px;
}
#thermometer {
margin: 0 auto;
padding: 10px 0px 10px 0;
background-color: gray;
}
#thermometer2 {
margin: 0 auto;
padding: 10px 20px 10px 0;
background-color: gray;
}
.below_gauge {
font-weight: bold;
color: blue;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
}
When <div class="below_gauge2"> is removed from the HTML the layout is exactly how I would like it to be. However, after adding that DIV, the green div moves up so it is not anymore vertically aligned with the second green div at the right.
What can be done so <div class="below_gauge2"> would be displayed below the left green DIV, but in a such way the green DIV would stay where it was before adding the <div class="below_gauge2">?
check this fiddle
#inner {
vertical-align: middle;
display: table-cell;
//added
position: relative;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
//added
position: absolute;
left: 0;
right: 0;
margin: auto;
}
I have a modal where I have dropdowns in the element.
The problem is since I have an overflow set, the dropdown, although it appears, does not appear on top of the modal. I understand since it's because I set an overflow:auto on the parent.
Is there any way via CSS that I can ignore the parent and show the dropdown above the "modal"?
You'll see in the example, the content in the red line is visible if you scroll. Which is the expected behaviour based on my code at the moment. What is the adjustment I will need to make to show that dropdown above the modal?
Tried fixing with z-index and I read somewhere on SO to set the grandparent to position relative.
Prefer a CSS only solution.
Thanks!
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: absolute;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to make the dropdown element position: fixed, the dropdown container positon: absolute and the parent position:relativefor this to work. You can adjust the positining of the container element using top, right, left, bottom but you'll need to use negative margins on the fixed element.
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: absolute;
top: 0;
right:0;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: fixed;
border: 1px solid red;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you need used z-index 999, and position relative in dropdown css.
Example:
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: relative;
z-index: 9999;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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>
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>
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>