I have a div with display block and in it I have others in inline-block. This is what I have.
display:inline-block case
When I put div inside the first in display: block, with float left, I have this:
display:block with floating case
#container {
display: block;
width: 50%; /*Of its parent*/
}
#container > div {
display: block;
width: 22%;
padding: 5px 1.2%;
float: left;
}
/* or
#container > div {
display: inline-block;
width: 22%;
padding: 5px 1.2%;
}
or
#container > div {
display: inline-block;
width: 22%;
padding: 5px 1.2%;
float: left;
}
*/
Please, can someone tells me what it is wrong and help to fix it?
Thanks
5px 1.2% and 22% won't work really well, try
#container > div {
display: block;
width: 25%;
padding: 5px 1%;
margin: 0;
float: left;
}
#container>div {
display: block;
width: 23%;
padding: 5px 1%;
margin: 0;
float: left;
height: 100px;
}
.red{
background: red;
}
.green{
background: green;
}
<div id="container">
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
<div class="green"></div>
</div>
Try using display: flex. Floats tend to create issues. Flex looks to fix some of those issues. A great guide can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I have two containers, one has a width of 30% and the other has a width of 70% however they are not inline, instead one moves lower and by passes the other container as seen in the screenshot below how can i fix this?
main {
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
width: 30%;
}
Here is the Screenshot
http://prntscr.com/jdsy9b
Thanks
Try giving .main box-sizing: border-box;
.main {
box-sizing: border-box;
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
This way you tell the browser to account for padding, you can read more about it in the docs.
The padding actually increases the box width and height
Here i removed the padding and added some height just to see the boxes.
.main {
background-color: #f2f2f2;
height:100px;
float: right;
width: 70%;
}
.aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
height:100px;
width: 30%;
}
<div class="main"></div>
<div class="aside"> </div>
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%;}
<section id="main-content">
<div class="language-box html">HTML</div>
<div class="language-box javascript">JAVACRIPT</div>
<div class="language-box css">CSS</div>
<div class="language-box php">PHP</div>
<div class="clear"></div>
</section>
I'm trying to make this 4 box's become centralized and side by side.
I'm using this code, but it's not working as i hope:
#main-content {
margin: 0 auto;
}
.language-box {
width: 279px;
height: 400px;
background-color: white;
float: left;
margin: 0 auto;
}
http://i.imgur.com/V2DPlRa.png
You could remove float, display items as inline-block and set text-align: center to the container.
#main-content {
margin: 0 auto;
text-align: center;
width: 100%;
}
.language-box {
width: 80px;
border: 1px solid #000000;
height: 400px;
background-color: white;
/* float: left;
margin: 0 auto; */
display: inline-block;
}
Fiddle: http://jsfiddle.net/9k2ae5vv/
You need to clear after float elements:
#main-content {overflow: hidden}
you must set width for your wrapper, and everything will be fine.
#main-content {
margin: 0 auto;
width: calc(4 * 279px);
}
look working example
I have tried all methods i could find .. and nothing worked for me...
i just can wrap my head around what is the problem of aligning a div (or a block element) inside another div .. what could be so difficult..
I want to align the green block vertically.
here is the fiddle: http://fiddle.jshell.net/795St/1/
<div class="rtl centerwrapper">
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div>Average</div>
</div>
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
}
.pull-right {
float: right;
}
.rtl {
direction:rtl;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
}
Please .. can any one help .. and explain what am i dooing wrong ?
Edit:
Let me be more clear...
I need all element in one line.
just the blocks needs to be aligned at the vertical middle of the text.
Edit2: here is an image
New Answer
Here is the new fiddle link http://fiddle.jshell.net/795St/16/
CSS
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
vertical-align: middle;
position: relative;
}
.pull-right {
display: inline-table;
}
.rtl {
direction:rtl;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
}
HTML
<div class="rtl centerwrapper">
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div class="pull-right">Average</div>
</div>
Screenshot of output
Old Answer
Here is the required output
http://fiddle.jshell.net/795St/5/
.pull-right {
display: inline-table;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
text-align: center;
}
For inner divs I added display as inline-table so that they will not be treated as block element and shown in one line. For the outer div I added text-align as center. SO that it will show the contents in center.
Only 2 changes done to your fiddle.
For inner div instead of float: right I added display:inline-table
And for outer div added text-align:center.
http://fiddle.jshell.net/n234A/
Give your green block an appropriate top margin to make them sit in the middle of the wrapper.
In this demo I gave the wrapper div a red background to show centering better
you can use display:flex to do this : http://codepen.io/gc-nomade/pen/wmECy
html,body {
height:100%;
width:100%;
margin:0;
}
body , body > div{
display:flex;
}
div {
margin:auto;
}
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
order:4;
}
.first {
flex:1;
order:1;
}
or display:table http://jsfiddle.net/MxE8Y/5/ (includes IE8)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
div {
display:table;
direction:rtl;
margin:auto;
border-spacing:0.25em;
}
.green-block {
background-color: #02A556;
width: 1em;
height: 0.5em;
display:table-cell;
}
.green-block {
background-color: #02A556;
margin: 6px 10px!important;
width: 1em;
height: 0.5em;
}
Demo
Is it ok ?
.centerwrapper div:last-child{
margin-top:-8px;
}
You must display all divs as inline-blocks
.centerwrapper div {
display: inline-block;
}
HTML Code
Average
and CSS
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
margin:10px!important;
list-style:none;
}
.pull-right {
float: right;
}
.rtl {
direction:rtl;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
}
.clear{
clear:both;
}
use this.and give margin at what size you want
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/