I have two fixed sized div and I want to keep them horizontally middle even if I re-size the screen. Even if I remove one div for low screen, I want to keep other in the middle.
Here is the code I have tried...
Fiddle
<div id="wrapper1">
<div id="one">1</div>
<div id="two">2</div>
</div>
CSS from here...
#wrapper1 {
width: 100%;
height: 90px;
margin: 0 auto;
}
#wrapper1 #one {
width: 200px;
height: 90px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#wrapper1 #two {
width: 100px;
height: 90px;
margin-left: 10px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#media screen and (max-width: 400px) {
#wrapper1 #two {
display: none;
}
}
Demo
text-align:center into your parent div will make all the child div's will come in the center.
css
#wrapper1 {
width: 100%;
height: 90px;
text-align: center; /* add just this to make child elements center in parent div */
}
just add the mentioned below css :-
#wrapper1 {
display: table;
height: 90px;
margin: 0 auto;
text-align: center;
width: 100%;
}
through display:table and text-align:center into your parent div all the child div's will come in the center either its 1 or more than 1 div....
DEMO
Related
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%;}
I am trying to align these blocks so they are expandable, but also inline. But I can't seem to get them to maintain their own space correctly. The layout I am going for is as follows
Where box 2, and 3 are auto expanding to fill in space on whatever resolution is viewing.
JSFiddle and JSFiddle 2
CSS / HTML:
.container {
width: 75%;
min-width: 1005px;
max-width: 1428px;
height: 330px;
margin: 0 auto;
background-color: gray;
}
.box1 {
float: left;
width: 455px;
height: 250px;
background-color: rgba(0, 0, 0, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box2 {
float: left;
width: 75%;
min-width: 340px;
height: 250px;
background-color: rgba(100, 50, 50, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box3 {
float: left;
width: 25%;
min-width: 190px;
height: 250px;
background-color: rgba(50, 50, 100, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box4 {
display: block;
width: 100%;
height: 60px;
background-color: rgba(50, 100, 50, 0.75);
}
<div class="container">
<div class="box1">Test</div>
<div class="box2">Test</div>
<div class="box3">Test</div>
<div class="box4">Test</div>
</div>
Here are three techniques
"Show code snippet" and run to see the complete example.
#1 - display: inline-block and calc
Compatibility: IE 9 + and all modern browsers. There are workarounds to get this working with IE8+ if needed.
The margins and fixed column are removed from the percentage calculation with width: calc(50% - 60px)
The divs are given min-height: 100% and will re-size with content. This is possible thanks to
html,body { height: 100%; }
The inline gap is removed by placing the closing div tags right next to the next opening tag. More info here.
Example
Note: The child selectors can be replaced with class selectors if wanted.
html,
body {
height: 100%;
margin: 0;
}
div {
background: #f50057;
min-height: calc(50% - 5px);
width: calc(50% - 60px);
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
/*Fix first div*/
div:first-child {
width: 100px;
}
/*Remove third divs right margin*/
div:nth-child(3) {
margin: 0;
}
/*Top margin for last div*/
div:last-of-type {
width: 100%;
display: block;
margin: 10px 0 0;
}
<div></div><div></div><div></div><div></div>
#2 - display: table / display: table-cell
Compatibility: IE 8 + and all modern browsers
The top three divs are wrapped in a div with display: table
The top three divs are given display: table-cell
The fixed left div is given a fixed width
To allow the "cells" to evenly spread out the available width, the wrapper is given table-layout: fixed
The spacing between the top three divs is given by the border property. This is calculated into the percentage calculation thanks to * { box-sizing: border-box }
The bottom div is outside the wrapper and is given display: block. It is given a top border to create the faux margin
Example
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
background: #000;
}
.table {
display: table;
height: 50%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.table > div {
background: #f50057;
display: table-cell;
border-left: solid 10px #FFF;
}
.table > div:first-child {
border-left: none;
width: 100px;
}
.footer {
width: 100%;
display: block;
background: #f50057;
height: 50%;
border-top: solid 10px #FFF;
}
<div class="table">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
#3 - The future! display: flex
Compatibility: IE 11, all modern browsers and Safari (with -webkit- prefix)
This is my favourite! Mainly due to the fact that I created it in about 3 minutes.
The top three divs are wrapped in a container with display: flex
The first div is given its fixed pixel width and flex: 0 0 auto. This tells the div not to grow or shrink
The 2 flexible divs are given flex: 1 and will grow and shrink as needed; automatically ignoring the fixed column
The last div is outside the flex container and is independent
The height and widths of the flexible divs are created with viewport width (vw) and viewport height (vh) units.
Refer here for a fantastic flexbox guide.
Example
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.flex {
display: flex;
height: 50vh;
width: 100vw;
}
.flex > div {
background: #f50057;
flex: 1;
margin-left: 10px;
}
.flex > div:first-child {
width: 100px;
flex: 0 0 auto;
margin: 0;
}
.footer {
width: 100%;
display: block;
background: #f50057;
height: calc(50vh - 10px);
margin-top: 10px;
}
<div class="flex">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
Its not perfect but seems to do what you want with css tables.
<div class="table">
<div class="trow">
<div class="tcell">box1</div>
<div class="tcell">box2</div>
<div class="tcell">box3</div>
</div>
</div>
<div class="table">
<div class="tcell last">box4</div>
</div>
.table{display:table; width:100%; text-align:center;}
.tcell{display:table-cell; background:#000; color:#fff; min-height:100px; padding:20px; border:1px solid #fff; }
.trow{display:table-row; }
.last{ background:red; }
.trow .tcell:first-child{ width:300px; }
http://jsfiddle.net/fjsvnrLp/5/
You dont actually need the row
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/
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/