I would like the content in the second column to have 10px of space above it. But when I add "padding-top: 10px;" the content of both columns comes down 10px. Can anyone suggest a solution?
CSS:
#div1 { display: table;}
#div1-1 { display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
#div1-2 { display: table-cell;
width: 200px;
border: 1px solid #aaa;
padding-top: 10px;
}
HTML:
<div id="div1">
<div id="div1-1">Apples</div>
<div id="div1-2">Oranges</div>
</div>
If you add float:left; to #div1-1, the first column will remain as it is.
My solution is to try to add a box in each cell
#myDiv {
display: table;
}
#div1 { display: table-row;}
#div1-1{
display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
#div1-2 {
display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
.space{
height:10px;
width:100%;
display:block;
}
.content{
width:100%;
}
<div id="myDiv">
<div id="div1">
<div id="div1-1">
<div class="content">Apples</div>
<div class="space"> </div>
</div>
<div id="div1-2">
<div class="space"> </div>
<div class="content">Oranges</div>
</div>
</div>
</div>
Related
.second{
width: 150px;
height: 150px;
border: 2px solid red;
}
.first{
position:fixed ;
top: 0;
}
<div class="container">
<div class="first">
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li></div>
<div class="second"></div>
</div>
How to avoid the positioning of "second" over "first" container? I want to position both containers side by sie (first->left;second->right). With position fixed i want to apply the sticky property.
You can use CSS flex-box to build what you want ;)
.container {
display: flex;
}
.first {
width: 150px;
height: 150px;
border: 2px solid blue;
}
.second {
width: 150px;
height: 150px;
border: 2px solid red;
}
<div class="container">
<div class="first">
<ul>
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li>
</ul>
</div>
<div class="second"></div>
</div>
Make use of
display: inline-block;
I don't know what you want to do with position: fixed but you can achieve your goal of side by side div using the following code.
.second{
width: 150px;
height: 150px;
border: 2px solid red;
float:left
}
.first{
width:150px;
height:150px;
border: 2px solid blue;
top: 0;
float:left
}
<div class="container">
<div class="first">
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li></div>
<div class="second"></div>
</div>
Building on the answer from masoudmanson if you want the red box to align right, you can do the following;
.container {
display: flex;
flex-wrap:no-wrap;
}
.first {
flex-grow:1;
border: 2px solid blue;
}
.second {
width: 150px;
height: 150px;
border: 2px solid red;
}
<div class="container">
<div class="first">
<ul>
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li>
</ul>
</div>
<div class="second"></div>
</div>
I'm trying to replicate the azure portal design layout. The challenge that I'm facing, is once I'm inside of a component (in the image example "Virtual Machine") I need to ability to create a new component inside of it, but have the style appear that its a new panel in the main panel collection. Any ideas? I've provided a template pen below.
Codepen Link
<section id="panel-container">
<div class="panel" style="border:1px solid red;"></div>
<div class="panel" style="border:1px solid red;">
<div class="sub-panel" style="border:4px solid cyan;"></div>
</div>
</section>
you can use a mix of flexbox and position
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0
}
#panel-container {
overflow-x: hidden;
height: 100vh;
border: 1px solid black;
display: flex;
}
.panel {
flex: 0 450px;
height: 100vh;
display: flex;
border: 1px solid red;
position: relative;
}
.sub-panel {
position: absolute;
top: 0;
left: 450px;
width: 450px;
height: 100vh;
border: 4px solid cyan;
}
<section id="panel-container">
<div class="panel"></div>
<div class="panel">
<div class="sub-panel"></div>
</div>
</section>
you should use display: inline-flex instead of display: inline-block.
#panel-container {
overflow: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100vh;
border: 1px solid black;
}
.panel {
position: relative;
display: inline-flex;
width: 250px;
height: 100vh;
}
.sub-panel {
width: 250px;
height: 100vh;
}
<section id="panel-container">
<div class="panel" style="border:1px solid red;"></div>
<div class="panel" style="border:1px solid red;">
<div class="sub-panel" style="border:4px solid cyan;"></div>
</div>
</section>
Unless somebody can provide an alternative solution, this table hack is the best I can come up with. Codepen Link
<table>
<tr>
<td>Panel</td>
<td>Panel
<td style="width: 600px;background:red;">Sub Panel</td>
<td>Sub Sub Panel</td>
</td>
<td>Panel</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
min-width: 300px;
height:100vh;
padding: 15px;
vertical-align: top;
border: 1px solid black;
}
Is there some useful techniques?
Here is the fiddle
For text centering I tried to use this:
.wrapper div {
position: relative;
top: -8px;
}
To remove bottom canvas margin I tried to use this:
.wrapper canvas {
margin-bottom: -5px;
}
But I always try to avoid negative parameters.
Did you mean vertically align? Like this?
.wrapper {
border: 1px solid green;
display: inline-block;
}
.wrapper div {
border: 1px solid blue;
display: inline;
margin-left: 10px;
}
.wrapper canvas {
border: 1px solid red;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<canvas width="32" height="32"></canvas>
<div class="question">1234567890</div>
</div>
is this what you mean?
canvas {
float: left;
}
You can use this code for horizontally design
<style>
.wrapper {
border: 1px solid green;
float:left;
}
.demo_class{
display: inline-block;
float: left;
}
.demo_class .question{
height: 32px;
line-height: 32px;
}
<div class="wrapper">
<div class="demo_class">
<canvas id="null" width="32" height="32" style="border:1px solid red;"></canvas>
</div>
<div class="demo_class">
<div class="question">1234567890</div>
</div>
I am trying to top-align two child divs in a containing div. The child divs contain different content and may be of varying heights. Is there a way I can make the two child divs top-align?
Here's a fiddle to illustrate the problem - http://jsfiddle.net/billafy/Rhj36/3/
HTML
<div class="headerStuff">
Header
</div>
<div class="sectionArea">
<div class="leftPanel">
<div><img src="http://placekitten.com/50/50" alt="some image1" /></div>
<div><button>test</button></div>
</div>
<div class="rightPanel">
<div><img src="http://placekitten.com/50/50" alt="some image2" /></div>
<div>
<span>Some other text</span>
<div>
<span>And some additional content</span>
</div>
</div>
</div>
</div>
<div class="footerStuff">
Footer
</div>
CSS
.headerStuff {
font-size: 20pt;
background-color: purple;
border: 1px solid lime;
}
.sectionArea {
width: 100%;
display: inline-block;
height: 370px;
text-align: center;
vertical-align: middle;
border: 1px solid lime;
}
.leftPanel {
display:inherit;
border: 1px solid orange;
}
.rightPanel {
display:inherit;
border: 1px solid blue;
}
.footerStuff {
font-size: 20pt;
background-color: red;
border: 1px solid lime;
}
Use vertical-align: top; to both panels.
CSS:
.leftPanel {
display:inherit;
border: 1px solid orange;
vertical-align: top;
}
.rightPanel {
display:inherit;
border: 1px solid blue;
vertical-align: top;
}
You could use vertical-align:text-top; in your right and left panels.
I have the following html code:
<div class="a">
<div class="b">
text
</div>
<div class="c">
text
</div>
</div>
div.a
{
margin-top: 10px;
clear: left;
float: left;
width: 100%;
text-align: center;
}
div.b
{
padding: 27px 10px 7px 10px;
background-color: #fff;
overflow: hidden;
float: left;
}
div.c
{
float: left;
}
What styles should I set for div.c to make it be beside the div.b and fit the remaining width?
It's for a tempalte that will fit 100% of the screen.
thanks!
<div class="a">
<div class="b">
click here to be amazed!
</div>
<div class="c">
this is some awesome text
</div>
</div>
<STYLE>
.b,.c {
padding:15px;
}
div.a {
border: 1px solid red;
}
div.b {
float: left;
border: 1px solid blue;
}
div.c {
border: 1px solid green;
}
</STYLE>