How to position DIV without destroying the vertical alignment?

How to position DIV without destroying the vertical alignment? - css

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;
}

Related

What is the right way to make this layout working?

What seemed to be a simple task turned out to be quite a problem. I am trying to find a way to both preserve the vertical alignment of green DIVs and to prevent the absolute positioned DIV from overlapping the contents that follows.
Since I had to use absolute positioning not to destroy the alignment, I am now looking for a solution to another problem that showed up as a consequence.
Here is the code:
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;
position: relative;
}
#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;
clear: both;
}
.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_container {
position: absolute;
left: 0;
right: 0;
}
.below_gauge2 {
width: 240px;
color: blue;
position: relative;
margin: auto;
}
.below_gauge3 {
width: 240px;
color: blue;
position: relative;
margin: auto;
border: thin solid #F00;
}
<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_container">
<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. That has been solved.</div>
<div class="below_gauge3">I do not want the contents of this DIV to overlap the contents below. This DIV can contain any ammount of text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</div>
</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">Is there a way to make the DIV with the red border to push down this DIV so the DIV with the red border would not overlap what is below?
</div>
</div>
</div>
I made this code based on the answer (that I accepted) to my question when I had problems with how to allign two green DIVs. As can be seen the solution was to use absolute positioning but now that caused a problem because every absolute positioned element is according to CSS specification removed from the flow.

Try once Left-margin and right-margin.

Creating Nested Divs

I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>

You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>

CSS: Need boxes at 62% and 38%, but can't seem to find the right formula or code

Trying to get the left box at 62% of the width to the left and the right box at 38%. Where ever I add the percentages, they still sit at 50%. Any ideas? Thank you for any help/advice you can share.
<!DOCTYPE html>
<html>
<head>
<style>
#sides {
display: flex;
padding: 0px 0px;
background-color: white;
}
.sideleft {
flex: 1;
padding: 20px;
margin: 0;
}
.sideright {
flex: 1;
padding: 20px;
margin: 0;
}
#left {
background-color: #333333;
}
#right {
background-color: #018DCA;
}
h1 {
color: #FFFFFF;
}
h2 {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="sides">
<div class="sideleft" id="left" align="right">
<h1>text</h1>
<h2>text</h2>
</div>
<div class="sideright" id="right">
<h1>text</h1>
<h2>text</h2>
</div>
</div>
</body>
</html>

flex property is the combination of flex-grow: flex-shrink: flex-basis: ,
so to set width you need to set flex-basis:
for ex.: flex: 0 1 38%;
fiddle

You just have to make the left and right side, float left and have display:inline-block here is the css with it working. You also have to set your container div in this case sides to 100%
#sides {
display: flex;
width: 100%;
background-color: white;
margin: 0px;
}
.sideleft {
flex: 1;
width: 62%;
margin: 0px;
display: inline-block;
float: left;
}
.sideright {
flex: 1;
width: 38%;
margin: 0px;
display: inline-block;
float: left;
}

Try this please:
<!DOCTYPE html>
<html>
<head>
<style>
#sides {
padding: 0px 0px;
background-color: white;
}
.sideleft {
flex: 1;
padding: 00px;
margin: 0;
}
.sideright {
flex: 1;
padding: 00px;
}
#left {
background-color: #333333;
}
#right {
background-color: #018DCA;
}
h1 {
color: #FFFFFF;
}
h2 {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="sides">
<div class="sideleft" id="left" style=" width:62%">
<h1>text</h1>
<h2>text</h2>
</div>
<div class="sideright" id="right" style=" width:38%; margin-left:62%">
<h1>text</h1>
<h2>text</h2>
</div>
</div>
</body>
</html>
css width box

css creating a big gap in layout issue

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/

CSS Menu Bar - is 3 divs necessary?

I'm creating a menu bar for my site and I'm wondering if I'm doing this correctly.
Is there a better way to achieve the same result? It just seems excessive to use 3 divs.
Here is how I'm currently handling it :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#topbar {
background: #487BC0;
width: 100%;
}
#container {
width: 960px;
margin: 0 auto;
}
#links {
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="topbar">
<div id="container">
<div id="links">Login | Register</div>
</div>
</div>
<div id="content">Content goes here</div>
</body>
</html>

Im no Guru but maybe something like this will work?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
background: #487BC0;
width: 100%
min-width: 960px;
margin: 0 auto;
}
#container > span {
display: block;
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<span>Login | Register</span>
</div>
<div id="content">Content goes here</div>
</body>
</html>
Then again, im no Guru O.o

remove the #topbar if you do not want the blue background to stretch otherwise its alright i think..
There are many solutions to same problem

My Way Of Skinning this cat. The way I see it, width is common so only set it once.
HTML
<div class="container">
<div class="topBar">Login | Register</div>
<div class="content">content</div>
</div>
CSS
.container
{
width:960px;
margin: 0 Auto;
}
.topBar
{
background-color:#487BC0;
text-align:right;
margin-bottom:30px;
padding: 15px 15px 15px 15px;
color: #fff;
font-size: 14px;
}
.topBar div
{
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
.content
{
background-color:#f6f6f6;
}
Example: http://jsfiddle.net/V9DGp/

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

How to position DIV without destroying the vertical alignment? - css

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; }

Related

What is the right way to make this layout working?

Creating Nested Divs

CSS: Need boxes at 62% and 38%, but can't seem to find the right formula or code

css creating a big gap in layout issue

CSS Menu Bar - is 3 divs necessary?

Categories

Resources