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>
Related
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 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>
I've seen an article about vertical centering of text and image. I've seen an article about vertical centering text inside a floated div.
But not both conditions.
Here's my experiment:
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
float: left;
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
Notice the image is vertically centered, but the green circle is not vertically centered.
How can I get both the image and the green circle vertically centered?
You can achieve a totally centered element using calc and view-units:
#example {
width: 100px;
height: 100px;
border: 1px solid green;
border-radius: 50px;
position: fixed;
top: calc(50vh - 50px);
left: calc(50vw - 50px);
}
<div id="example"></div>
This example will keep it right in the centre even with scrolling, etc - but you could place it centre based on the initial view using an absolute position.
My fixed code. It works in IE and in Chrome.
top: calc(0.5vh + 50px); is what does the trick. 50px of course would be the height of the element you want to vertically center.
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
position: relative;
float: left;
top: calc(0.5vh + 50px);
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
border: 1px solid black;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
You need to place the circle in a container and set the container's line-height property. Try this:
.phase {
width: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.container {
float: left;
height: 300px;
line-height: 300px;
}
.circle {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
display: inline-block;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="container"><div class="circle">
</div></div>
<div class="container"><div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div></div>
</div>
</div>
</div>
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>
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.