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>
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 was wondering if is it possible to create a submenu using divs? All online tutorials use this ul li thing. I don't know how to activate my submenu by hovering over an option. Should I add new class to "director" div? Incuding photos and code pieces.
HTML:
.menu_opcje {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
}
.menu_wysuwane {
min-width: 100px;
text-align: center;
border-bottom: dotted 2px black;
padding: 10px;
display: none;
}
.menu_wysuwane:hover {
background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
background-color: lightgray;
cursor: pointer;
}
<div id="menu">
<div class="menu_opcje">Strona główna</div>
<div class="menu_opcje">Galeria</div>
<div class="menu_opcje">Reżyserzy
<div>
<div class="menu_wysuwane">Quentin Tarantino</div>
<div class="menu_wysuwane">Bracia Coen</div>
<div class="menu_wysuwane">Wes Anderson</div>
</div>
</div>
</div>
https://i.stack.imgur.com/cldDy.png
https://i.stack.imgur.com/TrvsC.png
It is semantically incorrect, though making it appear on hover, do like this
.menu_opcje:hover div {
display: block;
}
Sample snippet
.menu_opcje {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
}
.menu_wysuwane {
min-width: 100px;
text-align: center;
border-bottom: dotted 2px black;
padding: 10px;
display: none;
}
.menu_wysuwane:hover {
background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
background-color: lightgray;
cursor: pointer;
}
.menu_opcje:hover div {
display: block;
}
<div id="menu">
<div class="menu_opcje">Strona główna</div>
<div class="menu_opcje">Galeria</div>
<div class="menu_opcje">Reżyserzy
<div>
<div class="menu_wysuwane">Quentin Tarantino</div>
<div class="menu_wysuwane">Bracia Coen</div>
<div class="menu_wysuwane">Wes Anderson</div>
</div>
</div>
</div>
How to make the inside divs fit to the contents in the below html
I tried with display:inline-block but it moves the 2nd div to the bottom.
<div class="ms-table">
<div class="tableCol-75">
</div>
<div class="tableCol-25">
</div>
</div>
There you go:
.ms-table {
width: 80%;
}
.tableCol-70 {
float: left;
width: 70%;
border: 1px solid black;
margin-right: 10px;
}
.tableCol-25 {
float: left;
width: 25%;
border: 1px solid blue;
}
<div class="ms-table">
<div class="tableCol-70">
My name is abc and I live in ams.
</div>
<div class="tableCol-25">
I love junk food even though it is unhealthy
</div>
</div>
use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
display: table;
width: 100%;
height: 100px;
}
.table-cell{
display: table-cell;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div>
<div class="table-cell tableCol-25">25%</div>
</div>
use display: inline-block;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
width: 100%;
min-height: 100px;
}
.table-cell{
display: inline-block;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div><!--
--><div class="table-cell tableCol-25">25%</div>
</div>
How am I able to center vertically both the form and the and div next to it? I need to be able to scroll if the container of both is smaller than the inner content height space.
HTML:
<div id="outer_1">
<div id="inner_1">
<form id="form">
<input/>
<input/>
</form>
<div id="login-request">
If you do not have a login,
<span>touch here</span>
</div>
</div>
</div>
CSS:
#outer_1 {
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1 {
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form {
text-align: center;
vertical-align: middle;
}
#login-request {
text-align: center;
vertical-align: middle;
}
Please consider this JSFiddle.
Can't you just fix this with a float:left on both divs?
JSFiddle: http://jsfiddle.net/4vtf5cn6/6/
Added lines are marked with **, so don't just copy the below code ;)
#outer_1{
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1{
**padding-top:30px;
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form{
display: table-cell;
text-align: center;
vertical-align: middle;
**float:left;
}
#login-request{
display: table-cell;
text-align: center;
vertical-align: middle;
**float:left;
}
Result:
try this, the form and the message both are horizontally and vertical center aligned, look at it in
http://jsfiddle.net/4vtf5cn6/10/
<div id="outer_1">
<div id="inner_1">
<form id="form">
<input/>
<input/>
<div id="login-request" class="login-request-alert">
If you do not have a Travelport Mobile Agent login,
<span class="urlink">touch here</span>
</div>
</form>
</div>
</div>
#outer_1{
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1{
padding-top:30px;
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form{
display: table-cell;
text-align: center;
vertical-align: middle;
float:left;
}
#login-request{
display: table-cell;
text-align: center;
vertical-align: middle;
float:left;
}
An option could be percentage values for margin-top property of CSS rule. For example:
.container {
width: 150px;
height: 200px;
border: 3px solid orange;
}
.child {
/* Center horizontally */
margin-left: auto;
margin-right: auto;
/* Center vertically */
margin-top: 50%;
width: 30px;
height: 40px;
border: 3px solid yellowgreen;
}
<div class="container">
<div class="child"></div>
</div>
The easiest way is to add a <div>, which encloses the #form and the #login-request. Like:
<div id="outer_1">
<div id="inner_1">
<div id="enclose">
<form id="form">
<input/>
<input/>
</form>
<div id="login-request" >
If you do not have a login,
<span>touch here</span>
</div>
</div>
</div>
</div>
and in the CSS:
#enclose {
display: table-cell;
text-align: center;
vertical-align: middle;
overflow-y: auto;
}
and style the #form and the #login-request as you need it
try this DEMO
#form{
display: inline-block;
text-align: center;
vertical-align: middle;
}
#login-request{
display: inline-block;
text-align: center;
vertical-align: middle;
}
Is there a way to present data as follows using css?
An article is divided into paragraphs, and each paragraph has a (usually smaller) box/sub-paragraph to the right of it, horizontally aligned with its respective paragraph.
Yes, it is possible. Here is an example of how you can achieve this http://jsfiddle.net/sptzH/1/
HTML:
<section class="content">
<article class="row">
<p>Paragraph A</p>
<div class="teaser">
Text related to A Text related to A Text related to A Text related to A Text related to A Text related to A
</div>
</article>
<article class="row">
<p>Paragraph B Paragraph B Paragraph B Paragraph B</p>
<div class="teaser">
Text related to B
</div>
</article>
</section>
CSS:
.content {
width: 500px;
}
.row {
clear: both;
padding: 10px;
border-top: solid 1px #000;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row p {
width: 60%;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 50px;
}
.row .teaser {
width: 40%;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 6px;
border: dotted 1px #999;
}
Using some CSS you could do something like the following. Example
CSS
.wrapper {
width: 500px;
overflow: hidden;
margin-top: auto;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
.wrapper .paragraph {
width: 225px;
float: left;
height: 150px;
line-height: 150px;
border: medium solid #000;
text-align: center;
vertical-align: middle;
}
.wrapper .text {
float: right;
width: 225px;
height: 100px;
line-height: 100px;
border: medium solid #000;
text-align: center;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="paragraph">Paragraph</div>
<div class="text">Related Text</div>
</div>
<div class="wrapper">
<div class="paragraph">Paragraph</div>
<div class="text">Related Text</div>
</div>