Why first "display: inline-block;" div below that the second ?
I want two div in one line.
see example http://jsfiddle.net/ubo2bok9/
CSS code
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
}
.inConteiner {
width: 190px;
height: 30px;
background-color: #29e;
color: white;
margin: 2px;
}
HTML code
<div class="conteiner">
first
</div>
<div class="conteiner" id="BaseConteiner">
second
<div class="inConteiner">
<p> 111111111111111 </p>
</div>
<div class="inConteiner">
<p> 222222222222222 </p>
</div>
<div class="inConteiner">
<p> 333333333333333 </p>
</div>
</div>
You just need to set vertical-align:middle; to your .conteiner element because the text is being aligned with the elements in another container.
See the fiddle
Add a property float:left to your .conteiner
DEMO
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
float:left;
}
you could use like this
.conteiner {
display: table-cell;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
float:left;
}
for fixed width just use table-cell it will work fine.
add vertical-align:top; in .conteiner div
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
vertical-align:top;
}
DEMO
Related
I'm trying to learn css and html to do something, but isn't working.
I'm trying to do something like this:
But this is what i'm getting:
My code:
#agenda1 { width: 350px; height: 50px; background-color: white; } #agenda2{ height: 23px; background-color: #bf1a17; border-radius: 10px; margin-top: 10px; width: 60; } #textoagenda{ text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Just wrap the numbers in an element and make it inline-block so that it will display inline with the text but you can apply vertical padding, border-radius for rounded corners, padding as you see fit, a background-color, and vertical-align so it will align properly with the text beside it.
span {
background: #c00011;
border-radius: .75em;
padding: .25em .5em;
vertical-align: baseline;
display: inline-block;
}
<span>26/25</span> TESTTESTASDFASDF
add margin property your main div.
#agenda1 { width: 350px;
height: 50px;
background-color: white;
margin:auto; }
#agenda2{ height: 23px;
background-color: #bf1a17;
border-radius: 10px;
margin-top: 10px;
width: 60; }
#textoagenda{
text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Here you go, try this
<html>
<head>
<style>
#box1{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: green;
}
#box2{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">contents</div>
<div id="box2">contenst</div>
</body>
</html>
Basically, I am trying to put two circles next to each other (instead of on top)inside of a container.
However, there's a space between them and I want to get rid of it. How can I put two (or more) circles together?
https://jsfiddle.net/hLsu9qj0/
<div class="container">
<div class="circle">
circle 1
</div>
<div class="circle">
circle 2
</div>
</div>
css:
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
margin: 0 auto;
display: inline;
}
thanks everyone for your help!!!
It looks like all you're missing in your CSS is a float: left on the .container .circle { rule
UPDATED
One potential solution to the centering question (from comments) might be to make the .container div the size of the circles and center that
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
width: 100px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
float: left;
}
Or, as someone else suggested use display: inline-block and then set text-align: center on the .container
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
text-align: center;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 auto;
}
Try adding float to .container .circle
float:left
check this https://jsfiddle.net/hLsu9qj0/2/
Use display: inline-block; instead of display: block;.
And give margin: 0 5px; to .container .circle to give space between.
You can use float:left also.
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 5px;
}
Updated Fiddle
UPDATED : JsFiddle
OPTIONAL :
This is for overlapping of two circle.Take a look in JsFiddle
Second Way : Link
HTML:
<div class="container">
<div class="circle">circle 1</div>
<div class="circle">circle 2</div>
</div>
CSS:
.container {
position: relative;
width: 95%;
margin: 0 auto;
line-height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
margin-left:5px;
float:left;
}
Use float left in circle div
.container .circle {float:left;}
checkit out this http://jsfiddle.net/hLsu9qj0/9/
You should simply add the float:left; to the circle class. To guarantee also a good alignment, I suggest fixing the width and height of the container and set: height:100% to the circle, check the link:
//jsfiddle.net/hLsu9qj0/
you can use inside the container 2 div
<div class="container">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
put your code inside the 2 div column it defiantly works bootstrap but you need bootstrap css link inside your .html page
If you want to center them, change width of .container to .container {
clear: both;
overflow: hidden;
width: 23%;}
Here is the code.
I have typical form with label, input and helper:
The code:
html:
<div class="container">
<span class="label">Label:</span>
<div class="el">
<input>
<span>helper helper helper</span>
</div>
</div>
css:
.container {
outline: 1px solid black;
width: 200px;
height: 100px;
}
.label{
display: inline-block;
width: 30%;
}
.el{
display: inline-block;
width: 60%;
}
input{
width: 50%;
}
The problem is that Label: aligned opposite second row. I know how to fix that: i can use float: left; or vertical-align: top; in the .label class, but i want to know, why is that happening? Why Label: jump to second row?
p.s. Sorry for my english.
This is because the default value for vertical-align is baseline, which...
Aligns the baseline of the element with the baseline of its parent
For reference, here is the article on Mozilla Developer Network
Please try this one;
.inner {
display: inline-block;
vertical-align: middle;
background: yellow;
padding: 3px 5px;
}
DEMO
I think due to the display:inline-block defined is creating this situation..
Better use display:inline
This will solve your problem...
And here is the code
CSS
.container {
outline: 1px solid black;
width: 250px;
height: 100px;
}
.label{
display: inline;
width: 50%;
}
.el{
display: inline;
width: 60%;
}
input{
width: 50%;
}
HTML
<div class="container">
<span class="label">Label:</span>
<div class="el">
<input />
<span>helper helper helper</span>
</div>
</div>
I have a div with several child divs which are floating left. I don't want them to break, so I set them to display:inline-block and white-space:nowrap. Unfortunately nothing happens at all. They just keep breaking.
At the end I want to scroll in x-direction, but when I add overflow-x:scroll; overflow-y:visible it scrolls in y-direction.
.a {
width: 400px;
height: 300px;
white-space: nowrap;
display: inline-block;
}
.b {
float: left;
width: 50px;
height: 200px;
display: inline-block;
}
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="clearfix"></div>
</div>
You can see my complete implementation on JSFiddle
I may not fully understand your question but it seems like the divs/scroll behave if you remove: float: left; from .b and add: overflow:auto; to .a
Not sure what you mean, but if you stop floading your b, and give your a overflow:auto it should work
see: /jsfiddle.net/88yjz/3/
Does this give you what you want? Added overflow scroll.
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #EEEEEE;
}
.a {
width: 400px;
height: 300px;
white-space: nowrap;
overflow:scroll; /* Added this line*/
background-color: lightcoral;
-webkit-box-sizing:border-box;
}
.b {
width: 50px;
height: 200px;
margin-top: 50px;
margin-left: 15px;
display: inline-block;
background-color: lightgreen;
-webkit-box-sizing:border-box;
}
.clearfix {
float: none;
clear: both;
}
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/